Eslint + Prettier + stylelint + Husky + Lint-staged

With git commit, your project will have a unified formatting standard and no need to worry about problems. So there’s no need to care if the team’s coding tools are consistent.

Reference Link:

  1. eslint-config-prettier
  2. stylelint

Prepare your environment

Install package that you need

The simple method is to copy the following contents into your file and then execute YARN or NPM install

Json "devDependencies": {"eslint": "^8.0.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^ 4.0.0 eslint - plugin -", "react" : "^ 7.26.1", "husky" : "^ 7.0.2", "lint - staged" : "^ 11.2.3", "prettier" : "^ against 2.4.1 stylelint", ""," ^ 13.13.1 ", "stylelint - config - standard" : "^ 22.0.0", "stylelint - order" : "^ 4.1.0"}Copy the code

Stylelint

stylelint-order

The purpose of this plugin is to force you to write CSS in a certain order. For example, write positioning first, then box model, then content area style, and finally CSS3-related properties. This greatly ensures the readability of our code.

stylelint-config-standard

Function: Configures the Stylelint rule. Official code style: stylelint-config-standard. The maintainers of Stylelint draw on the strengths of GitHub, Google, and Airbnb to create the style.

stylelint-config-recess-order

Third-party configuration of the Stylelint-Order plug-in

// .stylelintrc
{
  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
  "plugins": ["stylelint-order"],
  "rules": {
    "indentation": 4,
    "no-descending-specificity": null
  }
}
Copy the code

Eslint config

eslint-config-prettier

Lint overwrites unimportant rules that conflict with ESLint to ensure prettier’s formatting does not go wrong

eslint-plugin-prettier

Prettier formatting rule plug-in, which calls the. Prettierrc file by default

prettier

Prettier formatting plug-in

// .eslintrc
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    // "no-confusing-arrow": "off",
    // "no-mixed-operators": ["error", { "allowSamePrecedence": true }],
    // "arrow-parens": [2, "as-needed", { "requireForBlockBody": false }]
  }
}
​
Copy the code

Husky + Lint-staged

  1. Run install command

    npm set-script prepare "husky install"
npm run prepare
Copy the code

  2. Run git hooks command

    npx husky add .husky/pre-commit "npx lint-staged"
Copy the code

  3. Define lint-staged file

    // .lintstagedrc
{
  "**/*.{js,jsx}": [
    "prettier --config .prettierrc --write",
    "eslint --fix"
  ],
  "**/*.less": [
    "stylelint --fix"
  ]
}
Copy the code

Vscode plugin

You can install some plugin eslint stylelint prettier to free your using. then I will provide the settings.

eslint

Provides esLint validation to save automatic fixes

stylelint

Provide style file verification, save automatic repair function

prettier

The prettier function saves automatic formatting

// .vscode -> settings.json
{
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.codeAction.disableRuleComment": {
    "enable": true
  },
  "eslint.validate": ["javascript", "javascriptreact"],
  "eslint.codeActionsOnSave.mode": "all",
  "eslint.run": "onSave",
​
  "editor.defaultFormatter": null,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}
Copy the code

Tips

. The plugin eslintrc: prettier/it practical implications:

// .eslintrc
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
Copy the code

\