98. 使用 Husky 和 Commitizen 进行代码规范和提交规范
In team development, it is very important to maintain the consistency of the code and the standardization of the submission information. To achieve this, we can use two tools, Husky and Commitizen, to standardize the format of code and commit information.
What is Husky
Husky is a Git hook tool that can execute custom scripts at different stages of Git operations. With Husky, we can perform some operations before or after submitting the code, such as code style checking, unit testing, etc.
What is Commitizen
Commitizen is a tool for optimizing commit messages. It provides an interactive interface to guide developers to write submission information according to the specified specification. Using Commitizen can ensure that the format of the submission information is unified, and provide more meaningful information to facilitate communication and code review among team members.
Install and configure Husky
First, we need to install Husky in our project:
npm install husky --save-dev
After the installation is complete, package.jsonadd the following configuration to the project's file:
{
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}
In the above configuration, we pre-commitset the hook to run the command before committing lint-staged, and commit-msgthe hook to run commitlintthe command after writing the commit message.
Install and configure Commitizen
Next, we need to install Commitizen:
npm install commitizen --save-dev
After the installation is complete, execute the following command in the root directory of the project to initialize:
npx commitizen init cz-conventional-changelog --save-dev --save-exact
The above command will add a Commitizen configuration file to the project and format the submission information to conform to common specifications (such as Conventional Commits).
Using lint-staged and commitlint
In addition to Husky and Commitizen, we can also use lint-staged and commitlint to further standardize code and commit information.
Install lint-staged and commitlint:
npm install lint-staged commitlint --save-dev
package.jsonAdd the following configuration to the file :
{
"lint-staged": {
"*.js": [
"eslint --fix",
"git add"
]
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
}
}
In the above configuration, we use lint-staged to configure .jsthe code style check of the file and automatically fix errors. commitlint configures the specification of commit messages, using @commitlint/config-conventionalthe plugin.
Submit code and information
Now, we
You can use the command-line tools provided by Commitizen to submit code and information:
npx cz
After executing the above command, an interactive interface will appear to guide you to fill in the submission information. After filling in the information as required, the code submission can be completed.
sample code
The following is sample code showing how to use Husky and Commitizen for code specification and commit specification.
{
"name": "my-project",
"version": "1.0.0",
"scripts": {
"lint": "eslint src",
"test": "jest"
},
"devDependencies": {
"commitizen": "^4.2.4",
"husky": "^7.0.2",
"lint-staged": "^11.1.2",
"eslint": "^7.32.0",
"jest": "^27.4.7",
"commitlint": "^14.3.1",
"@commitlint/cli": "^14.3.1",
"@commitlint/config-conventional": "^14.3.1"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"git add"
]
},
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
}
}
I hope this article helps you understand how to use Husky and Commitizen for code specification and submission specification. By configuring and using these tools reasonably, we can establish a unified development process to ensure the quality and consistency of the team's code.