08.ESLint基本使用
认识ESLint
ESLint是一个静态JavaScript代码分析工具(static program analysis),也就是ESLint可以在代码没有运行的时候就对代码进行分析并且对模式匹配错误的代码进行报告，ESLint的目的是保证代码的一致性和避免错误，可以帮助我们在项目开发中建立统一的团队代码规范，保持一致的代码风格，提高代码的可读性和可维护性。
ESLint和之前的JSLint、JSHint等类似，都是用来对js代码进行静态分析和检查的工具。
在命令行工具中使用ESLint
ESLint作为一个js代码静态分析工具，是可以独立于webpack等这些构建工具而工作的，也就是ESLint可以使用其提供的命令行工具对指定的文件或者文件目录进行检查。
- 首先安装ESLint
npm i eslint -D
- 生成配置文件.eslintrc.js
要想ESLint生效必须要创建一个配置文件，一般名为.eslintrc.js。但是多数情况下我们不手动创建，而是基于ESLint提供的命令来创建：
npx eslint --init
// 或者
npm init @eslint/config
执行生成ESLint配置文件的命令，此时ESLint会依次弹出多个选择，并最终根据我们选择的选项来生成不同的配置文件。
注意：虽然基于不同的选择生成的配置文件可能不同，但是这些配置文件中信息都是可以修改的。
- 使用命令行工具对目标文件进行静态检查
npx eslint ./src/index.js
ESLint的配置文件信息
module.exports = {
"env": {
"browser": true, // 要检查的js代码是运行在浏览器端
"commonjs": true, // 使用commonjs模块化规范
"es2021": true // 对ES2021以前的语法都可以进行检查
},
"extends": [
"eslint:recommended", // 继承eslint官方推荐的检查规则
"plugin:react/recommended", // 继承react推荐的检查规则
"plugin:@typescript-eslint/recommended" //继承typescript推荐的检查规则
],
"parser": "@typescript-eslint/parser", // js代码的解析器，eslint默认的代码解析器是espree；由于项目中存在ts代码所以编译指定为专门解析ts代码的解析器
"parserOptions": {
"ecmaFeatures": {
"jsx": true // 对jsx语法也进行检查
},
"ecmaVersion": "latest", // 和env中配置的ECMA版本对应
"sourceType":"module" // 如果我们在初始化的时候选择了模块化规范是Commonjs 如果要想同时支持ESmodule，那么必须在解析配置这里写上这一句，否则会报错
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
}
}
ESLint的基本原理
- ESLint通过默认的JS编译器espree将要检查的源代码进行词法分析，转化为tokens数组
- tokens数组经过语法分析，生成抽象语法树AST
- 深度遍历AST的同时访问每一个节点，并为每一个节点应用插件
- 插件在工作的时候对不符合规则的语法报告错误并进行修复
解决ESLint报错的几种思路
如下是一段源代码，继承airbnb推荐配置规则进行代码检查：
const a = "hello world"
function demo(){
return 100
}
export {
}
执行npx eslint ./src/eslint/index.js命令之后，控制台显示ESLint检查出了下面这些错误：
1:7 error 'a' is assigned a value but never used no-unused-vars
1:11 error Strings must use singlequote quotes
1:24 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
1:24 error Missing semicolon semi
2:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
3:16 error Missing space before opening brace space-before-blocks
3:16 error Missing space before opening brace space-before-blocks
3:17 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
4:1 error Unexpected tab character no-tabs
4:1 error Expected indentation of 2 spaces but found 1 tab indent
4:12 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
4:12 error Missing semicolon semi
5:2 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
6:1 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
7:9 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
8:1 error Unexpected tab character no-tabs
8:1 error Trailing spaces not allowed no-trailing-spaces
8:2 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
9:2 error Newline required at end of file but not found eol-last
9:2 error Missing semicolon semi
解决ESLint报错思路一：直接关闭对应的规则校验
-
linebreak-style：此条规则的意思是强制使用一致的换行符风格。
报错的原因是在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。由于继承了airbnb的规则中要求所有换行符都是LF，所以会报错，在此我们先将其关闭。 -
space-before-blocks：该规则将强制块之前的空格的一致性。
此规则要求我们在块语句之前总是要有一个空格，值为never代表块之前永远不出现空格，值为always代表快之前必须有一个空格，在此先将其关闭。 -
no-unused-vars:不允许存在已经声明但是从未使用的变量，关闭该规则。
-
no-tabs:文件中任何位置不允许出现tab字符，包括代码和注释，将其关闭。
ESLint中对于规则的设置有数字和字符串两种方式：
"off"或者0，代表关闭规范校验
"warn"或者1，代表开启规则，并且使用警告级别的错误，程序并不会退出
"error"或者2，代表关闭规则，并且使用错误级别的错误，程序会退出
rules: {
"linebreak-style":"off",
"space-before-blocks":"off",
"no-unused-vars":0,
"no-tabs":"off",
},
解决ESLint报错思路二：根据自己的源代码来定义适配于自己项目的规则，这会覆盖掉继承得来的规则
- quotes：该规则强制使用一致的反勾号、双引号或单引号，airbnb中定义的是单引号，在此我们自定义一个双引号的规则来覆盖这个继承的规则.
rules: {
"quotes":["error","double"],
}
解决ESLint报错思路三：修改源代码以解决校验报错
- semi:该规则要求在一行代码的末尾必须要有一个分号，这里我们遵守它的规则，来修改源代码将代码的末尾添加一个分号;。
- indent:该规则要求代码的缩进分隔为2个空格，这里我们遵守它的规则，来修改源代码将代码的缩进变为2个空格
- eol-last:该规则要求文件的最后一行应该有一个空行，这里我们遵守它的规则，来修改源代码将代码的最后添加一个空行
VSCode中的ESLint插件
在webpack中配置eslint-loader来进行代码检查
在实际的项目开发中，我们不可能对整个项目的js文件都使用命令行工具去依次校验，为了更好的帮助我们在开发阶段发现代码风格的错误，还可以使用专门的eslint-loader来处理：
- 安装eslint-loader
npm i eslint-loader -D
- 配置eslint-loader
注意：eslint-loader的书写顺序应该在数组的末尾，先进行代码校验，然后使用babel-loader进行代码转换。
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
use:[
"babel-loader",
"eslint-loader"
]
},
]
},
配置好之后就可以在每次npm run build打包或者启动本地服务的时候先对js代码进行校验，校验通过之后才会对代码进行转化，但是要注意运用eslint-loader对代码进行的校验是在代码的编译阶段工作的，而不是在代码的编写阶段就工作的。
在VSCode等IDE工具中使用ESLint插件进行代码检查
实际上在真实的项目开发中是基本不会使用eslint-loader的，因为两个原因：
- eslint-loader是在代码的编译阶段开始工作的，我们在写代码的时候并不能帮助我们检查出错误
- eslint-loader是一定会影响最终的打包构建的速度的
因此最好的情况就是在写代码的时候ESLint就可以帮助我们检查出来错误，并且对检查出来的代码风格类错误可以进行自动修复。
VSCode中ESLint插件运行的原理是：VSCode会默认去项目的根目录下读取.eslintrc.js配置文件，如果有此文件就会按照此文件中的配置信息对代码进行静态检查，如果没有那么会按照VSCode默认的规则来对代码进行检查，并实时将错误报告显示在终端。
