配置ESLint实现代码规范自动测试

ESLint是一个前端JS代码的规范集，具体参考这里。

package.json中的配置

在前端项目，不仅仅是webpack项目中，可以通过下面的方式引入ESLint。

本地安装

npm i eslint --save-dev

配置

• 修改项目的package.json文件内容

{
  "scripts": {
    "lintjs": "eslint app/ webpack.*.js --cache"
  }
}

• 添加.eslintrc.js配置文件

const config = {
    env: {
        browser: true,
        commonjs: true,
        es6: true,
        node: true,
    },
    extends: 'eslint:recommended',
    parserOptions: {
        sourceType: 'module',
    },
    rules: {
        'comma-dangle': ['error', 'always-multiline'],
        indent: ['error', 2],
        'linebreak-style': ['error', 'unix'],
        quotes: ['error', 'single'],
        semi: ['error', 'always'],
        'no-unused-vars': ['warn'],
        'no-console': 0,
    },
};

module.exports = config;

上述文件内容放在项目根目录下的.eslintrc.js中。

运行

npm run lintjs

自动修正代码的规范错误可以使用npm run lintjs -- --fix，但是ESLint的版本>= 1.4.0。

ESLint在webpack中的应用

安装eslint-loader

npm i eslint-loader --save-dev

配置

配置webpack.config.js文件内容。

const config = {
    devServer: {
        host: process.env.HOST, // Defaults to `localhost`
        port: 9000, // Defaults to 8080
        overlay: {
            errors: true,
            warnings: true,
        },
    },
    // ...
    module: {
        rules: [
            {
                test: /\.js$/,
                enforce: 'pre',

                loader: 'eslint-loader',
                options: {
                    emitWarning: true,
                },
            },
        ],
    },
};

配置modules选项和devServer下的overlay选项（在浏览器中限制错误和警告信息）。