ESLint 使用教程（三）：12个ESLint 配置项功能与使用方式详解

前言

在现代前端开发中，代码质量与一致性是至关重要的，ESLint 正是为此而生的一款强大工具，本文将带您详细了解 ESLint 的配置文件，并通过通俗易懂的方式讲解其主要配置项及其配置方法。此外，我们还将探讨一些高级配置和最佳实践，以帮助您在项目中更好地应用 ESLint，提升代码质量和开发效率。

ESLint 配置文件格式

ESLint 的配置文件可以是以下几种格式之一：

1. JavaScript (.eslintrc.js)
2. JSON (.eslintrc.json)
3. YAML (.eslintrc.yaml 或 .eslintrc.yml)
4. 配置文件名也可以是 package.json 中的 eslintConfig 字段

配置文件优先级

当 .eslintrc.js、.eslintrc.json、.eslintrc.yaml 或 .eslintrc.yml 以及 package.json 同时存在时，ESLint 会按照一定的优先级顺序加载配置文件。优先级顺序如下：

1. JavaScript 文件：.eslintrc.js
2. YAML 文件：.eslintrc.yaml 或 .eslintrc.yml
3. JSON 文件：.eslintrc.json
4. package.json 文件中的 eslintConfig 字段
   简而言之，ESLint 会首先查找 .eslintrc.js 文件，如果找到了就会使用它并忽略其他配置文件。如果没有找到 .eslintrc.js 文件，则会继续查找 .eslintrc.yaml 或 .eslintrc.yml 文件，以此类推。

配置文件的基本结构

这里我们主要以 .eslintrc.js 为例，其他格式的配置方法类似，只是语法不同。一个简易的 .eslintrc.js 配置文件可能是这样的：

module.exports = {"env": { /* 环境配置 / },
*  "extends": [ /* 继承的规则 / ],
*  "plugins": [ /* 插件列表 / ],
*  "rules": { /* 具体的规则配置 / },
*  "parserOptions": { /* 解析器选项 / },
*  "globals": { /* 全局变量 / },
*  "settings": { /* 特定插件的设置 */ }
};

具体配置项

1. env（环境配置）

env 配置指定你将在哪种环境中运行代码，比如浏览器、Node.js 或是其他环境。

module.exports = {env: {browser: true, // 浏览器环境node: true,    // Node.js 环境es6: true      // ES6 语法}
};

这样 ESLint 就知道你的代码可能会使用哪些全局变量或特性。

2. extends（继承的规则）

extends 用于继承已有的配置。这可以帮助你快速使用社区标准而不需要自己配置所有规则。

module.exports = {extends: ["eslint:recommended", // 官方推荐的 ESLint 规则"plugin:react/recommended" // React 插件推荐规则]
};

你可以继承多个配置，它们会依次覆盖。

3. plugins（插件列表）

plugins 配置额外的插件。插件可以提供额外的规则或配置选项。

module.exports = {plugins: ["react", // 使用 eslint-plugin-react"jsx-a11y" // 使用 eslint-plugin-jsx-a11y]
};

插件本身不会生效，必须在 rules 中启用相应的规则。

4. rules（规则配置）

rules 是 ESLint 的核心部分，用于指定具体的代码检查规则。

module.exports = {rules: {"no-console": "warn", // 禁止使用 console.log，警告提示"eqeqeq": ["error", "always"], // 要求使用 === 和 !==，错误提示"react/jsx-uses-react": "error", // 特定于 react 的规则"react/jsx-uses-vars": "error" // 确保 JSX 变量被正确使用}
};

规则通常有三种配置方式：“off”、“warn”、“error”，分别表示关闭、警告和错误。

5. parserOptions（解析器选项）

parserOptions 用于指定 JavaScript 语言选项，能使 ESLint 正确解析你的代码。

module.exports = {parserOptions: {ecmaVersion: 2020, // 支持 ES2020 语法sourceType: "module", // 使用 ES模块ecmaFeatures: {jsx: true // 启用 JSX 支持}}
};

6. globals（全局变量）

globals 用于声明项目中使用的全局变量，以避免 ESLint 报未定义变量的错误。

module.exports = {globals: {jQuery: "readonly", // jQuery 是只读全局变量process: "writable" // process 是可写全局变量}
};

7. settings（特定插件的设置）

settings 用于传递给特定插件的配置数据。这在使用某些插件时非常有用。

module.exports = {settings: {react: {version: "detect" // 自动检测 React 版本}}
};

8. overrides（覆盖配置）

overrides 允许你针对特定文件或目录设置不同的规则。这在大型项目或多语言项目中非常有用。

module.exports = {overrides: [{files: ["*.ts", "*.tsx"], // 针对 TypeScript 文件parser: "@typescript-eslint/parser", // 使用 TypeScript 解析器plugins: ["@typescript-eslint"],extends: ["plugin:@typescript-eslint/recommended" // 使用 TypeScript 推荐规则],rules: {"@typescript-eslint/no-unused-vars": "error" // TypeScript 专用规则}},{files: ["*.test.js"], // 针对测试文件env: {jest: true // 启用 Jest 全局变量}}]
};

通过 overrides，你可以根据文件类型、目录或任何符合条件的模式来应用不同的 ESLint 配置。

9. ignorePatterns（忽略文件）

ignorePatterns 允许你指定 ESLint 应忽略的文件或目录。这些文件将不会被 ESLint 检查。

module.exports = {ignorePatterns: ["node_modules/", "dist/", "build/"]
};

你也可以使用 .eslintignore 文件来指定忽略的文件或目录，类似于 .gitignore 的用法。

10. parser（指定解析器）

parser 选项允许你指定用于解析代码的解析器。默认的解析器是 espree，但你可以使用其他解析器，例如 @babel/eslint-parser 或 @typescript-eslint/parser。

module.exports = {parser: "@babel/eslint-parser",parserOptions: {babelOptions: {configFile: "./babel.config.json" // Babel 配置文件路径}}
};

11. root（根配置）

root 选项用于告诉 ESLint 当前配置文件是项目的根配置文件，防止 ESLint 在父目录中查找其他配置文件。对于多层目录结构的项目，这个选项非常有用。

module.exports = {root: true
};

12. noInlineConfig（禁止内联配置）

noInlineConfig 选项用于禁止在代码中使用内联配置（如 eslint-disable 注释），这可以确保所有的规则都必须在配置文件中定义。

module.exports = {noInlineConfig: true
};

使用技巧

1. 使用共享配置

在团队协作中，为了保持代码风格一致，可以使用共享配置包。例如 eslint-config-airbnb，只需安装并在 extends 中引用即可。

npm install eslint-config-airbnb --save-dev

然后在配置文件中：

module.exports = {extends: ["airbnb"]
};

2. 与 Prettier 集成

Prettier 是一个代码格式化工具，通常与 ESLint 一起使用以确保代码风格一致。可以使用 eslint-plugin-prettier 和 eslint-config-prettier 来集成两者。

npm install eslint-plugin-prettier eslint-config-prettier --save-dev

配置文件：

module.exports = {extends: ["eslint:recommended","plugin:prettier/recommended"],rules: {"prettier/prettier": "error"}
};

3. 使用自动修复

ESLint 提供了自动修复功能，可以通过命令行参数 --fix 自动修复一些简单的问题：

eslint . --fix

这样可以节省开发时间，并确保代码风格的一致性。

总结

通过本文的深入讲解，我们不仅了解了 ESLint 配置文件的基本结构和各个配置项，还探索了一些高级配置和实用技巧。希望这些内容能帮助你更好地使用 ESLint，提高代码质量和开发效率。