Webpack 集成 ESLint 完整配置指南

Webpack 集成 ESLint 基础配置

在 Webpack 项目中集成 ESLint 进行代码质量检查是前端开发的常见需求。

首先，为了让 Webpack 支持 ESLint 的检查流程，需要安装 eslint-loader 依赖。

npm install --save-dev eslint-loader

接着，在 webpack.config.js 配置文件中进行相应设置。

{
  test: /\.js$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [path.resolve(__dirname, 'src')], // 指定检查的目录
  options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
    formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
  }
}

需要注意的是，formatter 参数默认值为 stylish。如果希望使用第三方格式化插件，例如 eslint-friendly-formatter，需要在 options 中指定该插件路径。

其次，要使 Webpack 具备实际的 ESLint 校验能力，必须安装 eslint 核心包。

npm install --save-dev eslint

最后，为了定义项目具体的代码规范，需要创建 .eslintrc.js 配置文件。

module.exports = {
  root: true,  
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  rules: {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": "error",
    "arrow-parens": 0
  }
}

完成上述步骤后，一个简单的 Webpack 集成 ESLint 的环境即搭建完毕。

接下来详细解析 .eslintrc.js 的配置细节，更多信息可参考 ESLint 官方文档。

ESLint 配置文件核心项解析

ESLint 配置文件主要包含以下配置项：

1. root：用于限定配置文件的作用范围。
2. parser：指定用于解析代码的解析器。
3. parserOptions：设置解析器的具体选项。
4. extends：指定继承的 ESLint 规范集。
5. plugins：引用第三方插件。
6. env：指定代码运行的宿主环境。
7. rules：启用额外规则或覆盖默认规则。
8. globals：声明代码中使用的自定义全局变量。

规则配置与规范选择

在配置 ESLint 时，rules 配置项是否必不可少？

答案是肯定的。如果不希望手动编写规则，可以使用 extends 配置项引入第三方规范集。

关于 extends 配置：

可以使用 ESLint 官方推荐的规范，也可以选用知名公司提供的规范，如 airbnb、google 或 standard。

在实际开发中，通常优先使用第三方提供的规范集。

官方推荐配置：

只需在 .eslintrc.js 中添加如下代码即可启用官方推荐规则。

extends: 'eslint:recommended',
extends: 'eslint:all',

更多详细规则可参考官方规则表。

第三方规范配置：

使用第三方规范时，通常需要安装对应的插件。

npm install --save-dev eslint-config-airbnb // bnb
npm install --save-dev eslint-config-standard // standard

然后在 .eslintrc.js 中添加如下配置。

extends: 'eslint:google',
// or
extends: 'eslint:standard',

使用这些第三方扩展时，有时需要更新相关插件，例如 eslint-plugin-import。

无需担心，只需根据错误提示逐步安装缺失的插件即可解决。

虽然第三方扩展功能强大，但有时仍需定义个性化规则，此时需添加 rules 配置项。

规则配置详解：

在 .eslintrc.js 文件中添加 rules 配置。

{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

"semi" 和 "quotes" 是 ESLint 中的规则名称。第一个值表示错误级别，可选值如下：

1. "off" 或 0：关闭规则。
2. "warn" 或 1：将规则视为警告（不影响退出码）。
3. "error" 或 2：将规则视为错误（退出码为 1）。

这些规则通常分为两类应用场景：

1. 添加默认或第三方库中未包含的规则。
2. 覆盖默认或第三方库中的现有规则。

多文件类型与多目录配置处理

项目中可能还需要对 HTML、Vue、React 等其他文件进行格式规范，这需要引入第三方插件处理。

HTML 插件配置：

安装 eslint-plugin-html 插件。

npm install --save-dev eslint-plugin-html

该插件会提醒模块脚本间模拟浏览器共享全局变量的行为，因为这种行为不适用于模块脚本。

该插件还可以扩展支持 .vue、.jsx 等文件类型。

在 .eslintrc.js 中添加如下配置项。

settings: {
  'html/html-extensions': ['.html', '.vue'],
  'html/indent': '+2',
},

对于由 eslint-plugin-html 扩展支持的文件，可以使用 eslint --ext .html,.vue src 进行检测。若想在开发过程中实现边写边检，需配置相应的 loader，然后执行 npm run dev 即可实现实时检测功能。

在开发中，有时需要在同一项目的不同目录使用不同的 .eslintrc.js 文件，此时需使用 root 配置项。

限定使用范围（root: true）：

若要在不同目录中使用不同的 .eslintrc 配置，需在该目录下添加如下配置项。

{
  "root": true
}

若不设置此选项，ESLint 会继续向上查找直至根目录。如果根目录存在配置文件，将使用根目录的配置，导致当前目录配置失效。

解析器与环境变量设置

在开发中，针对不同情况需使用不同的解析器，常用的是 babel-eslint。

指定解析器（parser）：

babel-eslint 是一种高频使用的解析器。由于许多项目使用 ES6 并通过 Babel 编译代码，使用 babel-eslint 解析器可避免兼容性问题。

babel-eslint 安装命令如下：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置项。

parser: 'babel-eslint',

如果使用默认解析器且代码中使用了浏览器兼容性较差的新 JS 特性，Webpack 编译时可能出现错误。此时一般建议安装最新版的 ESLint 或使用 babel-eslint 解析器来解决。

环境配置（env）：

在 .eslintrc.js 中添加如下代码。

"env": {
  "browser": true, //
  "node": true //
}

指定环境后，即可安全使用其提供的全局变量和属性。

全局变量配置（globals）：

用于指定全局变量。

在 .eslintrc.js 中添加如下代码。

"globals": {
  "var1": true,
  "var2": false 
}

以上即为本文的全部内容，希望对学习有所帮助。