EsLint

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

• eslint is the core JavaScript linter.
• eslint-loader tells webpack that you want to use eslint in our build
• babel-loader transpiles our code with webpack
• babel-eslint provides linting for valid ES6 code
• eslint-plugin-react extends ESLint rules to cover React

添加 eslint 配置文件，如果有不希望被限制的语法可以添加到“rule”字段

touch .eslintrc

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "react"
  ],
  "extends": ["plugin:prettier/recommended", "plugin:react/recommended", "eslint:recommended"],
  "rules": {
    "quotes": [1, "double", "avoid-escape"],
    "react/prop-types": 0,
    "no-console": 0,
    "no-unused-vars": 1,
    "no-func-assign": 2,
    "no-const-assign": 2,
    "no-var": 2,
    "react/react-in-jsx-scope": 0
  }
}

prettier

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

• prettier — the core prettier library. Duh.
• eslint-plugin-prettier — this plugin allows you to format code using Prettier when you run —fix
• eslint-config-prettier — This library solves the conflicts between eslint and prettier. It turns off conflicting rules. ESLint’s rules, not Prettier’s. Obviously.

vscode settings

配置 vscode 编辑器，可以自动提示并修复错误

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "files.associations": {
    "*.js": "javascriptreact"
  }
}

git hook

npm install --save-dev pretty-quick husky lint-staged

配置文件，使得自动修复错误

package.json

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
},