Front-end code styles vary from person to person, and with so many people involved in a project, it can be a hodgepodge without strong controls, which can be a nightmare for developers.

How to solve this dilemma?

  • Eslint code checking tool
  • Prettier code formatting tool
  • Husky Git hooks
  • Lint-staged lint operations on altered files in Git

Eslint code checks. When the editor enables Eslint, non-conforming versions will be automatically flagged. Prettier makes code more pretty, changes code that doesn’t meet testing, automatically formatting. When husky Git does a pre-commit, the Prettier formatting script is executed to format code so that it conforms to the Prettier specification. Lint-staged Think about how if you suddenly introduce a formatting tool into a project of certain size, will the whole project go wrong? Lint-passage is simply used to process only changed files

Depend on the installation

npm i -D husky lint-staged prettier eslint-plugin-prettier eslint-config-prettier
Copy the code

configuration

The project is initialized using create-react-app

Configuration. The eslintrc

{
    "env": {"amd": true."browser": true."node": true."es6": true
    },
    "extends": [
        "react-app"."plugin:prettier/recommended"."prettier/react"]."plugins": [
        "prettier"]."parser": "babel-eslint"."rules": {
        "prettier/prettier": "error"}}Copy the code

  1. Eslint-config-prettier Disables all rules that conflict with Prettier
  2. Eslint-plugin-prettier Applies prettier to ESLint with rules “prettier/prettier”: “error” to alert ESLint

Configuration. The prettierrc

For details, see Options on the official website

{
    "semi": false."useTabs": false."singleQuote": true."trailingComma": "es5"
}Copy the code

Configuration. The editorconfig

The editor recognizes.editorConfig to facilitate typing, see EditorConfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120

[*.md]
trim_trailing_whitespace = falseCopy the code

Configuration package. Json

Add Husky and Lint-staged configurations and add Lint, Fix Scripts items

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.js",
    "fix": "prettier --write src/**/*.js"
},
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**/*.js": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
},Copy the code


Then run

npm run lintCopy the code

Eslint will check all js files under SRC

run

npm run fixCopy the code

Prettier automatically fixes files under SRC. Use caution when Prettier does this because it changes all files that don’t conform to the rule. You may be surprised to find that hundreds of files in the folder have been changed!!

How do you avoid Prettier formatting all the files at once?

Husky. hooks[‘pre-commit’] are commands that are executed before a Git commit, where Lint-passage is performed first, which is used to detect and format only the currently changed files.

Lint-staged “SRC /**/*.js” means that only JS files in SRC are formatted, or “*.js” means that js files in all projects are formatted. Prettier is formatted after Eslint fix, git add, git commit

eslint –fix -> prettier –write -> git add -> git commit -m ‘xxx’

A test run

This is before git commit



perform

git add *
git commit -m 'test'Copy the code

After performing



The command line