目录

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
  ]
}

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/859/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年04月29日 ©著作权归作者所有

发表评论

正在加载 Emoji