5-6~7 eslint 在 webpack 中的配置

1. 简介

eslint 是一个开源的 js 代码检查工具，初衷是为了让程序员可以创建自己的检测规则。实际生产中，团队内往往会制订一套统一的标准，让整个团队的编码风格达到一致。
eslint 其实与 webpack 没有任何关系，两者并不互相依赖，甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置。这里我们主要是介绍一下 eslint 是如何进行配置和使用的。

2. 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 配置，其中所代表的含义：

1. env
   指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。此处使用的 browser 预定义了浏览器环境中的全局变量，es6 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
2. globals
   脚本在执行期间访问的额外的全局变量。也就是 env 中未预定义，但我们又需要使用的全局变量。
3. extends
   检测中使用的预定义的规则集合。
4. rules
   启用的规则及其各自的错误级别，会合并 extends 中的同名规则，定义冲突时优先级更高。
5. 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。
6. plugins
   plugins 是一个 npm 包，通常输出 eslint 内部未定义的规则实现。rules 和 extends 中定义的规则，并不都在 eslint 内部中有实现。比如 extends 中的plugin:react/recommended，其中定义了规则开关和等级，但是这些规则如何生效的逻辑是在其对应的插件 ‘react’ 中实现的。

3. 运行 eslint

npx eslint src/**/*.jsx

image.png

可以看到，为我们报了许多告警。可是我们修复的时候，每次修复一下，得运行验证一遍，修复下一个时候又要来回切换，验证，真的很繁琐。所以我们一般会使用 ide 来进行提示。这里我以 webstorm 为例吧，其实 vscode 这些也都差不多。

image.png

如图，进行配置后。我们直接在编辑界面就可以看到报错提示。

image.png

这样改起来就方便了许多。

4. 结合 webpack 使用

不一定每个 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

会弹一个浮层来显示告警，只有当所有告警信息修复完毕后，才会显示正常的页面信息。

5. husky

真实项目中，很少有使用 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