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