ESLint 与 Webpack 3.0 集成实例

前言

在前端开发中，代码规范是非常重要的一环。而 ESLint 是一个非常优秀的代码规范检查工具。在 Webpack 中集成 ESLint，可以在打包时进行代码规范检查，并给出相应的提示和错误信息。本文将介绍如何在 Webpack 3.0 中集成 ESLint，并提供相应的示例代码。

安装和配置 ESLint

首先，我们需要安装 ESLint 和相关的插件。可以使用以下命令：

npm install eslint eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev

安装完成后，在项目根目录下创建 .eslintrc.js 文件，并添加以下代码：

// www.javascriptcn.com code example
module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: 'standard',
  plugins: [
    'html'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

以上代码是一个基本的 ESLint 配置文件，其中包含了一些常用的规则。如果需要更多的规则，可以在 rules 中进行配置。

集成 ESLint 到 Webpack 中

接下来，我们需要在 Webpack 中集成 ESLint。在 webpack.config.js 文件中添加以下代码：

// www.javascriptcn.com code example
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      // ...
    ]
  },
  // ...
}

以上代码中，我们使用了 eslint-loader 来对代码进行检查。其中，enforce: 'pre' 表示在其它 Loader 之前执行。include 表示需要检查的文件目录，这里我们只检查了 src 和 test 目录下的文件。formatter 表示输出错误信息的格式，这里我们使用了 eslint-friendly-formatter。

示例代码

以下是一个简单的示例代码，其中包含了一些 ESLint 的错误。

const a = 1
let b = 2
const c = a + b
console.log(c)

if (a == 1) {
  console.log('a is 1')
}

在运行 Webpack 时，将会看到以下错误信息：

// www.javascriptcn.com code example
ERROR in ./src/index.js
Module Error (from ./node_modules/eslint-loader/index.js):
/Users/user/Desktop/eslint-webpack/src/index.js
  1:1  error  Unexpected var, use let or const instead  no-var
  2:1  error  Unexpected let, use const instead        prefer-const
  5:13 error  Expected '===' and instead saw '=='      eqeqeq
  7:3  error  Unexpected console statement            no-console

✖ 4 problems (4 errors, 0 warnings)

以上就是 ESLint 与 Webpack 3.0 集成的实例，希望对大家有所帮助。在实际项目中，我们可以根据需要进行更多的配置和规则设置，以达到更好的代码规范和质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d54785a941bf71349c21dc