30 seconds of code 的 ESLint 9 与 Prettier 3 配置实战：一份可直接复用的前端代码规范方案

• 教程
• 文档

本文围绕 30 seconds of code 仓库中实际使用的 ESLint 与 Prettier 配置展开，完整呈现作者的个性化代码规范方案：包括基于 flat config 的eslint.config.js、精简的.prettierrc、全局变量文件globals.js以及配套依赖版本。读完本文，你将理解每一处规则的意图与取值依据，并能将这套配置迁移到自己的 JavaScript / TypeScript 项目中快速启动。

[!WARNING]

这是作者非常个人化的配置，带有强烈的主观倾向，你可能需要根据团队风格或个人习惯进行调整。

配置总览：两份文件完成规范闭环

整套方案的核心是两份配置文件，分工明确：ESLint 负责"查"（代码质量与潜在错误），Prettier 负责"改"（统一格式化风格），再由eslint-config-prettier关闭两者之间冲突的规则，实现零摩擦协作。

import js from '@eslint/js'; import eslintConfigPrettier from 'eslint-config-prettier/flat'; import globals from './globals.js'; export default [ js.configs.recommended, eslintConfigPrettier, { languageOptions: { ecmaVersion: 2025, sourceType: 'module', globals: { ...globals }, }, rules: { 'no-duplicate-imports': 'error', 'no-useless-computed-key': 'error', 'no-console': 'off', eqeqeq: ['error', 'smart'], curly: 'off', 'object-shorthand': ['warn', 'always'], camelcase: ['warn', { properties: 'always' }], 'no-extend-native': 'error', 'no-loop-func': 'error', 'no-implied-eval': 'error', 'no-iterator': 'error', 'no-label-var': 'error', 'no-multi-str': 'error', 'no-script-url': 'error', 'no-shadow-restricted-names': 'error', 'no-spaced-func': 'error', 'no-sparse-arrays': 'warn', 'no-fallthrough': 'warn', 'no-caller': 'error', 'no-eval': 'error', 'no-negated-in-lhs': 'error', 'no-new': 'error', 'no-new-require': 'error', 'block-scoped-var': 'error', 'no-use-before-define': 'warn', 'no-proto': 'error', complexity: ['warn', 50], 'new-parens': 'error', yoda: ['error', 'never'], 'no-useless-assignment': 'error', }, }, ];

{ "printWidth": 80, "arrowParens": "avoid", "singleQuote": true, "tabWidth": 2, "useTabs": false, "semi": true, "trailingComma": "es5", "bracketSpacing": true, "objectWrap": "collapse" }

可以看到，这套方案只依赖三个基础包——@eslint/js提供推荐规则集、eslint-config-prettier处理与 Prettier 的兼容、本地globals.js声明全局变量。没有引入任何风格化插件，规则全部手写，保持了配置的最小化与可读性。

依赖与版本基线

该配置针对ESLint 9 与 Prettier 3设计并优化，配套使用了eslint-config-prettier来协调两者。原文档编写时基于eslint@9.24.0与prettier@3.5.3；而在当前仓库的 package.json 中，实际的开发依赖为：

globals.js：全局变量的来源与作用

配置中导入的globals.js是一个记录了各运行环境下全局变量的清单文件。它让 ESLint 能正确识别哪些标识符是环境提供的（如浏览器中的window、document，Node.js 中的Buffer、process），从而避免把全局变量误报为"未定义"。

原文档作者并未百分百确认该文件的出处，但指出可以从globals这个 npm 包获取同类清单。在当前仓库中，globals.js 就位于仓库根目录，共约 800 行，采用如下结构：

export default { // Node.js / 通用运行时全局变量 __dirname: false, __filename: false, process: false, Buffer: false, console: false, // 浏览器全局变量 window: false, document: false, navigator: false, localStorage: false, fetch: false, // 事件处理属性（可赋值，故为 true） onload: true, onclick: true, // ... };

其中每个键名都是全局变量的名称，值false表示该变量只读（不可赋值），true表示可写（例如exports、location、OffscreenCanvas及各类on*事件属性）。这份清单同时覆盖 Node.js 与浏览器环境，还包含 Web API（如ReadableStream、RTCPeerConnection）、SVG DOM 以及 JavaScript 内置对象（如Array、Map、Promise）等。

在languageOptions.globals中通过{ ...globals }展开后，ESLint 便会以这些条目作为全局变量的定义来源，与ecmaVersion: 2025、sourceType: 'module'一起构成完整的语言环境描述。

ESLint：从推荐规则到个性化调整

ESLint 的规则多如牛毛，无法也不必逐一覆盖。js.configs.recommended提供的默认规则质量已经不错，但为了让代码风格与多数协作团队保持一致，仍需做少量针对性调整。

[!NOTE]

作者最近升级到了 ESLint9.x.x，此前使用的一些风格类规则已在 v9 中废弃，官方建议改用@stylistic/eslint-plugin-js插件。作者计划在未来迁移到该插件，以发挥其全部能力。这也是从 v8 的 eslintrc 配置迁移到 v9 flat config 时最常见的注意事项之一。

通用配置（General setup）

• js.configs.recommended：启用 ESLint 官方推荐的规则集，作为安全基线。
• eslintConfigPrettier：通过eslint-config-prettier/flat入口（flat config 专用版本）关闭与 Prettier 冲突的规则，避免"格式检查"和"格式修改"互相打架。
• languageOptions：
  • ecmaVersion: 2025：启用 2025 年的最新 JavaScript 语法特性，如最新的RegExp增强、Promise.try等。
  • sourceType: 'module'：按 ES Module 解析，支持import/export语句。
  • globals: { ...globals }：注入globals.js中的全局变量清单，让no-undef等规则正确放行环境内置变量。

规则详解

原文档对每条规则都给出了选型理由，以下是完整解读：

• no-duplicate-imports（error）：禁止重复导入同一模块，避免冗余import语句。
• no-useless-computed-key（error）：禁止无意义的计算属性键，如{ ['a']: 1 }应写成{ a: 1 }。
• no-console（off）：允许使用console语句。作者提示：生产环境你可能想把它改回warn或error。
• eqeqeq（['error', 'smart']）：强制使用严格相等===/!==；smart模式允许在明确比较null、undefined等场景下使用==。
• curly（off）：关闭强制花括号规则。作者偏好能不加花括号的if语句尽量不加。
• object-shorthand（['warn', 'always']）：对象字面量未使用简写语法时给出警告，如{ a: a }应写为{ a }。
• camelcase（['warn', { properties: 'always' }]）：要求变量与对象属性都遵循 camelCase 命名，违反时警告。
• no-extend-native（error）：禁止扩展原生对象（如给Array.prototype添加方法）。
• no-loop-func（error）：禁止在循环内声明函数，规避闭包捕获循环变量的经典陷阱。
• no-implied-eval（error）：禁止隐式eval()，如setTimeout('code')这种传入字符串的形式。
• no-iterator（error）：禁止使用遗留的__iterator__属性。
• no-label-var（error）：禁止标签名与变量名重名。
• no-multi-str（error）：禁止使用反斜杠续行的多行字符串。
• no-script-url（error）：禁止使用javascript:协议的 URL（如<a href="javascript:void(0)">）。
• no-shadow-restricted-names（error）：禁止遮蔽undefined、NaN、Infinity等受限标识符。
• no-sparse-arrays（warn）：对稀疏数组（如[1, , 3]）给出警告。
• no-fallthrough（warn）：对switch语句中意外的贯穿（fallthrough）分支给出警告。
• no-caller（error）：禁止使用arguments.caller/arguments.callee。
• no-eval（error）：禁止使用eval()。
• no-negated-in-lhs（error）：禁止在in表达式中对左操作数取反（如!key in obj）。
• no-new（error）：禁止new一个构造函数却不用其返回值，如new Foo()单独成行。
• no-new-require（error）：禁止new require()调用（针对 CommonJS）。
• block-scoped-var（error）：强制变量遵循块级作用域，防止var提升带来的问题。
• no-use-before-define（warn）：在变量定义前使用该变量时给出警告。
• no-proto（error）：禁止使用__proto__属性。
• complexity（['warn', 50]）：函数圈复杂度超过 50 时警告，用于控制函数过度复杂。
• new-parens（error）：要求构造调用必须带括号，如new Date()而非new Date。
• yoda（['error', 'never']）：禁止 Yoda 条件（如if (true === condition)），要求把变量放在比较运算符左侧。
• no-useless-assignment（error）：禁止无意义的赋值（值从未被读取），ESLint 9 新增的规则。

仓库实际配置的差异补充

原文档展示的是"最小可迁移版本"。当前仓库根目录的 eslint.config.js 在此基础上扩展了更多规则与一个ignores字段，可作为进阶参考：

• ignores: ['app/assets/config/manifest.js']：显式跳过无需检查的第三方生成文件。
• 风格类规则：indent: 'off'、quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }]、semi: ['error', 'always']、comma-dangle（数组/对象/导入多行时强制尾逗号、函数参数禁用）、brace-style、arrow-parens: ['error', 'as-needed']等。
• 空格类规则：key-spacing、comma-spacing、block-spacing、space-infix-ops、eol-last、no-multi-spaces、no-multiple-empty-lines等。

这套完整配置同样保留了原文档的核心规则（no-duplicate-imports、eqeqeq、yoda、complexity、no-useless-assignment等），印证了两者出自同一套配置演进脉络。

Prettier：一行一参数的格式化偏好

Prettier 的配置相对直白，每个选项对应一种明确的格式化行为：

• printWidth: 80：单行最大宽度 80 字符。作者不喜欢长行代码，超出即换行。
• arrowParens: "avoid"：能省略括号的箭头函数参数一律省略（如x => x，多参数时仍保留括号）。
• singleQuote: true：统一使用单引号，视觉上更简洁。
• tabWidth: 2：缩进 2 个空格，保持统一。
• useTabs: false：永远用空格、不用制表符。
• semi: true：语句末尾强制分号。作者坦言将来可能会改变主意。
• trailingComma: "es5"：仅在 ES5 合法的地方（对象、数组）多行时添加尾逗号，函数参数不加。作者认为多行对象和数组的尾逗号对版本控制更友好（新增一行不会污染上一行 diff）。
• bracketSpacing: true：对象字面量花括号内侧保留空格，如{ foo: 1 }而非{foo: 1}。
• objectWrap: "collapse"：对象能在一行放下时尽量折叠为单行，有助于缩短文件长度。作者对此选项态度中立。

[!NOTE]

trailingComma是几个选项中最有争议的一个（es5、all、none三种取值各有拥趸），选择时建议与团队约定一致。

仓库里的 Prettier 进阶用法

当前仓库的 .prettierrc 在原文档配置之外还添加了两段内容，展示了 Prettier 在生产项目中的实际扩展方式：

{ "plugins": ["prettier-plugin-astro"], "overrides": [ { "files": "*.astro", "options": { "parser": "astro" } } ] }

• plugins：注册prettier-plugin-astro，让 Prettier 能够格式化 Astro 组件文件。
• overrides：针对*.astro文件指定专用parser，避免默认解析器误判混合了 HTML / CSS / JS 的 Astro 语法。

这说明了 Prettier 配置的典型演进路径：先设定全局格式化偏好，再通过overrides与插件为特定文件类型定制行为。

从零搭建：如何在自己的项目中使用这套配置

结合仓库的 package.json 中type: "module"的设置与 scripts 组织方式，你可以按以下步骤在任意 ESM 项目中落地这套方案：

1. 安装依赖：

npm install --save-dev eslint@^9 prettier@^3 eslint-config-prettier

2. 将上面的eslint.config.js与.prettierrc复制到项目根目录，并按需创建或引入自己的globals.js（可直接npm install globals后从中导出，或参照 globals.js 手写精简版）。

3. 在package.json中补充脚本：

{ "scripts": { "lint": "eslint .", "format": "prettier --write ." } }

4. 若项目中存在非标准文件类型（如 Astro、Vue、MDX），参照上文为.prettierrc添加对应插件与overrides。

该仓库自身以"type": "module"运行（见 package.json），因此eslint.config.js可以直接使用import/export default语法；如果你在 CommonJS 项目中使用，需相应改为module.exports或保留.mjs扩展名。

结语

这套 ESLint + Prettier 配置的价值在于克制与自洽：ESLint 聚焦真正的代码质量隐患（重复导入、隐式 eval、原生对象扩展、复杂度过高等），把纯格式问题完全交给 Prettier，再通过eslint-config-prettier消除二者重叠。如果你想查看这套配置在大型真实项目中的完整形态，可以对照仓库根目录的 eslint.config.js 与 .prettierrc 两份实际生效文件，以及记录了全部依赖版本的 package.json，直接复刻或按需裁剪即可。

• 教程
• 文档