eslint知识分享
1.认识ESLint
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：
- ESLint 使用 Espree 解析 JavaScript。
- ESLint 使用 AST 去分析代码中的模式
- ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。
2.为什么要使用ESLint
下面一起来思考一个问题：Lint 工具对工程师来说到底是代码质量的保证还是一种束缚？
然后，我们再看看 ESLint 官网的简介：
代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中
我的理解是JS作为一门动态语言，因为缺少编译过程，有些本可以在编译过程中发现的错误，只能等到运行才发现，这给我们调试工作增加了一些负担，而 Lint 工具相当于为语言增加了编译过程，在代码运行前进行静态分析找到出错的地方。
代码千万行，安全第一行；前端不规范，同事两行泪
- 避免低级bug，找出可能发生的语法错误。使用未声明变量、修改 const 变量……
- 提示删除多余的代码。声明而未使用的变量、重复的 case ……
- 确保代码遵循最佳实践。可参考 airbnb style、javascript standard
- 统一团队的代码风格。
3 ESLint安装及使用
简单安装配置即使用
1、先初始化项目：npm init -y //初始化 package.json,若已有则不需要执行
2、npm i -D eslint //项目安装eslint包
3、npx eslint --init //进行eslint的代码检查规范配置，即生成配置文件
4、npx eslint ./需要检查语法的文件路径 //对应文件代码规范检查,命令行输出对应不规范内容
5、npx eslint ./需要检查语法的文件路径 --fix //对应文件代码修复,命令行输出不能自动修复的不规范内容
3.1 ESLint安装
-
安装eslint包 以npm为例,推荐项目安装方式
npm i eslint -D(推荐)npm i eslint -g当然你也可以在创建vue脚手架时选中有eslint的选项进行安装
-
注意安装结果：node_moduels 中下载了很多包
- .bin/eslint.cmd 脚本文件，内部通过 nodejs 执行 eslint运行包 的代码，即方便使用命令行进行eslint检查和修复
- @eslint包 用来规范 eslint配置文件
- eslint开头的包 是 eslint运行包，包含eslint代码
3.2 生成ESLint配置文件
ESLint 可以创建独立的配置文件 .eslintrc.js，也可以 直接在 package.json 中配置
-
执行
node_modules/.bin文件夹里的 eslint脚本 来创建配置文件-
包含完整脚本路径的命令：
./node_modules/.bin/eslint --init -
也可以用 npx 来执行 (推荐)：
npx eslint --init（npx是随node一起安装的，能去 .bin 目录 里找 目标脚本文件，简化执行脚本的语法）
-
eslint全局安装则直接可以用该命令：
eslint --init
-
-
创建配置文件过程中，需要选择配置：
执行结果：
- 创建了 配置文件
.eslintrc.js
3.3 ESLint的执行
eslint检测：
- 命令：
npx eslint ./需要检查语法的文件路径（全局安装eslint则可以直接使用eslint ./需要检查语法的文件路径） - 如果违法规范，会将错误或者警告提示到 终端，说明 eslint 工作正常
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nBVF1iqw-1647849438495)(./image/3.3-1.png)]
eslint修复：
命令：npx eslint ./需要检查语法的文件路径 --fix （全局安装eslint则可以直接使用eslint ./需要检查语法的文件路径 --fix）
复尽可能多的问题。修复只针对实际文件本身，而且剩下的未修复的问题才会输出。不是所有的问题都能使用这个选项进行修复
4.ESLint配置文件入门
4.1 配置文件格式
- 我们通过
npx eslint --init创建配置文件时，有提供配置文件的格式给我们选择：- .js / .yaml / .json
- eslint 加载的优先级是 ： js > yaml > json，所以我们最好选择 js格式
4.2 JS格式使用模式
- 我们注意到 配置文件内部使用的 module.exports 导出配置数据
- 这是因为 我们在前面 添加配置文件时，选择了
CommonJS
- 如果选择了
JavaScript modules，那么就会是使用 export 导出配置数据 - 推荐：
CommonJS- 由于我们开发时，一般使用的是 vue脚手架，内部webpack打包默认用的是CommonJS
- 所以 ESLlint配置文件 应尽可能与它保持一致
4.3重点配置项
4.3.1 root
我们有如下目录结构，此时在根目录运行 ESLint，那么我们将得到两个配置文件 .eslintrc.js（项目级配置） 和 src/.eslintrc.js（目录级配置），这两个配置文件会进行合并，但是 src/.eslintrc.js 具有更高的优先级。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-90XdmgXX-1647849438497)(./image/4.3.1-1.png)]
"root": true
默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果发现配置文件中有 “root”: true，它就会停止在父级目录中寻找。
4.3.2 parse配置
解析器选项可以在 parserOptions 属性设置。设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false。如下：
{
// 解析器类型
// espima(默认), babel-eslint, @typescript-eslint/parse,vue-eslint-parser
"parse": "esprima",
// 解析器配置参数
"parseOptions": {
// 代码类型：script(默认), module
"sourceType": "script",
// es 版本号，默认为 5，也可以是用年份，比如 2015 (同 6)
"ecamVersion": 6,
// es 特性配置
"ecmaFeatures": {
"globalReturn": true, // 允许在全局作用域下使用 return 语句
"impliedStrict": true, // 启用全局 strict mode
"jsx": true // 启用 JSX
},
}}
- ESLint 解析器 解析代码时，可以指定 用哪个 js 的版本
- 注意：这里是指定 检查时按照哪个js版本语法检查，但这里不包含 全局变量
- 全局变量 需要通过 前面的
env节点配置
4.3.3 globals节点
-
当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
赋值为true表示可以读取，可以修改
赋值为false表示可以读取，不能修改
"globals": {
"_": true // 可以读取，可以修改
"$": false // 可以读取，不能修改
}
- 也可以使用
globals节点来手动配置全局成员 - 注意：这个节点需要手动添加，默认是没有的
- 但是globals 中一个个的进行声明未免有点繁琐，这个时候就需要使用到 env
4.3.4 env节点
"env": {
browser: true,
commonjs: true,
es2021: true,
es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
node: true, // Node.js 全局变量和 Node.js 作用域
jquery: true // jQuery 全局变量
}
- 由于 ESLint 的各种规范中，一般都不允许使用未在页面内声明的成员
- 而开发中经常会用到 一些运行环境自带的 api，如：
- 浏览器中的 window/document 等
- jquery中的$等
- nodejs中的**__dirname** 等
- es2021中的 WeakRef 等
- 所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了
查看源码可以发现，其预设变量都引用自 globals 包
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dl7QR4XO-1647849438498)(./image/4.3.4-1.png)]
4.3.5 rules 节点
"rules": {
'indent': [2, 4], // 强制使用一致的缩进
'eqeqeq': [2, 'always'], // 要求使用 === 和 !==
'semi': [2, 'never'], // 要求或禁止使用分号代替 ASI
'quotes': [2, 'single'] // 强制使用一致的反勾号、双引号或单引号
}
ESLint 附带有大量的规则。你可以在rules选项中设置，设置的规则将覆盖上面继承的默认规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
规则的本质
- 就是**【函数】**
- 我们可以通过 看 ESLint 源码查看：
- eslint 内置285个规则，每条规则 都是一个 create函数
- 在进行语法检查时，会将代码转成另一种
4.3.6 extends 节点
扩展就是直接使用别人已经写好的 lint 规则，方便快捷。扩展一般支持三种类型：
{
"extends": [
"eslint:recommended",
"plugin:es5/no-es2015",
"eslint-config-standard", // 可以简写成standard
]
}
- eslint: 开头的是 ESLint 官方的扩展，一共有两个：eslint:recommended 、eslint:all。
- plugin: 开头的是扩展是插件类型，也可以直接在 plugins 属性中进行设置，。
- 最后一种扩展来自 npm 包，官方规定 npm 包的扩展必须以 eslint-config- 开头，使用时可以省略这个头，上面案例中 eslint-config-standard 可以直接简写成 standard。
4.3.7 plugins 节点
虽然官方提供了上百种的规则可供选择，但是这还不够，因为官方的规则只能检查标准的 JavaScript 语法，如果你写的是 JSX 或者 Vue 单文件组件也或者是html文件，ESLint 的规则就开始束手无策了。
这个时候就需要安装 ESLint 的插件，来定制一些特定的规则进行检查。ESLint 的插件与扩展一样有固定的命名格式，以 eslint-plugin- 开头，使用的时候也可以省略这个头。
"plugins": [
"vue" // eslint-plugin-vue 此插件用来识别.vue文件中的js代码
"html" // eslint-plugin-html此插件用来识别.html文件中的js代码
"es5" // eslint-plugin-es5此插件用来识别js代码中的es6以上代码
]
前面在extends 中说了extend中也可以添加插件，如下格式
{
"extends": [
"plugin:es5/no-es2015"
]
}
"plugin:${pluginName}/${configName}"
对照上面的案例，插件名(pluginName) 为 es5，也就是之前安装 eslint-plugin-es5 包，配置名(configName)为 no-es2015，
看插件源码就会发现配置名就是插件中config配置项中的对象名，配置对象中就包含了使用对应插件并增加了该插件的规则扩展
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mILsgGkH-1647849438500)(./image/4.3.7-1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zokOQfRA-1647849438500)(./image/4.3.7-2.png)]
配置名是插件配置的 configs 属性定义的，这里的配置其实就是 ESLint 的扩展，通过这种方式即可以加载插件，又可以加载扩展
注意：并不是每个插件都可以这样配置
5.eslintignore 文件
1、定义和作用
在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。
2、忽略规则
-
.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如：
/*.js //忽略js结尾的文件检测
被忽略的文件被检测则会返回如下警告，并不进行检测
6.Eslint编辑器插件的使用
1、安装ESLint编辑器插件（Prettier插件、Prettier Eslint插件也都可以实现）
2、 配置settings.json
1）点击文件 -->首选项 -->设置
2）进去后点击右上角，打开settings.json
3）将下面代码复制进去并保存退出
"eslint.enable": true, // 根据eslint规则进行检查
// 保存自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// eslint检测添加项，eslint默认只检测js文件
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
7.结合 Git Hooks，阻止不规范的代码提交
1、使用Git Hooks在 git commit 前执行 eslint 检查 js 文件，检查通过才可继续
npm i -D husky // 安装 husky
npm i -D lint-staged // lint-staged
2、然后再package.json文件中加入如下配置：
package.json:
{
"scripts": {
"precommit": "lint-staged"
},
"husky": {
"hooks": {
"pre-commit": "npm run precommit"
}
},
"lint-staged": {
"*.js": [
"eslint",
"git add"
]
}
}
3、此时尝试 git commit 代码，如果 eslint 检查未执行，则还需 在项目根目录下的 .git / hooks 中添加文件 pre-commit：
#!/bin/sh
npm run precommit
npm run precommit
并执行如下命令，赋予 pre-commit 文件执行权限：
chomd +x pre-commit
这时候，再尝试 git commit 代码，就能正常执行 eslint 检查了，且检查通过之后会执行 git add；检查不通过则停止动作。
这就阻止了不规范代码的提交。
8.使用eslint会出现的问题
1、自动修复会导致代码最后修改人发生变化
解决方案：腾讯前端http://www.alloyteam.com/2020/03/14286/#prettyPhoto
代码，如果 eslint 检查未执行，则还需 在项目根目录下的 .git / hooks 中添加文件 pre-commit：**
#!/bin/sh
npm run precommit
npm run precommit
并执行如下命令，赋予 pre-commit 文件执行权限：
chomd +x pre-commit
这时候，再尝试 git commit 代码，就能正常执行 eslint 检查了，且检查通过之后会执行 git add；检查不通过则停止动作。
这就阻止了不规范代码的提交。
8.使用eslint会出现的问题
1、自动修复会导致代码最后修改人发生变化
解决方案：腾讯前端http://www.alloyteam.com/2020/03/14286/#prettyPhoto
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
