ESLint简介
作为前端，大家对ESLint 一定不陌生！它可以帮我们强制约束代码风格、检测代码中的语法错误、可以识别代码中的潜在问题甚至提供了一些自动修复功能。
但要注意，在前端中，ESLint 有两个工具：
一个是 模块包 ，一个是 VSCode的扩展工具 。
ESLint 模块包
安装方式：
通过 npm 或 yarn 直接进行 全局 或 项目安装
npm i eslint -D
通过 vue 脚手架 创建项目时 选择安装 eslint 模块包 vue create 创建项目过程中选择 lint
模块包安装在项目里，当启动项目时，会根据配置情况在浏览器控制台显示错误。
VS中ESLint扩展工具
安装方式：通过 vscode 搜索安装
此插件会根据当前项目的配置（配置不能使用console.log），实时将错误显示在编译器里
ESLint配置详解
eslint 本身是一个js语法规范检查的包，可以使用官方推荐的推荐的检查规则，也可以使用自定义的规则。
手动下载生成配置
原有项目第一次引入eslint时，可以使用该方法生成配置文件。使用vue脚手架的方式建立项目多半是不用这种方式的，因为脚手架内会帮我们把eslint配置好。
创建项目
创建一个测试文件夹：eslint_test
初始化项目：npm init -y (创建 package.json)
ESLint安装
在项目中安装eslint包
npm i eslint -D
注意安装结果：node_moduels 中下载了很多包
.bin/eslint.cmd 脚本文件，内部通过 nodejs 执行 eslint运行包 的代码
@eslint包 用来规范 eslint配置文件
eslint开头的包 是 eslint运行包，包含eslint代码
生成ESLint配置文件
ESLint 可以创建独立的配置文件 .eslintrc.js，也可以 直接在 package.json 中配置
vue-cli安装eslint默认将配置写在package.json文件中
使用内置脚本实现配置文件的生成：
执行 node_modules/.bin 文件夹里的 eslint脚本 来创建配置文件
包含完整脚本路径的命令： ./node_modules/.bin/eslint --init
也可以用 npx 来执行 (推荐) ：
npx eslint --init
npx是随node一起安装的，能去 .bin 目录 里找 目标脚本文件，简化执行脚本的语法
创建配置文件过程中，需要选择配置：
执行完毕后，会自动生成了配置文件 .eslintrc.js
观察package.json，会发现此过程下载了若干相关规范包
主要是下载了 standard 语法规范包，而它需要 用到 import、node、promise 插件包
使用ESLint检查js语法
npx eslint ./需要检查语法的文件路径
如果违法规范，会将错误提示到 终端，说明 eslint 工作正常
ESLint配置解析
ESlint 被设计为完全可配置的，我们可以关闭每一个规则而只运行基本语法验证。有两种主要的方式来配置 ESLint：
注释法（不推荐）： 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。
配置文件： 使用 JavaScript、JSON 或者 YAML 文件为整个目录和它的子目录指定配置信息，或者直接在 package.json 文件里的 eslintConfig 字段指定配置。
JavaScript配置的方式优先级最高
一个标准的eslint配置文件格式大致如下：
eslint检测规则
ESLint 检测配置文件步骤：
在要检测的文件同一目录里寻找 .eslintrc.* 和 package.json；
紧接着在父级目录里寻找，一直到文件系统的根目录；
如果在前两步发现有 root：true 的配置，停止在父级目录中寻找 .eslintrc；
如果以上步骤都没有找到，则回退到用户主目录 ~/.eslintrc 中自定义的默认配置；
通常我们都习惯把 ESLint 配置文件放到项目根目录，因此可以为了避免 ESLint 校验的时候往父级目录查找配置文件，所以需要在配置文件中加上
root: true
env节点
在ESLint 的各种规范中，一般都不允许使用未在页面内声明的成员，即使是一些运行环境自带的 api，如：
浏览器中的 window/document 等
nodejs中的 __dirname 等
es2021中的 WeakRef 等
所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了
env: {
//使用浏览器的内置变量，如window，
browser: true,
//使用node的内置变量，如__dirname
commonjs: true,
es2021: true
},
可用的环境包括：
一个环境定义了一组预定义的全局变量。可用的环境包括：
browser - 浏览器环境中的全局变量。
node - Node.js 全局变量和 Node.js 作用域。
commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
shared-node-browser - Node.js 和 Browser 通用全局变量。
es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
worker - Web Workers 全局变量。
amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
mocha - 添加所有的 Mocha 测试全局变量。
jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
jest - Jest 全局变量。
phantomjs - PhantomJS 全局变量。
protractor - Protractor 全局变量。
qunit - QUnit 全局变量。
jquery - jQuery 全局变量。
prototypejs - Prototype.js 全局变量。
shelljs - ShellJS 全局变量。
meteor - Meteor 全局变量。
mongo - MongoDB 全局变量。
applescript - AppleScript 全局变量。
nashorn - Java 8 Nashorn 全局变量。
serviceworker - Service Worker 全局变量。
atomtest - Atom 测试全局变量。
embertest - Ember 测试全局变量。
webextensions - WebExtensions 全局变量。
greasemonkey - GreaseMonkey 全局变量。
globals节点
当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如，在jquery项目中，直接使用“$”就会报错。
因此，我们可以在ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。
配置文件中：
//自定义全局变量
globals:{
//自定义全局变量$,既可读又可改
"$":true
},
可选参数
| 参数名 | 释义 | 示例 |
|---|---|---|
| writable | 允许重写变量 | "var1": "writable", |
| readonly | 不允许重写变量 | "var2": "readonly" |
可以使用字符串 "off" 禁用全局变量。
{
"env": {
"es6": true
},
"globals": {
"Promise": "off"
}
}
由于历史原因，布尔值 false 和字符串值 "readable" 等价于 "readonly"。类似地，布尔值 true 和字符串值 "writeable" 等价于 "writable"。但是，不建议使用旧值。
Parser节点
ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：
它必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。
它必须符合 parser interface。
为了表明使用该 npm 模块作为你的解析器，你需要在你的 .eslintrc 文件里指定 parser 选项。
{
"parser": "esprima",
"rules": {
"semi": "error"
}
}
parserOptions 节点
注：此项配置是基于Parser节点的！不同的解析器，配置项可能不同！参考： vue-eslint-parser
ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。
对于 ES6 语法，可以在配置文件内增加如下配置
{
"parserOptions": {
"ecmaVersion": 6,
},
}
.eslintrc.js 文件示例：
{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"semi": "error"
}
}
ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:
globalReturn - 允许在全局作用域下使用 return 语句
impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
jsx - 启用 JSX
Processor节点
插件可以提供处理器，这意味着Processor都是调用插件中的内置处理器。
处理器可以预处理代码： 比如过滤掉一些不需要检测的js代码，然后交给rules去检验
若使用 processor 键，并使用由插件名和处理器名组成的串接字符串加上斜杠。例如，下面的选项启用插件 a-plugin 提供的处理器 a-processor：
{
"plugins": ["a-plugin"],
"processor": "a-plugin/a-processor"
}
注：
这里的Processor和插件中的Processor是不一样的！
这里的Processor是指定调用哪个插件中的Processor，如果不指定插件，这句配置将失去意义！
插件中的Processor告诉 ESLint 如何处理 JavaScript 之外的文件。
要为特定类型的文件指定处理器，请使用 overrides 键和 processor 键的组合。例如，下面对 *.md 文件使用处理器 a-plugin/markdown。
{
"plugins": ["a-plugin"],
"overrides": [
{
"files": ["*.md"],
"processor": "a-plugin/markdown"
}
]
}
处理器可以生成命名的代码块，如 0.js 和 1.js。ESLint 将这样的命名代码块作为原始文件的子文件处理。你可以在配置的 overrides 部分为已命名的代码块指定附加配置。例如，下面的命令对以 .js 结尾的 markdown 文件中的已命名代码块禁用 strict 规则。
{
"plugins": ["a-plugin"],
"overrides": [
{
"files": ["*.md"],
"processor": "a-plugin/markdown"
},
{
"files": ["**/*.md/*.js"],
"rules": {
"strict": "off"
}
}
]
}
extends 节点
简介：
ESLint 检查时用哪些规范呢？通过这个节点可以配置使用 内置规范 还是 第三方规范。如使用第三方下载的 eslint-config-standard 规范
// 扩展规则，使用第三方npm包 extends: 'standard',
extends 属性值可以是：
指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
字符串数组：每个配置继承它前面的配置
extends 内置的规范有：
| 内置规范 | |
|---|---|
| eslint:recommended | 值为 "eslint:recommended" 的 extends 属性启用一系列核心规则，核心规则参考eslint.bootcss.com/docs/rules/页面内的所有绿色对钩标记。 |
| eslint:all | 包含规则页面的所有规则 |
如何配置：
实际项目中配置规则的时候，不可能团队一条一条的去商议配置，太费精力了。通常的做法是使用业内大家普通使用的、遵循的编码规范；然后通过 extends 去引入这些规范。
extends 属性值可以是：
指定配置的字符串(配置文件的路径、可共享配置的名称、eslint:recommended 或 eslint:all)
字符串数组：每个配置继承它前面的配置
{
extends: [
'eslint:recommended',
'plugin:vue/essential',
'eslint-config-standard', // 可以缩写成 'standard'
'@vue/prettier',
'./node_modules/coding-standard/.eslintrc-es6'
]
}
从上面的配置，可以知道 extends 支持的配置类型可以是以下几种
eslint 开头的：是 ESLint 官方的扩展；
plugin 开头的：是插件类型扩展，比如 plugin:vue/essential；
eslint-config 开头的：来自 npm 包，使用时可以省略前缀 eslint-config-，比如上面的可以直接写成 standard；
@开头的：扩展和 eslint-config 一样，只是在 npm 包上面加了一层作用域 scope；
一个执行配置文件的相对路径或绝对路径；
那有哪些常用的、比较著名扩展可以被 extends 引入呢
eslint:recommended：ESLint 内置的推荐规则，即 ESLint Rules 列表中打了钩的那些规则；
eslint:all：ESLint 内置的所有规则；
eslint-config-standard：standard 的 JS 规范；
eslint-config-prettier：关闭和 ESLint 中以及其他扩展中有冲突的规则；
eslint-config-airbnb-base：airbab 的 JS 规范；
eslint-config-alloy：腾讯 AlloyTeam 前端团队出品，可以很好的针对你项目的技术栈进行配置选择，比如可以选 React、Vue（现已支持 Vue 3.0）、TypeScript 等；
Plugins节点
有的时候，内置的规则不能满足我们的要求，比如，对于vue文件，显然缺少对应的规则。这个时候，我们就可以使用插件来拓展规则了。
插件 是一个 npm 包，通常输出规则。一些插件也可以输出一个或多个命名的 配置。要确保这个包安装在 ESLint 能请求到的目录下。
注意： 插件是相对于 ESLint 进程的当前工作目录解析的。换句话说，ESLint 将加载与用户通过从项目 Node 交互解释器运行 ('eslint-plugin-pluginname') 获得的相同的插件。
如何配置插件
ESLint 相关的插件的命名形式有 2 种：不带命名空间的和带命名空间的，比如：
eslint-plugin- 开头的可以省略这部分前缀；
@开头的；
{
plugins: [
'jquery', // 是指 eslint-plugin-jquery
'@jquery/jquery', // 是指 @jquery/eslint-plugin-jquery
'@foobar', // 是指 @foobar/eslint-plugin
]
}
当需要基于插件进行 rules 的配置的时候，需要加上插件的引用，比如：
{
plugins: [
'jquery', // eslint-plugin-jquery
'@foo/foo', // @foo/eslint-plugin-foo
'@bar, // @bar/eslint-plugin
],
rules: {
'jquery/a-rule': 'error',
'@foo/foo/some-rule': 'error',
'@bar/another-rule': 'error'
},
}
rules 节点
使用内置规则
两个用法：
不使用 extend 节点 配置 整套的规范，而是在 rules节点中直接配置
使用 extend 节点 配置 整套的规范，在 rules节点中修改部分规范的配置 eg
{
"rules": {
"eqeqeq": "off",
"curly": "error",
"quotes": ["error", "double"]
}
}
"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
使用插件规则
我们也可以使用插件中的规则，你必须使用 插件名/规则ID 的形式。比如：
{
"plugins": [
"vue"
],
"rules": {
"vue/rule1": "error"
}
}
注意： 当指定来自插件的规则时，确保删除 eslint-plugin- 前缀。ESLint 在内部只使用没有前缀的名称去定位规则。
