ESLint 是前端的一个代码检查工具，它可以根据指定的规则来检查代码是否符合规范。ESLint 可以直接在命令行使用，也可以集成到编辑器中使用，也可以配合 Webpack 使用。之前简单写了一下命令行使用和集成到 VSCode 使用，这里继续写配合 Webpack 使用。

如果您还不了解 Webpack 的话，可以看 Webpack 简易使用指南，如果不了解 ESLint 的话，可以看 使用 ESLint 检查代码规范 。

安装 eslint-loader

要配合 Webpack 使用就需要安装 eslint-loader，这里假设你已经安装和配置好了 Webpack。

npm 安装 eslint-loader：

npm install --save-dev eslint-loader

除了安装 eslint-loader 外，还需要安装 ESLint：

npm install --save-dev eslint

配置 eslint-loader

在 webpack.config.js 的 loader 配置区域内加入：

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'eslint-loader',
}

这里没有使用多余的选项。

配置 ESLint

项目根目录需要有一个 .eslintrc.json 配置文件，可以输入：

npx eslint --init

初始化 ESLint 配置。

关于 .eslintrc.json 配置文件的说明可以看 使用 ESLint 检查代码规范 中的 配置文件简单说明。

使用

我的 Webpack 配置的入口文件是 src/main.js，下面是 main.js 中的内容：

import hello from './hello'; //  加载 hello.js
hello(); //  执行

上面的 src/main.js 会加载 src/hello.js，下面是 hello.js 的内容：

export default () => {
  console.log('Hello Webpack'); // 在控制台输出hello
};

看上去也没啥问题，但是我在 ESLint 的配置文件中禁止了 console 。

运行打包后控制台输出了如下内容：

ERROR in ./src/hello.js
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

E:\eslint\src\hello.js
2:3  error  Unexpected console statement  no-console

只有修复问题才能打包。

如果把 no-console 的规则设置为 ``warn 警告，打包后控制台输出了如下的内容：

WARNING in ./src/hello.js
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

E:\eslint\src\hello.js
2:3  warning  Unexpected console statement  no-console

警告不会影响打包。

eslint-loader 配置说明

如果需要配合其它处理 JS 文件的 loader 使用的话，需要注意 loader 的加载顺序。Webpack 的 loader 的加载顺序是从下到上，eslint-loader 是检查代码规范的，需要先加载 eslint-loader。

如果是配合 babel-loader 使用的话，加载配置如下：

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: [
    'babel-loader',
    'eslint-loader'
  ]
}

其它处理 JS 的 loader 也是一样的，需要先加载 eslint-loader。

eslint-loader 选项说明

上面的 eslint-loader 没有配置选项，下面是 eslint-loader 的选项配置说明。

cache

类型：Boolean or string。

默认：false。

把检查结果缓存到文件中，如果值的类型是 Boolean，会缓存到 ./node_modules/.cache/eslint-loader，如果值类型为 string 会缓存到指定的文件中。

配置示例：

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'eslint-loader',
  options: [
    cache: true
  ]
}

fix

类型：Boolean。

默认：false。

自动修正，注意：自动修正会改变文件内容。

配置示例：

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'eslint-loader',
  options: [
    fix: true
  ]
}

quiet

类型：Boolean。

默认：false。

如果设置为 true 会忽略警告。

配置示例：

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'eslint-loader',
  options: [
    quiet: true
  ]
}

相关文章：