Vue3 practice – code submission standardization

husky

“This is the 11th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Various Lint tools can be used to constrain the team’s development specifications during collaborative team development

However, there is no guarantee that when team members submit their code, it will conform to the specification

Or we want automatic fixes for code that doesn’t conform to the specification

So how do you do this? Husky tools are available:

• Husky is a Git hook tool that triggers the various stages of git commit: pre-commit(before commit), commit-msg (while commit MSG), pre-push(commit local record to remote branch).

Here we can use the autoconfiguration command:

> npx husky-init && npm install
Copy the code

Three things will be done here:

1. Install Husky-related dependencies:

2. Create the.husky folder in the project directory:

3. Add a script to package.json: this script is automatically called internally when husky is working properly

Next, we need to do one operation: on commit, execute the Lint script:

"scripts": {
  // By default esLint can only detect and repair JS files
  // If you need to detect and repair other files, use --ext to manually specify the file suffix
	"lint": "eslint --fix --ext .js,.ts,.vue src"
}
Copy the code

Git commit will automatically validate your code.

Git commit specification

Code submission Style

Git commits are usually committed in a consistent style so that you can quickly locate each commit for later version control.

But if writing these manually every time is a hassle, we can use a tool: Commitizen

• Commitizen is a tool that helps us write normative Commit messages;

1. Install commitizen

#After installation, a tool cz will be generated in the. Bin directory
> npm install commitizen -D
Copy the code

2. Install AND initialize THE Z-Xconventional – Changelog:

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

This command will help us install CZ-Conventional – Changelog:

And configure it in package.json:

This time we need to submit code using NPX cz:

"scripts": {
  "commit": "cz"
}
Copy the code

• The first step is to select Type, the type of this update

• The second step is to select the scope of the change – which files have been changed

• Step 3 Choose the information to submit – the information to submit – with a word limit

• Step 4 Submit a detailed description – the information to be submitted – no word limit

• Step 5 is a major change – the default return is no

• Step 6 Whether to affect an open issue —- The default press enter is no

Code submission validation

What if we standardize the commit style according to CZ, but some colleagues still commit according to non-standard format through Git commit?

• We can restrict commits via commitlint;

1. Install @commitlint/ config-Conventional and @commitlint/ CLI

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

2. Create the commitlint.config.js file in the root directory and configure commitLint

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

3. Use husky to generate the commit-msg file and verify the commit information:

#.husky/< corresponding hook name > needs to be a Unix executable
#So if you create it manually, you need to execute chmod +x < file path (you can drag the file directly to the command line)>
#To manually convert files to Unix executables
> npx husky add .husky/commit-msg "npx --no-install commitlint --edit The $1"
Copy the code