Eslint配置
- 它是用来检测 js 和 jsx 语法的工具，可以配置各项功能
- 我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，
- 将来运行 Eslint 时就会以写的规则对代码进行检查
（一） 配置文件
配置文件由很多种写法：
- ①
.eslintrc.*：新建文件，位于项目根目录下，区别在于配置格式不一样.eslintrc.eslintrc.js.eslintrc.json
- ②
package.json中eslintConfig：不需要创建文件，在原有文件基础上写 - ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可
（二）具体配置
我们以 .eslintrc.js 配置文件为例：
module.exports = {
extends: [],// 继承其他规则
parserOptions: {},// 解析选项
rules: {},// 具体检查规则
// ...
// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};
1. parserOptions 解析选项
parserOptions: {
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: { // ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
}
2. rules 具体检查规则
| 规则等级 | |
|---|---|
"off" 或 0 | 关闭规则 |
"warn" 或 1 | 开启规则，使用警告级别的错误：warn (不会导致程序退出) |
"error" 或 2 | 开启规则，使用错误级别的错误：error (当被触发的时候，程序会终止，编译会暂停) |
示例（更多规则详见：规则文档 ）
rules: {
semi: "error", // 禁止使用分号(semi:分号)
'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 除了少数情况下不会有警告
],
}
3. extends 继承
开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。
| 现有以下较为有名的规则 | ||
|---|---|---|
| Eslint 官方的规则 | eslint:recommended | |
| Vue Cli 官方的规则 | plugin:vue/essential | |
| React Cli 官方的规则 | react-app | |
| typescript的规则 | @vue/typescript-eslint/recommended | 解决ts的interface关键字等识别报错的问题 |
// 例如在项目中，我们可以这样写配置
module.exports = {
extends: ["eslint:recommended"],
rules: {
// 我们的规则会覆盖掉eslint:recommended的规则
// 所以想要修改规则直接改就是了
eqeqeq: ["warn", "smart"],
},
};
（三）在 Webpack 中使用
Webpack 4的时候是在loader中处理的，Webpack 5 是用插件处理
1.下载包
npm i eslint-webpack-plugin eslint -D
2. 定义 Eslint 配置文件
- 在项目根目录下创建文件：.eslintrc.js
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
ecmaVersion: 6,
sourceType: "module",
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
};
3. 配置
- webpack.config.js
const path = require("path");
// 【1】 引入eslint插件☆☆☆☆☆
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: [
{
// 用来匹配 .css 结尾的文件
test: /.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
//...其他Loader
],
},
plugins: [
// 【2】配置eslint插件☆☆☆☆☆
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
mode: "development",
};
4. js 文件代码测试
- main.js
// 引入资源，Webpack才会对其打包
import count from "./js/count";
import sum from "./js/sum";
var result2 = sum(1, 2, 3, 4);//测试是否报错
console.log(result2);
5. 运行指令
npx webpack
在控制台查看 Eslint 检查效果，如果有不符合规范的会报错
（四） VSCode Eslint 插件
打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决
但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。
所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:
.eslintignore
# 忽略dist目录下所有文件
dist
参考链接
[ 问题延伸 ]
1. Eslint 代码检查的过程
ESLint的代码检查过程如下：
- 配置文件：在项目根目录中，通常会有一个
.eslintrc或.eslintrc.js等配置文件。该配置文件定义了ESLint的规则和配置选项。 - 解析器：ESLint使用指定的解析器对代码进行解析，以理解其语法结构和语义。解析器负责将代码转换为抽象语法树（AST）的形式。
- 加载规则和插件：ESLint根据配置文件中的设置，加载相应的规则和插件。规则定义了代码应遵循的规范、风格和最佳实践，而插件提供了额外的规则或扩展功能。
- 代码遍历：ESLint遍历代码的AST，对每个节点应用相应的规则。通过遍历AST，ESLint能够获取代码的细节，并对其进行静态分析。
- 规则检查：在代码遍历的过程中，ESLint应用配置的规则来检查代码。如果发现代码违反了某个规则的要求，ESLint会发出警告或错误。
- 输出结果：ESLint将检查结果输出到终端或集成开发环境（IDE）中。输出结果包括文件名、行号、列号、违反的规则和相应的消息。这些信息帮助开发者确定代码中的问题所在，并提供修复建议。
- 自动修复（可选）：ESLint还提供了自动修复功能，可以自动解决一些简单的代码问题。开发者可以使用
--fix选项运行ESLint，让其自动根据规则修复代码中的问题。
通过这个过程，ESLint能够对代码进行静态分析和规范检查，帮助开发者遵循一致的编码风格、减少潜在的错误，并提高代码的可维护性和可读性。
