First of all,

In fact, sometimes I don’t want to write a blog, because I feel that what I write is learned from other articles, and the writing is not very deep, so there is no need to write. But thinking about this recently, and I’m writing this, and some of you are probably seeing this technology for the first time, this will give you an idea of what this is. You need to look up your own information if you want to go further.

The project address

husky

Husky improves your commits and more 🐶 woof!

You can use it to lint your commit messages, run tests, lint code, etc… when you commit or push. Husky supports all Git hooks.

To monitor your Git operations. Git commit: git commit: git commit: git commit: git commit

The installation

npm install husky --save-dev
Copy the code

script

Add this statement to the scripts of package.json file.

"prepare": "husky install",
Copy the code

perform

npm run prepare
Copy the code

The results of

The.husky/_ folder appears in the project along with the following files.

Lint-staged

Eslint lint formatting correction where prettier is used when listening to commit code.

The installation

npm install lint-staged --save-dev
Copy the code

package.json

The script to add

 "lint:lint-staged": "lint-staged",
Copy the code

Add in script

"lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write" ], "{! (package)*.json,*.code-snippets,.! (browserslist)*rc}": [ "prettier --write--parser json" ], "package.json": [ "prettier --write" ], "*.vue": [ "eslint --fix", "prettier --write" ], "*.{scss,less,styl,html}": [ "prettier --write" ], "*.md": [ "prettier --write" ] },Copy the code

.husky

Create a new pre-commit file in the. Husky folder

. "$(dirname "$0")/_/husky.sh"

[ -n "$CI" ] && exit 0

# Format and submit code according to lintstagedrc.js configuration
npm run lint:lint-staged
Copy the code

That $CI is the project continuous integration environment variable and can be deleted if it does not exist.

process

When we commit, husky will execute the pre-commit file -> execute NPM run lint:lint-staged ->

The contents of “Lint-staged” objects. There are Prettier and Eslint under this “Lint-staged” object so we’ll need to install them later.

Prettier

Specification validation of code styles.

The installation

npm install prettier --save-dev
Copy the code

prettier.config.js

Create a new prettier.config.js file under the “prettier.config.js” project.

module.exports = {
  "printWidth": 80.// Length per line (default 80)
  "tabWidth": 2.// How many Spaces per TAB (default: 2)
  "useTabs": false.// Whether to indent with TAB (default false)
  "singleQuote": true.// Use single quotes (default false)
  "semi": true.// Declaration ends with a semicolon (default true)
  "trailingComma": "all".// Use trailing commas for multiple lines (default none)
  "bracketSpacing": true.// Use Spaces between braces for object literals (default true)
  "jsxBracketSameLine": false.// In multi-line JSX, the > is placed at the end of the last line instead of starting on another line (default false)
  "arrowParens": "avoid" // Avoid parentheses for arrow functions with only one argument (default: avoid)
};
Copy the code

For other configurations, check the official website

.prettierignore

Create a. Prettierignore file under the project. Prettier Verifies a file that is ignored.

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*
Copy the code

ESLint

Code verification

The installation

npm install eslint --save-dev
Copy the code

run

npx eslint --init
Copy the code

The results of

The first step

  1. To check syntax only

    Check only syntax

  2. To check syntax and find problems

    Check syntax and look for errors

  3. To check syntax, find problems, and enforce code style

    Check syntax, look for errors, and enforce code style

Enter the second

The second step

What type of modules does your project use?

Template specification for project use

Choose the first one

The third step

Which framework does your project use?

Choose the frame you use

I choose Vue because I use Vue

The fourth step

Does your project use TypeScript?

Whether to enable TS

I just built a Vue3 + JS project so No

Step 5

Where does your code run?

What environment your code is running in. Browsers and Nodes

Select Browser

Step 6

What format do you want your config file to be in?

Type of the configuration file

I chose JS

Now whether to install the one just selected with NPM.

Select yes

The last

Some people may choose the third option in the first step, then there are a few more style choices. Code style and usage specifications.

If you want to learn about configuration items for ESLint, look no rules, No rules – know ESLint and Prettier inside out

Since I was using Vue3, there were some compilation problems so I made some changes.

module.exports = {
  env: {
    browser: true.es2021: true.node: true.'vue/setup-compiler-macros': true,},extends: ['eslint:recommended'.'plugin:vue/vue3-recommended'].parserOptions: {
    ecmaVersion: 'latest'.sourceType: 'module',},plugins: ['vue'].rules: {}};Copy the code

commitlint

When we commit to write some messages, this is to normalize our message structure. website

The installation

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

use

Create a new commit-msg in.husky

. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

Copy the code

Create commitlint.config.js in the project directory

Module. Exports = {hide: [commit => hide. Includes ('init')], // ignores information extends: ['@commitlint/ config-blank '], rules: {' text-leading-blank ': [2, 'always'], // text-leading-blank: ['@commitlint/ config-blank '], rules: {' text-leading-blank ': [2, 'always'], // text-leading-blank: [1, 'always'], // footer newline 'header-max-length': [2, 'always', 108], // header word count 'subject-empty': 'type-empty': [2, 'never'], 'subject-case': [0], 'type-enum': [2, 'always' [' feat, / / the new functions' fix', / / modify the bugs' perf ', / / performance optimization 'style', / / code structured modify 'docs', / / documentation and comments' test', // Test related 'refactor', // refactor' CI ', // continuous integration 'chore', // Dependencies update/scaffold configuration changes etc. 'Revert ', // Undo changes' wIP ', // Developing' Workflow ', // workflow 'types', // type definition file changes],],},};Copy the code

Disables the rule 1 = warning 2 = error

An assistive tool, Commitizen

The installation

npm install commitizen -D

npx commitizen init cz-conventional-changelog --save-dev --save-exact
Copy the code

Add to a script using package.json

"commit": "cz",
Copy the code

When you git add. finish, you can NPM run commit according to the steps to standardize your commit.

The end of the

Thank you to see the end, after all, I feel my own writing is not good, I hope to help you. Refer to the project below.

The project address

Refer to the article

Don’t Prettier without rules – Know ESLint and Prettier inside out