配置文件
有四种方式来添加配置信息：
- 在源代码中添加配置信息的注释
- 在命令行中通过参数来添加配置信息
- 在 package.json 文件中的 eslintConfig 字段添加配置信息
- 创建单独的配置文件(推荐)
配置文件的格式：
- JavaScript - 使用 .eslintrc.js 然后输出一个配置对象
- YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构
- JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释
- (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML
- package.json - 在 package.json 里创建一个 eslintConfig 属性，在那里定义你的配置
配置文件的查找顺序：
当使用配置文件或 package.json 配置 ESLint 的时候，会一层层地叠加使用配置文件。ESLint 将自动在待检测的代码所在的目录里寻找它们，紧接着是父级目录，一直到文件系统的根目录（除非指定 root: true）。ESLint 会将找到的所有配置文件的配置信息合并使用。推荐在项目根目录中的配置文件中设置 "root": true，表明找到该配置文件之后，就不要再继续向上级目录查找配置文件了。通过这种方式，你可以有项目级 ESLint 设置，也有覆盖特定目录的 ESLint 设置。
忽略文件
当 ESLint 作用于一个目录时，支持使用 .eslintignore 文件来列出一些不需要被 ESLint 检测的文件。.eslintignore 文件是个纯文本文件，可以放在待检测目录的任何父级目录，它将影响到 .eslintignore 文件所在的目录和所有子目录。
与配置文件不同，.eslintignore 文件不会被叠加查找，ESLint 在找到一个 .eslintignore 文件时候就会停止查找上级目录，因此推荐在项目根目录中创建 .eslintignore 文件。
ESLint 会自动忽略 .eslintignore 文件所在目录中的 node_modules 目录和 bower_components 里面的所有代码的检测。把下面 .eslintignore 文件放到项目根目录里，将忽略项目根目录下的 node_modules，bower_components 以及 build/ 目录下除了 build/index.js 的所有文件。
其实不管是否创建 .eslintignore 文件，都会忽略执行 eslint 命令所在目录的 node_modules 目录和 bower_components 里面的所有代码的检测。
# 忽略 build 目录下的除了 index.js 之外的所有文件的代码检测
build/*
!build/index.js
parser
指定 js 语法解析器，默认使用 espree 解析器。下面的配置指定了 esprima 作为解析器：
{
"parser": "esprima"
}
parserOptions
指定 js 语法解析选项
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}
ecmaVersion
指定待检测的代码中语法所使用的 ECMAScript 版本。
-
"ecmaVersion": 5默认值，使用 ECMAScript 5 -
"ecmaVersion": 6使用 ECMAScript 6 -
"ecmaVersion": 2017使用 ECMAScript 2017 -
"ecmaVersion": "latest"使用 ECMAScript 最新版本
通过设置 "ecmaVersion": 6 只是告诉 ESLint 待检测的代码中使用了 ES6 的语法，并没有告诉 ESLint 待检测的代码中使用了 ES6 的 API（例如 Set Map Promise 等 ES6 新添加的全局对象以及全局对象的属性、实例对象的原型属性）。通过 "env": { "es6": true } 选项可以告诉 ESLint 代码中使用了 ES6 的 API。
设置 "env": { "es6": true }，会自动开启 "ecmaVersion": 6，但是设置 "ecmaVersion": 6 不会自动开启 "env": { "es6": true }。
sourceType
指定待检测的代码是如何使用的，是作为 <script> 脚本加载的，还是作为 ES6 模块使用的。
-
"sourceType": "script"默认值，作为 <script> 脚本 -
"sourceType": "module"作为 ES6 模块
ecmaFeatures
指定你想使用的额外的语言特性，并不常用。
env
指定待检测的代码的应用环境，每个环境定义了一组预定义的全局变量，常用的环境包括：
- browser 浏览器环境中的全局变量
- node Node.js 全局变量和 Node.js 作用域
- commonjs CommonJS 全局变量和 CommonJS 作用域
- es6 启用除了 modules 以外的所有 ECMAScript 6 API
- jquery jQuery 全局变量
这些环境并不是互斥的，所以你可以同时定义多个。通过以下配置指定了待检测的代码将要运行的环境是浏览器环境和 Node.js 环境，因此当代码中使用了浏览器或 Node.js 的全局变量的时候，不会报错。
{
"env": {
"browser": true,
"node": true
}
}
设置 "env": { "es6": true }，会自动开启 "parserOptions": { "ecmaVersion": 6 }，也就是说如果待检测的代码中使用了 ES6 的语法和 API，则只需要设置 "env": { "es6": true } 就可以了。
module.exports = {
"parserOptions": {
"sourceType": "module",
// 以下这行可以不设置
// "ecmaVersion": 6
},
"env": {
// 告诉 ESLint 待检测的代码同时使用了 ES6 的语法和 API
"es6": true
}
}
经过测试发现，即使不设置 env: { es6: true }，代码里面使用 ES6 的 API，也不会提示错误。
globals
指定待检测的代码中可以使用的全局变量。当代码中使用未定义的变量时会报错，如果你想在待检测的代码里使用全局变量，需要通过 globals 设置。
{
"globals": {
"var1": "writable",
"var2": "readonly",
"Promise": "off"
}
}
在待检测的代码中可以使用 var1 以及 var2 变量，不会被警告。var1 可读写，var2 只读。
在待检测的代码中禁用 Promise 全局变量，如果使用 Promise 会报错。
plugins
ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。
通过 plugins 指定使用的插件列表，插件名称可以省略 eslint-plugin- 前缀
{
"plugins": [
"plugin1",
"eslint-plugin-plugin2"
]
}
processor (不常用)
插件可以提供处理器。处理器可以从另一种文件中提取 JavaScript 代码，然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。
通过 processor 指定处理器，格式为 插件名/处理器名
{
"plugins": ["a-plugin"],
"processor": "a-plugin/a-processor"
}
rules
通过设置一条条的规则，指定了代码应该遵守的书写风格，即代码规范。
ESLint 检测包括两个方面：
- 语法检测：检测代码中的语法是否符合 parserOptions 选项设置的语法。
- 规则检测：检测代码中的书写风格是否遵循 rules 设置的规范。如果没有指定 rules 选项，则 ESLint 只对代码进行语法检测。
一个规则可以设置为下列值之一：
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
如果一个规则有额外的选项，你可以使用数组字面量指定它们：
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
通过注释禁止规则检测
在代码中可以通过注释来禁止/开启对配置文件中设置的规则进行检测。不管禁不禁止规则检测，语法检测都会进行。
禁止一行代码的规则检测
/* eslint-disable-next-line */
alert('foo')
禁止一块代码的规则检测
/* eslint-disable */
alert('foo');
/* eslint-enable */
禁止整个文件范围的规则检测
/* eslint-disable */
alert('foo');
禁止具体某个规则的检测
/* eslint-disable no-alert */
alert('foo');
禁止具体多个规则的检测
/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');
通过 overrides 禁止一组文件的某个规则检测
通过 overrides.files 指定一组文件，关闭这组文件的 no-unused-expressions 规则检测。
{
"rules": {},
"overrides": [
{
"files": ["*-test.js", "*.spec.js"],
"rules": {
"no-unused-expressions": "off"
}
}
]
}
extends
我们的配置文件可以从其他地方继承一些配置信息，然后在本配置文件里修改继承的配置信息。
extends 继承的配置信息的来源可以是以下几个方面：
- eslint:all
- eslint:recommended
- 从配置文件继承配置信息
- 从共享的配置包继承配置信息
- 从插件继承配置信息
extends 的值可以是字符串，表明从单个来源继承配置信息，以下配置文件只能选择其中一条 extends
const path = require('path')
module.exports = {
// 启用所有的配置规则选项
"extends": "eslint:all",
// 启用推荐的配置规则选项
"extends": "eslint:recommended",
// 通过相对路径继承某个配置文件
"extends": "./config/eslintrc.base.js",
// 通过绝对路径继承某个配置文件
"extends": path.resolve(__dirname, 'config/eslintrc.base.js'),
// 通过模块路径继承某个共享的配置包导出的配置
"extends": "eslint-config-airbnb",
// 通过 plugins: 开头的模块路径继承某个插件导出的某个配置
"extends": "plugin:react/recommended"
}
extends 的值可以是数组，表明从多个来源继承配置信息，后面的配置继承它前面的配置
const path = require('path')
module.exports = {
extends: [
"extends": "eslint:recommended",
"extends": "plugin:react/recommended"
]
}
extends 配合 rules 来修改继承的配置。
module.exports = {
"extends": "eslint:recommended",
"rules": {
// 增加四条 eslint:recommended 里面没有的规则
"indent": ["error", 4],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"],
// 覆盖从 eslint:recommended 继承的 comma-dangle 和 no-cond-assign 规则的默认选项
"comma-dangle": ["error", "always"],
"no-cond-assign": ["error", "always"],
// 删除从 eslint:recommended 继承的 no-console 规则
"no-console": "off",
}
}
以上配置文件在继承的 eslint:recommended 配置规则的基础上，通过 rules 来对继承的规则进行调整：例如增加规则、修改规则、删除规则。
eslint:all
启用当前安装的 ESLint 中所有的核心规则，不推荐。每个 ESLint 小版本更新的时候，都有可能导致某个规则发生了变化。如果我们的代码是按照 ESLint 版本更新之前的规则书写的，那么即使以前不会报错的代码，现在用新的规则检测的时候有可能会报错。
{
"extends": "eslint:all"
}
eslint:recommended
启动 ESLint 推荐的的 rule 配置，位于 规则页面 中被标记为✔️ 的 rule 将会启动。只有在 ESLint 主要版本进行更新的时候，这个规则子集才会更新。因此只要我们不更新 ESLint 的主版本，那么以前能够通过验证的代码，现在也能通过验证。
{
"extends": "eslint:recommended"
}
从配置文件继承配置信息
extends 指向一个配置文件，从该配置文件继承配置信息。配置文件的路径可以使绝对路径，也可以是相对路径。
{
"extends": "./config/eslintrc.base.js"
}
从配置包继承配置信息
配置包是一个 npm 包，它输出一个配置对象。例如 eslint-config-airbnb 包就是一个配置包，它是 airbnb 公司的代码规范。extends 后面跟着模块路径就可以继承该配置包的配置信息。
npm i -D eslint-config-airbnb
{
"extends": "eslint-config-airbnb"
}
推荐的配置包
eslint-config-standard
eslint-config-airbnb
2022 年 4 月份，使用 eslint-config-standard 则推荐 eslint@7 不要安装 eslint@8，而且还需要安装几个 npm 包：
2022 年 6 月份，使用最新版本的 eslint-config-standard 安装 eslint@8 即可，而且还需要安装几个 npm 包：
"devDependencies": {
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0"
}
从插件继承配置信息
插件是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的配置。
extends 属性值可以由以下组成：plugin:插件名(没有前缀)/配置名：
npm i -D eslint-plugin-react
{
"plugins": [
"eslint-plugin-react"
],
"extends": "plugin:react/recommended"
}
overrides
对指定的文件应用定制的配置信息。大部分可以在配置文件中的配置项都可以在 overrides 里面进行配置，除了 root: true 配置项。
{
"rules": {
"quotes": ["error", "double"]
},
"overrides": [
{
"files": ["bin/*.js", "lib/*.js"],
"excludedFiles": "*.test.js",
"rules": {
"quotes": ["error", "single"]
}
}
]
}
以上配置文件对普通的待测文件指定了 "quotes": ["error", "double"] 这条规则，也就是字符串必须使用双引号，而不能使用单引号，否则报错。而对于 bin 目录和 lib 目录中的不以 .test.js 结尾的其他文件，应用 "quotes": ["error", "single"] 这条规则，也就是字符串必须使用单引号而不是双引号，否则报错。
说白了，overrides 通过指定一些待测文件，然后为这些文件定制一些配置信息来覆盖普遍的配置信息。
