1. Required dependency packages

  • lint-staged[> = 10]link
  • husky [^ 7.0.4] link
  • commitlint [ “@commitlint/cli”: “^16.0.1″,”@commitlint/config-conventional”: “^16.0.0”, ] link
  • eslint [^ 8.6.0] link
  • prettier [ 2.5.1 ] link

1. lint-staged

A tool that only filters out Git code staging files (files added by Git) without making any code or format changes.

2. husky

Git hooks that execute at specific times at different stages of Git (commit, push, receive).

3. commitlint

Commitlint checks that your commit messages conform to traditional commit formats.

4. eslint

ESLint is a tool for identifying and reporting patterns found in ECMAScript/JavaScript code with the goal of making code more consistent and avoiding errors.

5. prettier

Code formatting.

Prettier uses Prettier in three ways:

  • Method 1: Install the editor plug-in and configure it in the editor to use it: Details
  • Method 2: Install the official CLI tool and run the commands provided by the CLI tool
  • Method 3: Programming: Some of the modules or methods that Prettier exposes by calling the NPM package Prettier (it should be noted that Prettier also supports formatting code on the browser side

Mode 1: CooperateVScodeEditor use

There are two ways to change the code format in VScode:

  • Directly modifyingVSCodethesettings.jsonFile. Modification mode: Shortcut key to enter,command + pThen enter>To enter the command search mode, enter:Settings(JSON), directly modify.
  • Prettier+ customsettings.json. Modification method: Step 1VSCodeThe installationPrettierPlug-in, step 2 project root directory creation.vscode/settings.jsonTo override the modification.

VSCode settings.json file to adjust the formatting of the project code (link to the official configuration file).

Example: configuration file. vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript|react]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
Copy the code

Ii. Project training

1. eslintThe installation

Install ESLint

yarn add eslint --dev
Copy the code

Set up an esLint configuration file. Eslintrc.js

yarn run eslint --init
Copy the code

The.eslintrc.js configuration file is as follows:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "single"]
    }
};
Copy the code

Checks whether esLint validations are in effect

Open the project SRC /index.js file and add a single quote print with a red alert. Eslint effect.

2. prettierThe installation

Formatting code

Install the prettier

yarn add prettier -D
Copy the code

Prettierrc Configuration file

echo {}> .prettierrc
Copy the code

Prettierrc An empty. Prettierrc configuration file generated after the preceding command is executed. Refer to the documentation to add rules as follows:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}
Copy the code

Adding the. Prettierignore configuration file

# Ignore artifacts:
dist
node_modules
yarn.lock

# Ignore all HTML files:
*.html
Copy the code

NPX prettier –write. Note: NPX prettier –write. Observe the changes in the SRC /index.js file.

3. huskyThe installation

Introduce git hook functionality

Install the husky

yarn add husky -D
Copy the code

Edit package.json > Prepare the script and run it once:

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

Json file and insert “prepare”: “husky install”

4. commitlintThe installation

Verify git commit information

Install commitlint

yarn add @commitlint/{config-conventional,cli} -D
Copy the code

Add the commitlint.config.js configuration file and refer to the documentation to add the rules as follows:

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

The configuration is as follows: Complete reference configuration link

module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [ 2, 'always', [ 'build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test', ], ], }};Copy the code

Add the hook to the husky

yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
Copy the code

5. lint-stagedThe installation

The quickest way to get started with Lint-staged projects is to run the following command from a terminal:

npx mrm@2 lint-staged
Copy the code