preface

In the project development, some partners do not format the code, some partners format the code will be a lot of changes for no reason, many of them are format changes, but will bring unnecessary burden to the development, so it is best to develop a unified code style.

Install and configure Prettier

Prettier is an Opinionated code formatter.

  1. The installationprettierRun the following command:
cnpm install prettier -D
Copy the code
  1. configurationprettierRules for formatting code.

Create a. Prettierrc. js file in the root directory of the project in the following format :(refer to the official documentation for the rule)

module.exports = {
    semi: true,
    trailingComma: 'all',
    singleQuote: true,
    useTabs: true,
};
Copy the code

Install and configure ESLint

Introduction: Eslint is a code detection tool.

  1. The installationeslint

To install ESLint, run the following command:

cnpm install eslint -D
Copy the code

To install ESLint globally, run the following command:

cnpm install eslint -g
Copy the code
  1. Initialize theeslint

If you have esLint installed globally, execute the following command:

eslint --init
Copy the code

If esLint is not installed globally, execute the following command:

./node_modules/.bin/eslint --init
Copy the code

Select an option based on the actual situation

  1. configurationeslintRules for code review.

A.eslintrc.js file is automatically created in the project root directory, and you can configure rules in rules. (Please refer to official documentation for specific rules.)

module.exports = { "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:react/recommended" ], "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module" }, "plugins": [ "react" ], "rules": {// disallow duplicate key "no-dupe-keys": "error"}};Copy the code

Install and configure Lint-staged

Lint-staged is a tool for running Linters on Git staging files.

  1. The installationlint-stagedRun the following command:
cnpm install lint-staged -D
Copy the code
  1. configurationlint-staged

Add it to package.json

"lint-staged": {
    "src/*": [
        "prettier --config .prettierrc.js --write",
        "eslint --fix",
        "git add"
    ]
}
Copy the code

Install and configure Husky

Husky is a Git Hook tool.

  1. The installationhuskyRun the following command:
cnpm install husky -D
Copy the code
  1. configurationhusky

Add the following code to package.json:

"prepare": "husky install"
Copy the code

If you need to prepare for the new command, run the following command:

npm run prepare
Copy the code

This automatically creates a.husky folder in the project root directory.

  1. Add apre-commithook
npx husky add .husky/pre-commit "npx lint-staged"
Copy the code

The above command creates a pre-commit in the.husky folder

In the command above, undefined can be replaced if necessary. I have had it replaced by NPX Lint-staged, which will be executed every commit time.

test

Add a js file to the SRC directory, write something, and execute:

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

This is the document I want to submit

I detected a problem with the code, socommitfailure

After the modification

commitSuccess, and the code in A. js has beenprettierFormatted.

You can see examples

reference

Husky, husky use summary