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集成
-
Command + ,
- Language & Frameworks
- JavaScript
- Code Quality Tools
- ESLint
- Enable
- ESLint package (选择全局或者本地的安装)
- Configuration file(选择项目的.eslintrc配置文件)
- Apply