一、ESLint是什么
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：
ESLint 使用 Espree 解析 JavaScript。
ESLint 使用 AST 去分析代码中的模式
ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。
上面是来自ESLint官方的解释。其实ESLint就是一个代码检查工具，根据配置规则识别代码中的各种编码问题（命名是否规则，缩进是否正确等等）。
二、ESlint安装
Step1:
先决条件，NodeJS>=6.14，npm version3+
Step2:
npm install eslint --save-dev（本地安装）
npm install eslint --global（全局安装）。但是使用的任何插件或配置都必须安装在本地。
Step3:
eslint --init，初始化一个eslintrc.js文件。eslintrc.js文件是用于配置代码校验规则等。
三、ESLint使用
module.exports = {
//指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
//这些环境并不是互斥的，所以你可以同时定义多个。可用的环境包括：
"env": {
//浏览器环境中的全局变量。
"browser": true,
//Node.js 全局变量和 Node.js 作用域。
"node": true
//es2021全局变量
"es2021": true,
// CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
"commonjs": true,
//Node.js 和 Browser 通用全局变量。
"shared-node-browser": true,
//启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
"es6": true,
//Web Workers 全局变量。
"worker": true,
//将 require() 和 define() 定义为像 amd 一样的全局变量。
"amd": true,
//添加所有的 Mocha 测试全局变量。
"mocha": true,
//添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
"jasmine": true,
//Jest 全局变量。
"jest": true,
//PhantomJS 全局变量。
"phantomjs": true,
//Protractor 全局变量。
"protractor": true,
//QUnit 全局变量。
"qunit": true,
//jQuery 全局变量。
"jquery": true,
//Prototype.js 全局变量。
"prototypejs": true,
//ShellJS 全局变量。
"shelljs": true,
//Meteor 全局变量。
"meteor": true,
//MongoDB 全局变量。
"mongo": true,
//AppleScript 全局变量。
"applescript": true,
//Java 8 Nashorn 全局变量。
"nashorn": true,
//Service Worker 全局变量。
"serviceworker": true,
//Atom 测试全局变量。
"atomtest": true,
//Ember 测试全局变量。
"embertest": true,
//WebExtensions 全局变量。
"webextensions": true,
//GreaseMonkey 全局变量。
"greasemonkey": true,
},
//一个配置文件可以被基础配置中的已启用的规则继承。
//extends 属性值可以是：
//指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
//字符串数组：每个配置继承它前面的配置
//ESLint递归地扩展配置，因此基本配置也可以具有 extends 属性。extends 属性中的相对路径和可共享配置名从配置文件中出现的位置解析。
//rules 属性可以做下面的任何事情以扩展（或覆盖）规则：
//启用额外的规则
//改变继承的规则级别而不改变它的选项：
//基础配置："eqeqeq": ["error", "allow-null"]
//派生的配置："eqeqeq": "warn"
//最后生成的配置："eqeqeq": ["warn", "allow-null"]
//覆盖基础配置中的规则的选项
//基础配置："quotes": ["error", "single", "avoid-escape"]
//派生的配置："quotes": ["error", "single"]
//最后生成的配置："quotes": ["error", "single"]
"extends": [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
],
//解析器配置
"parser": "@typescript-eslint/parser",
//解析器选项配置
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
//ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。
//在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。
//插件名称可以省略 eslint-plugin前缀。
"plugins": [
"vue",
"@typescript-eslint"
],
//插件可以提供处理器。处理器可以从另一种文件中提取 JavaScript 代码，然后让 ESLint
//检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。
//若要在配置文件中指定处理器，请使用 processor 键，并使用由插件名和处理器名组成的串接字符串加上斜杠。
//例如，下面的选项启用插件 a-plugin 提供的处理器 a-processor
"processor": "a-plugin/a-processor",
//要为特定类型的文件指定处理器，请使用 overrides 键和 processor 键的组合。
//例如，下面对 *.md 文件使用处理器 a-plugin/markdown。
"overrides": [
{
"files": ["*.md"],
"processor": "a-plugin/markdown"
},
{
//处理器可以生成命名的代码块，如 0.js 和 1.js。ESLint 将这样的命名代码块作为原始文件的子文件处理。
//你可以在配置的 overrides 部分为已命名的代码块指定附加配置。例如，下面的命令对以 .js
//结尾的 markdown 文件中的已命名代码块禁用 strict 规则。
"files": ["**/*.md/*.js"],
"rules": {
"strict": "off"
}
}
],
//启用的规则及其各自的错误级别
"rules": {
},
//当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。
//如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，
//这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
"globals":{
"var1": "writable",
"var2": "readonly"
}
}
3.1、ESLint配置
ESLint完全可配，可以关闭每个规则，只做基本语法层面校验。对ESLint的配置方式有三种：
- Configuration Comments:使用JavaScript注释在编码文件中直接配置。
- Configuration Files：使用js、json、ymal作为配置文件进行配置。你可以在每个目录下都做配置，配置文件生效范围为当前目录下的文件。也可以在package.json文件中的eslintConfig中进行配置。ESLint只会在无法找到其他配置文件使用时，才会使用它。
3.2、解析器及解析器选项配置
解析器和解析器选项可以在parser和parserOptions 中进行配置。
ESLint模式使用Espree作为默认解析器。我们可以在配置中自定义解析器。但是需要满足如下要求：
- 必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。
- 它必须符合 parser interface。
3.3、处理器配置
可以在配置中使用processor来指定处理器，使用插件名和处理器名组成的串接字符串加上斜杠。例如：
{"plugins":["pluginName"], "processor":"pluginName/processorName"}
3.4、环境变量配置
参照以上代码块
3.5、配置全局变量
当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。参照如上代码。
3.6、配置规则
ESLint 附带有大量的规则。可以使用注释或配置文件修改项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
详情参照ESLint官方文档：https://eslint.bootcss.com/docs/user-guide/configuring