A, about.editorconfigConfiguration of (unified editor style)

  • 1. Why editorConfig

    To keep the same code style across editors, for example, if you develop an editor with vscode and set the indent to 2 characters, and your colleague develops an editor with vscode and set the indent to 4 characters, you will have different space indentation when you are working on the same project

  • 2, create a. Editorconfig file in the root directory of the project, refer to the configuration code for more configuration click here

    # http://editorconfig.org
root = true

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

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab
Copy the code

  • 3. When you have a. Editorconfig file under your project, your enter will automatically indent the newline with 2 characters

  • 4, vscode also has editorconfig plugin, when you configure this in the project, according to the principle of proximity, directly use the project configuration, not the editor configuration

Second,PrettierConfiguration (unified project style)

  • 1. Installation method

    • Editor plug-in installation (not recommended)
    • In-project Installation

  • 2. Install in the project code

    npm install prettier -D
Copy the code

  • 3, Create a file in the root directory of the project prettierrc More configuration reference

    {
	"prettier.semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": In 100,
  "tabWidth": 2,
  "endOfLine": "auto",
  "arrowParens": "avoid"
}
Copy the code

  • 4. Execute the command to format the code

    prettier --write **.js
Copy the code

  • 5, please refer to the official installation steps, official address

Three,eslintConfiguration of (improve code quality)

  • 1. Install ESLint

    npm install eslint -D
Copy the code

  • 2. Initialize the ESLint configuration file and select it based on your project requirements

    npx eslint --init
Copy the code

  • 3. Another way to configure ESLint

    • Enter keywords directly into the NPM repository to search for the most downloaded

  • 4. React installs ESLint by default and does not need to be configured

  • 5, The official address of Prettier where a package is installed to use ESLint and Prettier

  • Json file to override esLint’s rules with part of prettier’s rules

"eslintConfig": {
    "extends": [
      "react-app"."react-app/jest"."prettier"]},Copy the code

Four, aboutstylelintThe use of (constraint style)

  • 1. Official website address and installation method

    npm install --save-dev stylelint stylelint-config-standard
Copy the code

  • 2. Create a file in the root directory of the project

    {
  "extends": ["stylelint-config-standard"],
  "rules": {
  	.
  }
}
Copy the code

  • 3. You can select the reference address for the configuration rule

  • 4. Configure the script in package.json

    ."scripts": {..."stylelint:fix": "stylelint src/**/*.less --fix". }...Copy the code

Five, another installation method

  • 1. Reference address
  • 2. Installation method 
    npx mrm lint-staged
Copy the code
  • 3, inpackage.jsonIn the configuration 
      "husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
  }
Copy the code
  • 4. Commit to test if code formatting is used

Six, aboutgitSubmit specifications

  • 1. Reference address
  • 2. Use steps 
    Install dependencies
npm install --save-dev @commitlint/config-conventional @commitlint/cli

# Configure commitlint to use conventional config
Generate a file
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
# Generate an error message automatically
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Copy the code

Seven, I would like to add a point abouthuskyAnother installation step of the

  • 1. Install Husky in the project

    npm install husky -D
Copy the code

  • 2. If you don’t want to install globally, configure commands in package.json or use NPX directly

    ."scripts": {
  "husky": "husky install"}...Copy the code

  • Initialize husky

    npm run husky
Do not configure the operation mode of step 2
npx husky install
Copy the code

    A directory is created under the root of the project

    .husky
├ ─ ─ _
│   └ ─ ─ husky. Sh
└ ─ ─ pre-commit

1 directory, 1 files
Copy the code

  • 4. Configure the submitted hook reference documentation or the official website

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

  • 5. Create the commitlint.config.js file in the root directory of the project

    module.exports = {
  extends: ['@commitlint/config-conventional'].rules: {
    'type-enum': [
      2.'always'['upd'.'feat'.'fix'.'docs'.'style'.'refactor'.'test'.'chore']],}};Upd: / https://segmentfault.com/a/1190000017790694 * * * * update * feat: new * fix: fix * docs: document * style: the style * refactor: Refactoring code * test: unit tests * chore: Changes to the build process or helper tools */
Copy the code

  • 6. Generate the commit- MSG file

    npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
Copy the code
    #! /bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1
Copy the code

  • 7. It is recommended that the. Gitignore file in. Husky be deleted

  • 8. Install Lint-staged packages

    npm install lint-staged -D
Copy the code

  • 9. Configure in package.json

    "scripts": {..."lint-staged": "lint-staged". },"lint-staged": {
  "**/*.{ts,tsx}": [
    "prettier --write"."npm run eslint"."git add"]."**/*.less": "npm run stylelint:fix"
},
Copy the code

  • 10. Modify the.husky/pre-commit file to have lint-staged execution

    #! /bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run lint-staged
Copy the code

  • 11. Code formatting verification is performed every time the code is submitted

    git Commit -m 'fix: fix bug'
Copy the code