preface

Why add a COMMIT and code quality specification

  • We need tools to help us quickly add a formatted commit. We need a tool to help us quickly add a formatted commit.
  • Code specification has always been the focus of development, we need to reduce all kinds of low-level errors, do not let some unnecessary code into our projects, most of the time we do not write code alone, but as a team, so the specification can make the team better collaboration.

The body of the

Configuring commit Specifications

cz-cli

npm install -g commitizen
Copy the code

Start by installing Commitizen globally and configure your project to be Commitizen-friendly

commitizen init cz-conventional-changelog --save-dev --save-exact// npm
commitizen init cz-conventional-changelog --yarn --dev --exact// yarn
Copy the code

Add it to package.json

 "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"}}Copy the code

Cz-xconventional – Changelog is the template for the COMMIT. Of course, the template can be customized. Please refer to the DOCUMENTATION of CZ-CLI for details, but you probably won’t read it either. Git cz is used to open Commitizen, or NPX cz if you don’t want to install it globally

The following tool generates a commit specification that looks something like this:

【 action 】 a few short words about what you have done: Details

npm install --save-dev @commitlint/config-conventional @commitlint/cli
Copy the code

commitlint

Committizen is a tool that generates a commit, and commitLint is a tool that checks whether the commit complies with the specification. After installation, add a configuration file commitlint.config.js to the commitlint configuration file. Used to determine which specification your commit will use.

module.exports = {extends: ['@commitlint/config-conventional']}
Copy the code

husky

Configure husky so that you can easily use git hooks to check whether the commit is successful after it has completed

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
Copy the code

A folder like this will appear in your project. Open commit-msg. Commitlint is then used to verify that your commit complies with the specification after you complete the commit. Finally add it to package.json

"prepare": "husky install",

Husky is automatically installed when someone pulls the latest code and NPM I

On Windows there is this problem github.com/typicode/hu…

Powershell is supposed to take the blame, so it’s best not to use Powershell.

Configure code specifications (use React TS as an example)

Eslint

npm install eslint --save-dev // Install ESLint, tsLint has been migrated to ESLint
npx eslint --init// The following content will appear, according to your needs
Copy the code

Don’t forget to add.eslintignore to your esLint

Prettier

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
Copy the code

.prettierrc

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

For more ignored requirements, add a. Prettierignore

eslint-plugin-prettier

Let Prettier be added to the eslintrc plugin as a plugin for ESLint

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier
Copy the code
{
  "plugins": ["prettier"],}Copy the code

eslint-config-prettier

After configuring the first two things, there is a problem. Eslint and Prettier both modify the format, so there must be conflict, so prettier’s document contains this tool to solve the problem

npm install --save-dev eslint-config-prettier
Copy the code

In the root directory. Eslintrc. Add a “extends” : the extend of js/” plugin: prettier/it”

{
  "extends": ["plugin:prettier/recommended"],
}
Copy the code

lint-staged

Use lint-stage to use ESLint to check the code you just submitted.

npx mrm@2 lint-staged
Copy the code

Add a lint-stage.config.js to the root directory

module.exports = {
  '*.{ts,tsx}': ['eslint --fix']};Copy the code

Cooperate with the husky

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

If I succeed in the picture aboveThe last eslintrc

module.exports = {
  env: {
    browser: true.es2021: true,},extends: [
    'plugin:react/recommended'.'google'.'plugin:prettier/recommended',].parser: '@typescript-eslint/parser'.parserOptions: {
    ecmaFeatures: {
      jsx: true,},ecmaVersion: 12.sourceType: 'module',},plugins: ['react'.'@typescript-eslint'.'prettier'].rules: {
    'prettier/prettier': 'error'.'no-unused-vars': 'off'.// Try adding this if there is a problem}};Copy the code