我理解的eslint配置

配置示例

module.exports = {
  root: true,
  parserOptions: {
    parser: require.resolve('babel-eslint'),
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  env: {
    es6: true,
    node: true,
    browser: true
  },
  plugins: [
    "flowtype"
  ],
  extends: [
    "eslint:recommended",
    "plugin:flowtype/recommended"
  ],
  globals: {
    "__WEEX__": true,
    "WXEnvironment": true
  },
  rules: {
    'no-console': process.env.NODE_ENV !== 'production' ? 0 : 2,
    'no-useless-escape': 0,
    'no-empty': 0
    // 以下规则打开后保存会格式化，但是 test文件夹下不符合此规则
    // 'quotes': ['warn', 'single'], // 强制使用单引号
    // 'semi': ['warn', 'never'], // 禁止使用分号
    // 'comma-dangle': ['warn', 'never'] // 禁止尾随逗号
  }
}

分类

1、eslint配置合并策略

1-1、root

• 作用：定义 ESLint 配置文件的查找边界，防止意外继承上级目录配置
• 配置文件查找逻辑：
  • 从当前文件所在目录开始查找 .eslintrc.* 文件
  • 未设置 root: true**：向上级目录递归查找，直到：
    • 找到包含 root: true 的配置文件（停止查找）
    • 到达文件系统根目录（停止查找）
  • 找到多个配置文件 ：ESLint 会合并所有配置（就近优先）
  • 未找到任何配置：使用 ESLint 内置默认规则

2、解析器

• 解析器的任务：将代码转换为 AST，并识别变量的定义与引用

2-1、parserOptions

• 配置解析器的行为
• 选项

  • parser

    • 指定一个不同的解析器（如 babel-eslint、@typescript-eslint/parser），以支持实验性语法或非标准语法（如 TypeScript、Flow）。
    • 必须显式配置 ，否则使用默认解析器（espree）

    // 示例：不配置 `parser`
    // 如果你的代码使用了 Flow 类型注解，而没有使用 `babel-eslint` 解析器（或现在的 `@babel/eslint-parser`）：
    // @flow
    function foo(argument: string): number {
        return argument.length;
    }
    // ESLint 默认解析器（`espree`）无法解析 Flow 语法，会报告解析错误：
    Parsing error: Unexpected token :

  • ecmaVersion

    • 指定要使用的 ECMAScript 版本（例如 5, 6, 7, 8, 9, 10, 11 等，或年份如2015、2016等）。这决定了 ESLint 能够识别哪些语法特性

    // 示例：不配置 `ecmaVersion` 或配置过低
    // 假设我们在代码中使用了 ES2018 的特性，如异步迭代（`for-await-of`）或正则表达式命名捕获组。
    // 示例代码：使用 ES2018 的 for-await-ofasync 
    function process(array) {
        for await (const i of array) {
            console.log(i);
        }
    }
    
    // 如果 `ecmaVersion` 设置为 2017 或更低，ESLint 将无法识别 `for-await-of` 语法，会报告解析错误：
    Parsing error: Unexpected token for

  • sourceType

    • 设置为 "script"（默认）或 "module"（如果你的代码是 ECMAScript 模块）

    // 示例：不配置 `sourceType`
    // 默认情况下，`sourceType` 是 `"script"`。如果你的代码使用了 ES6 模块（`import`/`export`），而没有设置 `sourceType: 'module'`，ESLint 会报错：
    import path from 'path'; // 错误：Parsing error: The keyword 'import' is reserved

3、规则集

• 规则的任务：基于 AST 检查代码是否符合特定规范

3-1、extends

• 批量继承并启用规则 ：直接复用现有规则集（如 eslint:recommended）的配置，无需逐个手动配置 rules。
• 本质是预设的 rules 集合

3-2、rules

• 最终决定启用哪些规则及错误级别
• 会覆盖继承的规则

3-3、plugins

• 扩展规则的 "选项池" ：插件（如 eslint-plugin-react）提供一系列预定义规则，但默认不启用任何规则
• 必须通过 rules 显式启用

4、既影响解析器又影响规则执行

• 不直接定义规则，但会影响规则的执行结果

4-1、env

• 用于指定代码运行的环境。每个环境都带来一组预定义的全局变量。例如：

  • browser: 浏览器全局变量（如 window, document）。
  • node: Node.js 全局变量和范围（如 require, process）。
  • es6: 启用除了模块之外的所有 ECMAScript 6 特性

  // 示例：不配置 `es6` 环境
  // 在代码中使用 ES6 的全局对象（如 `Promise`, `Set`）或语法（如 `let`, `const` 在 ES6 中）
  let a = 1; // 错误：Parsing error: The keyword 'let' is reserved (如果 ecmaVersion 未设置或低于6)
  const p = new Promise(); // 错误：'Promise' is not defined. (如果未设置 es6 环境)
  // 注意：`ecmaVersion` 控制语法，而 `env: { es6: true }` 会同时启用 ES6 语法和全局变量。如果没有设置 `es6` 环境，即使设置了 `ecmaVersion: 6`，ESLint 也不会知道 `Promise` 等是全局变量，所以会报未定义错误。

• 解析器阶段 ：当配置 env: { browser: true } 时，解析器会预先知晓 window、document 等变量是合法的全局变量，因此在构建 AST 时不会将它们标记为 "未定义"

• 规则执行阶段 ：该规则会遍历 AST，检查所有变量引用是否有对应的定义。由于解析器已在前一阶段 将 window 标记为合法全局变量，no-undef 规则在执行时不会发现违规

• 对比实验

配置	解析器行为	no-undef 规则结果
env: { browser: true }	将 window 识别为合法全局变量	✅ 通过（不报错）
无 env 配置	将 window 标记为未定义变量	❌ 报错（'window' is not defined）

4-2、globals

• 和 env 的作用机制相同，但粒度更细
• 解析器阶段 ：当配置 globals: { $: true } 时，解析器会将 $ 视为合法的全局变量，不会标记为 "未定义"。
• 规则执行阶段 ：no-undef 规则遍历 AST 时，由于解析器已处理过 $，因此不会报错。

对比 env 和 globals

• 两者共同构成了解析器的 "全局变量白名单"，确保规则（如 no-undef）在不同环境下的正确性。

配置项	作用范围	示例配置	影响的全局变量
env	预定义一组环境的全局变量	{ "browser": true }	window, document, setTimeout
globals	手动声明自定义的全局变量	{ "$": true, "myGlobal": false }	$, myGlobal

配置最佳实践：

1. root 必设为 true

   在项目根配置中始终设置，避免继承全局配置

2. env 按需配置

   浏览器项目：browser: true, node: false

   Node 后端项目：browser: false, node: true

3. ecmaVersion 动态设置

   ecmaVersion: 'latest' // ESLint 8+ 支持