webpack之与Eslint结合

Eslint有多种团队规范，例如：Airbnb、alloyteam、ivweb

此处主要以Airbnb为例，使用eslint-loader，构建时检查JS规范

1、安装eslint依赖（此处以react开发环境为例，vue等其他开发环境有所不同，参考：https://www.npmjs.com/package/eslint-config-airbnb）

npm ieslint, eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-config-airbnb -D

2、安装eslint-loader

npm i eslint-loader -D

3、将Eslint加入webpack.prod.js配置

        rules: [
            {
                test: /.js$/,
                use: [
                    'babel-loader',
                    'eslint-loader'
                ]
            },
            ...
        ]

4、创建eslint配置文件（参考：https://cn.eslint.org/docs/user-guide/configuring）

        安装babel-eslint：

npm i babel-eslint -D

         新建配置文件：.eslintrc.js

        添加配置：

module.export = {
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
      "browser": true,
      "node": true
  }
}

5、添加规则(此处为修改空格数量为例)

module.export = {
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
      "browser": true,
      "node": true
  },
  "rules": {
      "indent": ["error", 4]
  }
}