安裝

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

注意：如果node版本為低版本，eslint的版本請限制在6以下，否則可能啟動時(shí)會報(bào)錯。

配置

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

        {
            test: /\.jsx|js$/,
            loader: 'eslint-loader',
            enforce: 'pre',
            include: [path.resolve(__dirname, 'src')], // 指定檢查的目錄
            options: { // 這里的配置項(xiàng)參數(shù)將會被傳遞到 eslint 的 CLIEngine
                formatter: require('eslint-friendly-formatter') // 指定錯誤報(bào)告的格式規(guī)范
            }
        },

在項(xiàng)目根目錄下新建 .eslintrc.js,用來配置ESlint規(guī)則，簡單配置如下:

/**
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"
    }
};

具體每項(xiàng)參數(shù)的含義可以查看 ESLint官網(wǎng)
另外對于ESLint規(guī)則的配置。這里有兩條我在 github上找到的配置規(guī)則，寫的還是很詳細(xì)的，具體請參考:
ESLint配置規(guī)則
ESLint配置規(guī)則-react版

最后，可以在項(xiàng)目package.json文件的scripts中添加如下規(guī)則

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

這樣就可以通過 npm run lint啟動ESLint來檢查項(xiàng)目，通過npm run lint-fix修復(fù)ESLint檢查出來的問題。
npm run lint-fix只能修復(fù)ESlint文檔中標(biāo)明fixable的規(guī)則，具體的規(guī)則請參考Rules

VScode安裝配置ESLint插件

打開VSCode，在擴(kuò)展中，搜索ESLint插件

ESlint插件.png

配置保存自動修正.png