Eslint 配置详解
eslint
eslint默认没有规则，需要手动配置.eslintrc.*中添加规则。
// .eslintrc.js
module.exports = {}
root
默认情况下，
ESLint会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将ESLint限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.*文件里的eslint Config字段下设置"root": true。ESLint一旦发现配置文件中有"root": true，它就会停止在父级目录中寻找。
module.exports = {
root: true,
}
项目级与目录级的配置
一般来说，对于一个项目，如果在多层目录中，需要使用不同的
ESLint规则时，如下方的例子:src/eslintrc.js目录级的配置，对于src目录下的内容来说，它的权限会高于根目录下的项目级配置，但是ESLint也会合并根目录下的配置。如果我们在src/eslintrc.js添加root: true，那么ESLint就会认为src目录为根目录，不再向上查找配置。
project
--src
----eslintrc.js
--eslintrc.js
parser 与 parserOptions
解析器（parser）
配置解析项目的规则。
/*
默认： esprima
@typescript-eslint/parser - ts 解析器
@babel/eslint-parser - babel 解析器
*/
module.exports = {
parser: '@typescript-eslint/parser',
}
解析器选项（parserOptions）
搭配
parser，指定你想要支持的 JavaScript 语言选项。
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 6, // 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
sourceType: "module", // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
ecmaFeatures: { // 配置你想使用的额外的语言特性
globalReturn: false, // 允许在全局作用域下使用 return 语句
jsx: true, // 启用 jsx
impliedStrict: false, // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
experimentalObjectRestSpread: false // 启用实验性的 object rest/spread properties 支持
}
},
}
设置环境 （env）
设置您的脚本在哪种环境中运行。每个环境都会带来一组特定的预定义全局变量。可以简单理解为批量设置全局变量，这些环境不是互斥的，因此您一次可以定义多个环境。
module.exports = {
env: {
// 常用
browser: true, // 浏览器全局变量
node: true, // Node.js 全局变量和 Node.js 作用域
commonjs: true, // CommonJS 全局变量和 CommonJS 作用域 (启用此环境用于使用 Browserify/WebPack 的 browser-only 代码)
shared-node-browser: true, // Node.js 和 Browser 通用的全局变量
es6: true, // 启用除 modules 以外的所有 ECMAScript 6 特性 (这会自动将 `ecmaVersion` 解析器选项设置为 6)
es2017: true, // 添加所有 ECMAScript 2017 的全局变量并且自动设置 `ecmaVersion` 解析器选项设置为 8
es2020: true, // 添加所有 ECMAScript 2020 的全局变量并且自动设置 `ecmaVersion` 解析器选项设置为 11
es2021: true, // 添加所有 ECMAScript 2021 的全局变量并且自动设置 `ecmaVersion` 解析器选项设置为 12
worker: true, // web workers 全局变量
// 不常用
amd: true, // 根据 amd 规范定义 `require()` 和 `define()` 作为全局变量
mocha: true, // 添加所有 Mocha 测试全局变量
jasmine: true, // 为版本 1.3 和 2.0 添加所有 Jasmine 测试全局变量
jest: true, // Jest 全局变量
phantomjs: true, // PhantomJS 全局变量
protractor: true, // Protractor 全局变量
qunit: true, // QUnit 全局变量
jquery: true, // jQuery 全局变量
greasemonkey: true, // GreaseMonkey 全局变量
prototypejs: true, // Prototype.js 全局变量
shelljs: true, // ShellJS 全局变量
meteor: true, // Meteor 全局变量
mongo: true, // MongoDB 全局变量
applescript: true, // AppleScript 全局变量
nashorn: true, // Java 8 Nashorn 全局变量
serviceworker: true, // Service Worker 全局变量
atomtest: true, // Atom 测试助手全局变量
embertest: true, // Ember 测试助手全局变量
webextensions: true, // WebExtensions 全局变量
}
}
全局变量（globals）
当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。
readonly: 可读不可写writable: 可读可写
module.exports = {
globals: {
// 自己定义的全局变量
logger: "readonly",
},
};
规则（rules）
如果不配置规则，则
eslint也不会生效。
off或0- 关闭规则；warn或1- 开启规则，使用警告级别的错误：warn (不会导致程序退出)；error或2- 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)。
module.exports = {
rules: {
// 需要添加封号
"semi": 2,
// 保存代码时缩进2个空格
"indent": ['error', 2],
},
};
插件（plugins）& 继承（extends）
这两者要放在一起来看，除了在当前项目自己配置一系列的规则，还可以使用社区比较成熟的方法，这样就不用在自己的项目中去配置一堆内容，同时还可以根据团队的习惯，对某些规则进行改写。
plugins
plugin 插件主要是为 eslint 新增一些检查规则，举个例子：eslint-plugin-react 就会对 react 项目做了一些定制的eslint 规则， eslint-plugin-react-hooks 就是针对 react/hooks 的定制的一系列规则。
简单的说，此时只是让 eslint 能够识别这些规则，但是这些规则还没有加到项目中，此时就需要我们就可以手动的在 rules 添加要使用的规则，如：
//.eslintrc.js
module.exports = {
plugins: [
'eslint-plugin-react'
],
rules: {
'eslint-plugin-react/jsx-boolean-value': 2
}
}
extends:
其实没个项目的配置，基本上都是大同小异的，没必要没启动一个新项目，就重新配置一份。estends的作用，就是继承社区整理好的配置规则，如：eslint-plugin-react为了方便其他人使用，它默认实现了两种最佳实践all以及recommened，这样我们就可以直接使用它配置好的规则。
//.eslintrc.js
module.export = {
plugins: [
'eslint-plugin-react'
],
extends: [
'eslint-plugin-react/recommended'
],
rules: {
// 也可以在当前项目中修改继承的一些配置项
'eslint-plugin-react/jsx-boolean-value': 2
}
}