# Eslint
官方文档 https://www.webpackjs.com/plugins/eslint-webpack-plugin/
可组装的 JavaScript 和 JSX 检查工具。
这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能
我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查
# 安装Eslint 插件
npm i eslint-webpack-plugin eslint -D
1
eslint-webpack-plugin：是一个 webpack 插件，将 ESLint 集成到 webpack 构建流程中，使得在构建时可以执行代码检查。eslint：是一个流行的 JavaScript 代码质量和代码风格检查工具，它可以根据自定义的规则来检查 JavaScript 代码中的问题， 用于静态代码分析。
# 配置文件
配置文件由很多种写法：
.eslintrc.*1：新建文件，位于项目根目录
.eslintrc.eslintrc.js.eslintrc.json- 区别在于配置格式不一样
package.json中eslintConfig：不需要创建文件，在原有文件基础上写
ESLint 会查找和自动读取它们，所以以上配置文件只需要！！！存在一个即可
# .eslintrc.js具体配置
打包构建是 ESLint 会查找和自动读取该配置文件，并对项目代码进行检测
- demo
// .eslintrc.js
module.exports = {
// 解析选项
parserOptions: {},
// 环境配置
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
// 具体检查规则
rules: {},
// 继承其他规则
extends: [],
// ...
// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 完整配置参考
// .eslintrc.js
module.exports = {
// 解析选项
parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
},
// 环境配置
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
// 继承其他规则--继承 Eslint 规则
extends: ["eslint:recommended"],
// ...
// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
// 具体检查规则
rules: {
// "no-var": "error", // 不能使用 var 定义变量
},
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# parserOptions 解析选项
parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# rules 具体规则
"off"或0- 关闭规则"warn"或1- 开启规则，使用警告级别的错误：warn(不会导致程序退出)"error"或2- 开启规则，使用错误级别的错误：error(当被触发的时候，程序会退出)
rules: {
semi: "error", // 禁止使用分号
'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
'default-case': [
'warn', // 要求 switch 语句中有 default 分支，否则警告
{ commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
],
eqeqeq: [
'warn', // 强制使用 === 和 !==，否则警告
'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
],
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
更多规则详见：规则文档 (opens new window)
# extends 继承
开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。
现有以下较为有名的规则：
- Eslint 官方的规则open in new window (opens new window)：
eslint:recommended（不用安装，自带） - Vue Cli 官方的规则open in new window (opens new window)：
plugin:vue/essential（需要安装） - React Cli 官方的规则open in new window (opens new window)：
react-app（需要安装）
// 例如在React项目中，我们可以这样写配置
module.exports = {
extends: ["react-app"],
rules: {
// 我们的规则会覆盖掉react-app的规则
// 所以想要修改规则直接改就是了
eqeqeq: ["warn", "smart"],
},
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# webpack.config.js 配置引入 Eslint
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
clean: true, // 自动将上次打包目录资源清空
},
module: {
rules: [
// ...q
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
mode: "development",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# eslintignore 忽略文件
.eslintignore
# .eslintignore
# 忽略依赖文件
node_modules
# 忽略dist目录下所有文件
dist
# 忽略build目录下类型为js的文件的语法检查
build/*.js
# 忽略src/assets目录下文件的语法检查
src/assets
# 忽略public目录下文件的语法检查
public
# 忽略当前目录下为js的文件的语法检查(慎用)
*.js
# 忽略当前目录下为vue的文件的语法检查(慎用)
*.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17