eslint 是一个开源的 js 代码检查工具,初衷是为了让程序员可以创建自己的检测规则。实际生产中,团队内往往会制订一套统一的标准,让整个团队的编码风格达到一致。 eslint 其实与 webpack 没有任何关系,两者并不互相依赖,甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置。这里我们主要是介绍一下 eslint 是如何进行配置和使用的。
首先安装 eslint:
npm i eslint -D
然后利用命令初始化一个配置文件:
npx eslint --init
选择如下:
image.png
然后选择自动安装依赖,可以看到项目里面面为我们自动生成了配置文件,.eslintrc.js:
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 配置,其中所代表的含义:
npx eslint src/**/*.jsx
image.png
可以看到,为我们报了许多告警。可是我们修复的时候,每次修复一下,得运行验证一遍,修复下一个时候又要来回切换,验证,真的很繁琐。所以我们一般会使用 ide 来进行提示。这里我以 webstorm 为例吧,其实 vscode 这些也都差不多。
image.png
如图,进行配置后。我们直接在编辑界面就可以看到报错提示。
image.png
这样改起来就方便了许多。
不一定每个 ide 都有插件,如果不想使用插件,又要实时提示报错,我们可以结合 webpack 的打包编译功能来实现。
// webpack.config.common.js
...
{
test: /\.(js|jsx)$/,
exclude: /node-modules/,
use: ['babel-loader', 'eslint-loader']
},
...
然后使用 npm run dev-server 打包,发现命令行会显示告警,修复后,重新编译,会显示剩余的告警。这样还是要去查看命令行。我们可以在 webapck 的 devserver 下加一个配置参数:
overlay: true,
再次打包,如图:
image.png
会弹一个浮层来显示告警,只有当所有告警信息修复完毕后,才会显示正常的页面信息。
真实项目中,很少有使用 eslint-loader 的,因为不可避免会降低打包速度。事实上,我们只要保证每个人提交的代码是符合要求即可,为了实现这个目的,我们只需要在开发者上传代码时进行校验即可。提交前的代码质量由开发者自行安装插件来保证。 我们常用 husky 和 lint-staged 来进行代码提交时的 eslint 校验:
// 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