| ESlint 是什么
编码规范
每个程序员都有自己的编码习惯，最常见的莫过于：
有的人写代码一行代码结尾必须加分号
有的人觉得不加分号更好看；
有的人写代码一行代码不会超过 80 个字符，认为这样看起来简洁明了
有的人喜欢把所有逻辑都写在一行代码上，觉得别人看不懂的代码很牛逼
有的人使用变量必然会先定义 var a = 10
而粗心的人写变量可能没有定义过就直接使用 b = 10
如果你写自己的项目怎么折腾都没关系，但是在公司中老板希望每个人写出的代码都要符合一个统一的规则，这样别人看源码就能够看得懂，因为源码是符合统一的编码规范制定的。
那么问题来了，总不能每个人写的代码老板都要一行行代码去检查吧，这是一件很蠢的事情。凡是重复性的工作，都应该被制作成工具来节约成本。这个工具应该做两件事情：
- 提供自动检验代码的程序，并打印检验结果：
- 告诉你哪一个文件哪一行代码不符合哪一条编码规范，方便你去修改代码。。
Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 等等 ...........
我们可以形象地将 Lint 看成是电商行业，而电商行业具体表现有淘宝（Eslint）、京东（Jslint）等。
| EsLint配置文件
{
"env": { // 脚本运行环境
"browser": true,
"es2021": true,
"node": true
},
"extends": [ // 继承
"eslint:recommended", // ESlint默认配置
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser", // TypeScript解析器
"parserOptions": { // 版本解析配置
"ecmaVersion": "latest", // ES版本 指定使用的ES版本（latest最新）或 6/7/8 或2016/2017
"sourceType": "module" // 资源类型 设置为"script"(默认require/exports)或"module"( import/export)
},
"plugins": [
"@typescript-eslint"
],
"rules": { // 配置规则，开启或关闭某些功能，如不允许出现console或alter
"no-console":"off", // 不允许出现console
"semi":"off", // 是否要结尾分号(semicolon)
// 规则可以数组方式混合配置
"indent":["error", 4] // 要4个空格缩进
}
}
| env的配置
由于 ESLint 的各种规范中，一般都不允许使用未在页面内声明的成员
而开发中经常会用到 一些运行环境自带的 api，如：
浏览器中的 window/document 等
nodejs中的__dirname 等
jQuery中的$('xxx')等
所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了
1.配置文件配置
通过在 env 中设置xx:true的形式来开启某些特殊语法的不报错
比如想使用jQuery就需要配置jQuery环境，不然使用 jq语法$('xxx')就会报错
"env": {
"jquery": true
}
ESlint判断依据可以看看源码
node_modules/globals/globals.json
2.单个文件里开启某个特殊的 env
/* eslint-env jquery */
$('xxx')
| globals配置
假设有一个叫 jqueryy的库，有个变量叫GlobalParam,这时候 env 中没办法满足，
只能通过Globals(cn.eslint.org/docs/user-g…来设置。
理论上全局变量是不允许修改的，如果一定要修改，要启用 no-global-assign 规则来禁止对只读的全局变量进行修改。
1.单文件配置
在js文件中使用注释式配置后，ESlint不会报错
/* global GlobalParam */
console.log(GlobalParam)
"globals":{
"GlobalParam":"readonly" // 创建一个名为GlobalParam的只读变量
}
值可选项有
off // 关闭
readonly // 只读
writable // 可写
false // 只读
true // 可写
可以对某个变量进行关闭
如果 es6 中明确用不到 Promise，又要开启 GlobalParam，就可以用以下配置
{
"env": {
"es6": true
},
"globals": {
"GlobalParam": "false",
"Promise": "off"
}
}
| rule的配置
文档地址
配置规则，开启或关闭某些功能，如不允许出现console或alter
1.可以单值配置
"rule":{ "no-console":"off" // 写0也可 }
rule中的值配置
off or 0 - 关闭规则
warn or 1 - 将规则视为一个警告（不会影响退出码）
error or 2 - 将规则视为一个错误 (退出码为1)
2. 数组方式混合配置
具体的规则可以在规则页找到对应的规则点进去查看详情
{
"rules": { // 规则可以数组方式混合配置
"indent":["error", 4] // 要4个空格缩进,否则报错 }
}
}
| extends的配置
ESlint检查时用哪些规范？
配置extends可以决定ESLint检查时用哪个规范包。
-
内置规范 eslint-recommended/eslint-all
-
标准规范包eslint-config-standard
-
第三方规范 google/airbnb/facebook...
1.配置内部规范
内置包已经随ESlint一起下载了
"extends": "eslint:recommended"
2.配置标准规范包eslint-config-standard
需要下载使用，在ESlint初始化时选择下载或者选择第三方下载
可以省略eslint-config-,直接写standard
"extends": "standard" // eslint-config-standard
3.配置第三方包
详见配置标准规范包
extend和rule的关系
假设你extends了ESlint的内部规范
"extends": "eslint:recommended"
如果你在rule里配置了内部规范里已经存在的rule，那么就会覆盖继承过来的rule
即优先采用你自己配置的rule
实际中的工作应用则是如果你使用了其他标准包，对其中的一些规则有出入，那么你可以在rule中配置覆盖即可
| plugin的配置
- plugin插件主要是为eslint新增一些检查规则
- plugins要与rules结合使用
比如：eslint-plugin-react就会对react项目做了一些定制的eslint规则
1.安装 eslint-plugin-react
yarn add eslint-plugin-react --dev
2.加载插件
plugins: [ 'eslint-plugin-react' ],
rules: { 'eslint-plugin-react/jsx-boolean-value': 2 }
| Q&A
1.验证所有文件的写法
"eslint ./**/*.js" 或"eslint src" //
原因
使用了ESlint的默认推荐规则，之前的版本默认是开启代码中不能存在console
"extends": [
"eslint:recommended"
]
解决
在ESlint配置文件的rule里把no-console关掉即可
"rule":{"no-console":"off" // 写0也可}
注：22年了，ESlint不强制关闭console了
"rule": {
"prefer-const": "off", // 写0也可
"semi": "0" // 写0也可
}
4.项目中不同文件夹规则优先级
每个文件夹可以配置ESlint规则文件(.eslintrc)来实现不同文件夹实现不同规则。
优先级由内向外（由子目录到父目录），如果内部规则有，则采用内部，反之沿用外部的
5.配置ESlint的方式
对当前目录起作用
在文件目录((根目录))下创建文件
方式1- .eslintrc.json
方式2- .eslintrc.js
方式3- .eslintrc.yml
对全局起作用
在 package.json 中，类似scripts的写法
将.eslintrc文件中的内容copy 到eslintConfig中即可
对单文件起作用
假设你开启了不能出现console
在js文件内容中写，注释写法
/* eslint no-console:"off" */
const a = 'ESlint'
console.log(a)
| 参考
ESlint官方文档
dkvirus | Eslint 超简单入门教程
山地人 | 跟山地人学ESLint系列教程
黑马老邹 |【一听就懂】ESLint机制浅析-整体机制与规范包
Song | Eslint中plugins和extends的区别
