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

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

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

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

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

1. 简介

2. eslint 配置

3. 运行 eslint

4. 结合 webpack 使用

5. husky

参考