eslint

Function: make rules, check code, beautify code format, avoid bugs

  • The installation
npm install eslint --save-dev

./node_modules/.bin/eslint --init
Copy the code
  • Eslintrc is configured according to the team custom
  • For files that do not need to be checked, configure to.eslintignore

pretitter

Purpose: Code beautification

  • The installation
  • Eslint-plugin-prettier: Use prettier as the rule for ESLint
  • Eslint-config-prettier: Disable the prettier rule when the prettier rule conflicts with the ESLint rule

Husky

Effect: Prevents bad Commit

lint-staged

Purpose: Execute predefined tasks before code submission to ensure code quality

Execution process:

  1. Git add adds the code to the staging area.
  2. Git commit;
  3. Husky registered hook functions are called before Git pre-commit, performing Lint-staged;
  4. Lint-passage Takes all submitted files and executes written tasks (ESLint and Prettier);
  5. If there is an error (that doesn’t pass ESlint), stop the task, print an error message, and wait for the fix before executing commit;
  6. Commit successfully, which can be pushed to remote
package.json
{
  "scripts": {
    "precommit": "lint-staged"
  },
  "devDependencies": {
    "babel-eslint": "^ 10.0.3"."eslint": "^ 6.4.0"."eslint-config-airbnb": "^ 18.0.1"."eslint-config-prettier": "^ 6.3.0"."eslint-plugin-import": "^ 2.18.2"."eslint-plugin-jsx-a11y": "^ 6.2.3." "."eslint-plugin-prettier": "^ 3.1.0"."eslint-plugin-react": "^ 7.14.3"."eslint-plugin-react-hooks": "^ 1.7.0"."lint-staged": "^ 9.2.5." "."prettier": "^ 1.18.2"
  },
  "lint-staged": {
    "src/**/*.js": [
      "eslint --fix --ext .js"."prettier --write"."git add"
    ]
  }
}

.prettierrc
{
    "printWidth": 120, 
    "semi": false."singleQuote": true."trailingComma": "es5"
}

.eslintrc
{
    "env": {
        "browser": true."es6": true
    },
    "extends": ["airbnb"."prettier/react"."prettier"]."globals": {// preset global variables}, // enables high-level syntax to be recognized, such as decorators"parser": "babel-eslint"."parserOptions": {
        "ecmaFeatures": {
            "jsx": true."legacyDecorators": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": ["jsx-a11y"."react-hooks"]."rules"{// Customize lint rules according to project requirements}}Copy the code

Problems encountered

  • There are multiple packages in one project, husky is installed based on.git, husky is installed in the subproject, only the last installation takes effect, husky is used in the top-level directory, precommit is defined in the subdirectory
{
  "scripts": {
    "precommit:client": "cd client && npm run precommit"."precommit:server": "cd server && npm run precommit"
  },
  "devDependencies": {
    "husky": "^ 3.0.5"."npm-run-all": "^ 4.1.5." "
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm-run-all precommit:*"}}}Copy the code
  • The es advanced syntax in vscode is not supported. You need to create jsconfig.json and add the following configuration
jsconfig.json
{
    "include": ["src/**/*"]."compilerOptions": {
        "experimentalDecorators": true}}Copy the code
  • If you want to add ESLint only to packageA when there are multiple packages in a project, you need to do the following configuration. Otherwise, esLint will not take effect
Create the.vscode directory in a different directory and create settings.json as follows:"editor.formatOnSave": false."eslint.autoFixOnSave": true."eslint.enable": true."eslint.workingDirectories": ["./packageA"]}Copy the code
  • Short paths set by alias in webpack are not a problem, use eslint-import-resolver-alias to resolve it
Add the following configuration in. Eslintrc"settings": {
    "import/resolver": {
        "alias": {
          "map": [["aaa"."./src/aaa"],
            ["common"."./src/common"]],"extensions": [".js".".jsx".".json"]}}},Copy the code

Reference:

Semi-automatically improve project code quality using ESlint and Lint-Staged projects

Improved front-end application quality esLint + Husky + Prettier + Lint-Staged

Multi-directory Husky configuration

eslint-config-airbnb

Hackernoon.com/write-beaut…