1. 简介
eslint 是一个开源的 js 代码检查工具，初衷是为了让程序员可以创建自己的检测规则。实际生产中，团队内往往会制订一套统一的标准，让整个团队的编码风格达到一致。 eslint 其实与 webpack 没有任何关系，两者并不互相依赖，甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置。这里我们主要是介绍一下 eslint 是如何进行配置和使用的。
2. eslint 配置
首先安装 eslint：
代码语言：javascript复制npm i eslint -D然后利用命令初始化一个配置文件：
代码语言：javascript复制npx eslint --init选择如下：
image.png
然后选择自动安装依赖，可以看到项目里面面为我们自动生成了配置文件，.eslintrc.js：
代码语言：javascript复制module.exports = {
env: {
browser: true,
es6: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
},
};我们来看一下Eslint 配置，其中所代表的含义：
- env 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。此处使用的 browser 预定义了浏览器环境中的全局变量，es6 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
- globals 脚本在执行期间访问的额外的全局变量。也就是 env 中未预定义，但我们又需要使用的全局变量。
- extends 检测中使用的预定义的规则集合。
- rules 启用的规则及其各自的错误级别，会合并 extends 中的同名规则，定义冲突时优先级更高。
- parserOptions ESLint 允许你指定你想要支持的 JavaScript 语言选项。ecmaFeatures 是个对象，表示你想使用的额外的语言特性，这里 jsx 代表启用 JSX。ecmaVersion 用来指定支持的 ECMAScript 版本 。默认为 5，即仅支持 es5，你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)。上面的 env 中启用了 es6，自动设置了ecmaVersion 解析器选项为 6。
- plugins plugins 是一个 npm 包，通常输出 eslint 内部未定义的规则实现。rules 和 extends 中定义的规则，并不都在 eslint 内部中有实现。比如 extends 中的plugin:react/recommended，其中定义了规则开关和等级，但是这些规则如何生效的逻辑是在其对应的插件 ‘react’ 中实现的。
3. 运行 eslint
代码语言：javascript复制npx eslint src/**/*.jsx
image.png
可以看到，为我们报了许多告警。可是我们修复的时候，每次修复一下，得运行验证一遍，修复下一个时候又要来回切换，验证，真的很繁琐。所以我们一般会使用 ide 来进行提示。这里我以 webstorm 为例吧，其实 vscode 这些也都差不多。
image.png
如图，进行配置后。我们直接在编辑界面就可以看到报错提示。
image.png
这样改起来就方便了许多。
4. 结合 webpack 使用
不一定每个 ide 都有插件，如果不想使用插件，又要实时提示报错，我们可以结合 webpack 的打包编译功能来实现。
代码语言：javascript复制// webpack.config.common.js
...
{
test: /.(js|jsx)$/,
exclude: /node-modules/,
use: ['babel-loader', 'eslint-loader']
},
...然后使用 npm run dev-server 打包，发现命令行会显示告警，修复后，重新编译，会显示剩余的告警。这样还是要去查看命令行。我们可以在 webapck 的 devserver 下加一个配置参数：
代码语言：javascript复制overlay: true,再次打包，如图：
image.png
会弹一个浮层来显示告警，只有当所有告警信息修复完毕后，才会显示正常的页面信息。
5. husky
真实项目中，很少有使用 eslint-loader 的，因为不可避免会降低打包速度。事实上，我们只要保证每个人提交的代码是符合要求即可，为了实现这个目的，我们只需要在开发者上传代码时进行校验即可。提交前的代码质量由开发者自行安装插件来保证。 我们常用 husky 和 lint-staged 来进行代码提交时的 eslint 校验：
代码语言：javascript复制// package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx}": [
"eslint"
]
},提交 commit 时，会对我们本次 commit 修改涉及到的文件进行 eslint 校验，如果有报错，则不允许 commit。
参考
https://eslint.bootcss.com/docs/about/ https://eslint.bootcss.com/docs/user-guide/getting-started https://github.com/webpack-contrib/eslint-loader https://eslint.bootcss.com/docs/user-guide/configuring vscode安装和配置ESLint https://www.npmjs.com/package/husky https://www.npmjs.com/package/lint-staged
