eslint配置详解

[Yueyanc]

eslint config 文件

root

root 配置用于指定 ESLint 的根目录。根目录是指 ESLint 在查找配置文件和解析文件路径时的起始位置。

当你运行 ESLint 时，它会从当前工作目录开始向上逐级查找，直到找到一个包含 ESLint 配置文件的目录。然后，ESLint 将使用该配置文件来确定规则和解析器等设置。

但是，有时你可能希望指定一个特定的目录作为 ESLint 的根目录，而不是使用默认的查找规则。这时就可以使用 root 配置来指定。

module.exports = {
  root: true,
  // 其他配置选项...
};

在上述示例中，我们将 root 设置为 true，表示当前目录是 ESLint 的根目录。这将告诉 ESLint 停止向上查找配置文件，并使用当前目录下的配置文件作为主配置。

使用 root 配置可以很方便地控制 ESLint 的根目录，特别是当你有多个子目录需要分别配置时，可以在每个子目录下创建独立的配置文件，并使用 root 配置将其作为独立的 ESLint 实例。

请注意，root 配置只能在配置文件中使用一次，它不会影响其他目录中的 ESLint 实例。如果你想在不同的目录中使用不同的根目录配置，需要在每个目录下创建相应的配置文件并设置 root 配置。

plugins

plugins 配置用于引入和启用 ESLint 插件。插件是一种扩展机制，用于提供额外的规则、解析器或其他功能，以满足特定的代码检查需求。

插件名称通常遵循以下格式：

1. 完整插件名称：eslint-plugin-pluginName，其中 pluginName 是插件的名称。例如，eslint-plugin-react 是一个名为 "react" 的插件。
2. 简写插件名称：pluginName，其中 pluginName 是插件的名称。例如，react 是一个名为 "eslint-plugin-react" 的插件的简写名称。

在配置文件中引用插件时，可以使用完整插件名称或简写插件名称：

module.exports = {
  plugins: [
    'plugin1',
    'eslint-plugin-plugin2'
  ],
  // 其他配置选项...
};

在上述示例中，我们引用了两个插件。plugin1 是一个简写插件名称，而 eslint-plugin-plugin2 是一个完整插件名称。

注意：

1. 引入插件后必须要把对应规则手动加入rules里面，如果不想手动加入，请使用extends。
2. 通常plugins是在你想要自定义使用具体哪些规则时才会设置

env

env 配置用于指定代码运行的环境，以便 ESLint 可以根据环境提供适当的全局变量和预定义规则。

env 配置可以是一个对象，也可以是一个扩展配置的数组。对象形式的 env 配置允许你手动指定每个环境的布尔值，而扩展配置的数组允许你使用预定义的环境配置。

module.exports = {
  // ...
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  // ...
};

在上述配置中，我们使用了对象形式的 env 配置，并指定了三个环境：browser、node 和 es2021。每个环境都被设置为 true，表示代码将在这些环境中运行。

通过指定这些环境，ESLint 将了解代码可能使用的全局变量和预定义规则。例如，在 browser 环境中，ESLint 将了解 window 和 document 等全局变量，并应用与浏览器相关的规则。

除了手动指定环境外，你还可以使用扩展配置来简化配置文件。例如，使用 'eslint:recommended' 扩展配置将启用一组推荐的规则，并自动设置了常见的环境，如 browser 和 node。

module.exports = {
  // ...
  extends: [
    'eslint:recommended'
  ],
  // ...
};

extends

extends 字段用于扩展配置文件，以重用和继承已定义的规则和配置。通过使用 extends 字段，你可以将一个或多个已有的配置文件引入到当前配置文件中，从而简化配置过程并继承规则。

以下是一个示例配置文件，展示了 extends 字段的使用：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended'
  ],
  // ...
};

在 ESLint 配置文件中，extends 字段会继承以下几个字段的配置：

1. 规则（rules）
2. 环境（env）
3. 全局变量（globals）
4. 解析器选项（parserOptions）

extends值的解析规则:

1. 内置配置：ESLint 内置了一些常用的配置，可以直接使用它们的名称作为 extends 字段的值。例如，可以使用 "eslint:recommended" 来扩展 ESLint 的推荐配置，或者使用 "airbnb" 来扩展 Airbnb JavaScript Style Guide 的配置。
2. 插件配置：如果你安装了 ESLint 插件，可以使用插件名称加上配置名称的方式来扩展插件的配置。例如，如果安装了插件 eslint-plugin-react，可以使用 "plugin:react/recommended" 来扩展该插件的推荐配置。
3. 绝对路径或相对路径：可以使用绝对路径或相对路径指定一个配置文件的路径，以扩展该配置文件的配置。例如，可以使用 "./my-config.js" 来扩展当前目录下的 my-config.js 配置文件。
4. npm 包名：可以使用 npm 包名作为 extends 字段的值，ESLint 会在安装的依赖中查找该包并使用其主配置文件来扩展配置。例如，可以使用 "eslint-config-my-package" 来扩展名为 eslint-config-my-package 的包的配置。
5. 字符串数组：可以使用字符串数组来同时扩展多个配置。数组中的配置会按顺序依次合并。例如，extends: ["eslint:recommended", "plugin:react/recommended"] 将同时扩展 ESLint 推荐配置和 eslint-plugin-react 插件的推荐配置。

注意： recommended 一般定义在对应插件的入口文件中；类似于：

// https://github.com/typescript-eslint/typescript-eslint/blob/main/.eslintrc.js
export = {
 configs: {
      all,
      base,
      'disable-type-checked': disableTypeChecked,
      'eslint-recommended': eslintRecommended,
      recommended,
      'recommended-requiring-type-checking': recommendedTypeChecked,
      'recommended-type-checked': recommendedTypeChecked,
      strict,
      'strict-type-checked': strictTypeChecked,
      stylistic,
      'stylistic-type-checked': stylisticTypeChecked,
     },
 rules,
};

parserOptions

parserOptions 字段用于配置解析器的选项，以便正确解析和分析代码。

parserOptions 的用法示例及其含义:

1. 指定解析器：

   "parserOptions": {
     "parser": "babel-eslint"
   }

   这个示例中，我们使用了 Babel 解析器 (babel-eslint) 来解析代码。通过指定解析器，ESLint 将使用相应的解析器来解析代码并执行规则检查。

2. 指定 ECMAScript 版本：

   "parserOptions": {
     "ecmaVersion": 2021
   }

   这个示例中，我们指定了 ECMAScript 的版本为 2021。通过指定 ECMAScript 版本，ESLint 将根据相应的语法规范来解析代码。

3. 启用模块解析：

   "parserOptions": {
     "sourceType": "module"
   }

   这个示例中，我们启用了模块解析。通过设置 sourceType 为 "module"，ESLint 将把代码解析为 ECMAScript 模块。

4. 启用 JSX 解析：

   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     }
   }

   这个示例中，我们启用了 JSX 解析。通过设置 ecmaFeatures.jsx 为 true，ESLint 将能够解析和检查 JSX 语法。

5. 启用全局变量：

   "parserOptions": {
     "env": {
       "browser": true,
       "node": true
     }
   }

   这个示例中，我们启用了浏览器和 Node.js 环境。通过设置 env 对象中相应的属性为 true，ESLint 将知道代码中可以使用的全局变量。

parserOptions.project

在 ESLint 的 parserOptions 中，project 是用于指定 TypeScript 项目的配置文件路径或者文件夹路径。它的作用是告诉 ESLint 在解析 TypeScript 代码时应该使用哪个 TypeScript 配置文件来获取项目的类型信息。

当你在一个大型的 TypeScript 项目中使用 ESLint 时，通常会有一个或多个 TypeScript 配置文件（例如 tsconfig.json）来定义项目的编译选项和类型检查规则。这些配置文件中包含了项目的类型信息，包括类型声明、模块解析规则、编译选项等。

通过在 ESLint 的 parserOptions 中设置 project 字段，你可以让 ESLint 使用指定的 TypeScript 配置文件来获取项目的类型信息，并在代码检查过程中进行类型检查。

示例：

"parserOptions": {
      project: [
      './tsconfig.eslint.json',
      './packages/*/tsconfig.json',
      './packages/scope-manager/tsconfig.build.json',
      './packages/scope-manager/tsconfig.spec.json',
    ],
}

在上述示例中，我们将 project 字段设置为 ./tsconfig.json，指定了 TypeScript 配置文件的路径。ESLint 将使用该配置文件来获取项目的类型信息。

使用 project 字段可以让 ESLint 在检查 TypeScript 代码时能够更准确地进行类型检查，并提供更准确的代码检查结果。

需要注意的是，使用 project 字段需要安装 @typescript-eslint/parser 解析器，并且需要在项目中安装 TypeScript。