ESLint配置

安装

npm install eslint eslint-loader  eslint-friendly-formatter --save -dev
npm install babel-eslint eslint-plugin-react

注意：如果node版本为低版本，eslint的版本请限制在6以下，否则可能启动时会报错。

配置

在webpack配置文件中，加入以下rules

        {
            test: /\.jsx|js$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [path.resolve(__dirname, 'src')], // 指定检查的目录
            options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
                formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
            }
        },

在项目根目录下新建 .eslintrc.js,用来配置ESlint规则，简单配置如下:

/**
module.exports = {
    "parser": "babel-eslint",
    "env": {
        "es6": true,
        "browser": true, 
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 2017,
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",4,
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-trailing-spaces": "error",
        "no-lonely-if": "error",
        "eol-last": "error",
        "indent": ["error", 4],
        "no-multiple-empty-lines": "error",
        // ES6
        "no-var": "error",
        "prefer-const": "error",
        "arrow-spacing": "error"
    }
};

具体每项参数的含义可以查看 ESLint官网
另外对于ESLint规则的配置。这里有两条我在 github上找到的配置规则，写的还是很详细的，具体请参考:
ESLint配置规则
ESLint配置规则-react版

最后，可以在项目package.json文件的scripts中添加如下规则

  "scripts": {
    "lint": "eslint --ext .js --ext .jsx src/",
    "lint-fix": "eslint --fix --ext .js --ext .jsx src/"
  },

这样就可以通过 npm run lint启动ESLint来检查项目，通过npm run lint-fix修复ESLint检查出来的问题。
npm run lint-fix只能修复ESlint文档中标明fixable的规则，具体的规则请参考Rules

VScode安装配置ESLint插件

打开VSCode，在扩展中，搜索ESLint插件

ESlint插件.png
安装成功后，重新加载VS Code，选择文件->首选项->设置，在输入框中搜索
eslint,勾选Auto Fix On Save前面的复选框
配置保存自动修正.png
关闭编辑器在重新打开，这样在写代码时，项目中ESLint报错的地方会有提示， ctrl+s保存项目时，会自动修复一些错误。