ESLint集成Webpack和Webstorm

Why ESLint?

Robust set of default rules covering all of the rules that exist in JSLint and JSHint, making a migration to this tool fairly easy.

Configurable rules - including error levels, allowing you to decide what is a warning, error, or simply disabled.

Rules for style checking, which can help keep the code format consistent across teams.

The ability to write your own plugins and rules.

安装

npm i --save-dev eslint babel-eslint eslint-plugin-babel eslint-plugin-react

npm i -g eslint babel-eslint eslint-plugin-babel eslint-plugin-react

命令行运行

eslint -c .eslintrc ./src

eslint -c .eslintrc ./src --fix

eslint -c .eslintrc ./

.eslintrc

{
  "parser": "babel-eslint",
  "plugins": [
    "babel"
  ],
  "rules": {
    "indent": [2, 2, { "SwitchCase": 1, "VariableDeclarator": {"var": 2, "let": 2, "const": 3} }],
    "default-case": 2,
    "eqeqeq": 2,
    "curly": 2,
    "quotes": [2, "single"],
    "linebreak-style": [2, "unix"],
    "semi": [2, "always"],
    "no-console": 0,
    "comma-style": [2, "last"],
    "arrow-parens": 0,
    "handle-callback-err": 2,
    "no-lonely-if": 2,
    "no-multiple-empty-lines": [2, { "max": 1 }],
    "babel/arrow-parens": 0,
    "space-infix-ops": 2,
    "generator-star-spacing": 1,
    "no-var": 2,
    "array-bracket-spacing": 1,
    "babel/object-shorthand": 0,
    "babel/no-await-in-loop": 0,
    "comma-dangle": 1,
    "react/prop-types": 0,
    "react/display-name": 0
  },
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "arrowFunctions":true,
      "classes":true
    },
    "sourceType": "module"
  },
  "extends": [
    "plugin:react/recommended"
  ],
  "globals": {
  }
}

.eslintignore

node_modules/*
src/interfaceUtil/node_modules/*
snapshotKoa/node_modules/*
dist/*

packages.json

{
...
  "lint": "eslint -c .eslintrc ./ --fix"
...
}

命令行运行：

• npm run lint

webpack集成

npm i --save-dev eslint-loader

webpack.config.js

  module: {
    rules: [{
      test: /\.js$/,
      use: ['babel-loader?cacheDirectory=true', 'eslint-loader'],
      include: path.join(__dirname, 'src'),
      exclude: [/dist/, /node_modules/, /src\/interfaceUtil\/node_modules/, /snapshotKoa\/node_modules/]
    }, {
      test: /\.(png|jpg|gif)$/,
      use: [{
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }]
    }]
  },

如果ESLint不同过的话，npm run build会报错。


Webstorm集成

1. Command + ,
2. Language & Frameworks
3. JavaScript
4. Code Quality Tools
5. ESLint
6. Enable
7. ESLint package (选择全局或者本地的安装)
8. Configuration file（选择项目的.eslintrc配置文件）
9. Apply