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