安装
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保存项目时，会自动修复一些错误。