Writing in the front

Background: When you see a clear commit message in someone else’s project, look at your own. Vow every time that my commit message will be as clear as anyone else’s. As a result, when I did the project later, what were the qualified types? I don’t know what this submission is, so I’ll just write about it… In such cases, with tooltips and constraints, we are getting closer to a clear COMMIT message.

The most widely used version is the Angular specification. Both Angular and Vue use this specification to write commit messages.

commitlint

Commitlint is a commitlint that validates a COMMIT message. It is also possible (somewhat unwieldy) to generate a compliant COMMIT message using command-line interaction.

The official documentation

Install the configuration

Initialize git repository (if necessary)
git init
# Initialize package.json (if needed)
npm init -y
# initialize.gitignore (if required)
echo 'node_modules' > .gitignore
# Install commitLint development dependencies
npm install --save-dev @commitlint/config-conventional @commitlint/cli Git bash is available for Windows, MAC, and git bash
npm install --save-dev @commitlint/{cli,config-conventional} Git bash is available
Add a configuration file
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

# Install husky development dependencies
npm install --save-dev husky
Copy the code
// package.json
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"}}Copy the code

Commit to test

git add .
git commit -m 'xx' # bash failed to commitHusky > commit- MSG (node v12.17.0) ⧗ input: xx * subject may not be empty [subject-empty] *typeMay not be empty [type-empty] * Found 2 problems, 0 warnings ⓘ Gethelp: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

git commit -m 'xx: add index.html' # bash failed to commitHusky > commit- MSG (node v12.17.0) ⧗ input: xx: add index.htmltype must be one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] [type-enum]

✖   found 1 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky > commit-msg hook failed (add --no-verify to bypass)

git commit -m "chore: lint on commitmsg" Type: subject, commit succeeded. Notice the space after the type semicolon.Husky > pre-commit (node V10.1.0) No staged files match any of provided globs. Husky > commit-msg (node v10.1.0)Copy the code

Use command line interaction

Add development dependencies
npm install --save-dev @commitlint/prompt-cli
Copy the code
/ / modify package. Json
{
  "scripts": {
    "commit": "commit"}}Copy the code
# test
git add .
npm run commit The following command line interaction appears> [email protected] commit D:\gitee\ ZZZ > commit Please enter atype: [required] [tab-completion] [header]
<type> holds information about the goal of a change.
<type>(<scope>): <subject>
<body>
<footer>
100 characters left
98 characters left
❯ type: xx 

If you enter an incorrect type, you will be prompted.
Scope (optional), subject (required), body/footer (optional)
# Optional requires typing :skip to ignore this option. Enter :skip to omit scope.
A commit record is generated when all entries are enteredHusky > commit- MSG (node v12.17.0) [master f0ccbff] feat: success 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 a.txt# And he's stuck here. Can you believe it? I don't know why. Finally, I CTRL + C to exit and continue.
# 😭 Very difficult command line interaction
Copy the code

Commitlint prompt is really bad to use.

commitizen

Tools that help us write qualified Commit messages on the command line.

npm readme

Global installation test

# global install
npm install -g commitizen

# test
touch b.txt
git add .
cz  Git cz, git-cz, git-cz The following interactive command line appears. Use up four words, smooth and comfortable.[email protected], [email protected]? Select thetype of change that you're committing: (Use arrow keys)
? Select the type of change that you're committing: feat: A new feature ? What is the scope of this change (e.g. component or file name): (press enter t ? What is the scope of this change (e.g. component or file name): (press enter t ? Write a short, imperative tense description of the change (max 94 chars): ? Write a short, imperative tense description of the change (max 94 chars): (9) add b.txt ? Provide a longer description of the change: (press enter to skip) ? Provide a longer description of the change: (press enter to skip) ? Are there any breaking changes? (y/N) ? Are there any breaking changes? No ? Does this change affect any open issues? (y/N) ? Does this change affect any open issues? No husky > commit- MSG (node v12.17.0) [master f355771] feat: add b.txt 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 b.txtCopy the code

Local Installation and Configuration

# Local install
npm install --save-dev commitizen
# Install CZ-Xconventional - Changelog, automatically add configuration in package.json
./node_modules/.bin/commitizen init cz-conventional-changelog --save-dev 
The above two steps can be completed manually
npm i -D cz-conventional-changelog
"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"}}Copy the code
// package.json After adding commands to script, use NPM run commit. Git commit is still plain old information.
"scripts": {
  "commit": "cz"
}
Copy the code

Vscode commit to expand

The following two extensions help you write a qualified Commit message using graphical interaction.

git-commit-plugin

Features: One item for each type, (●’◡’●)

Usage:

  1. You can follow the extended instructions,F1Open thecommand, the inputshow git commit template. Then selecttype.
  2. Open thevscodeThe sidebarSOURCE CONTROL(On a par with file management, search, etc.) whenhoverinSOURCE CONTROLWhen there is a pen-shaped icon click to go to select Type…

Commit Message Editor

How to use :(the opening procedure is similar to git-commit-plugin 2)

  1. Open thevscodeThe sidebarSOURCE CONTROL(On a par with file management, search, etc.) whenhoverinSOURCE CONTROLClick on a pencil-shaped icon to enter the selectiontype.
  2. edit as text or edit as form

To compare

  1. commitlint Suitable for team work, standardize everyone’s COMMIT records.
  2. commitizenCommand line interaction is more consistent, but git commit can commit irregularities.
  3. vscode commitExtension:
    • git-commit-pluginsupporttypeIcon, clear and good-looking. But it needs to be donevscodeToolbar operation, a little trouble.
    • Commit Message EditorNot so fond of using 😭.

The above is only my opinion, welcome to exchange criticism. Curious, how do large open source projects standardize Commit Messages?

What do large open source projects use?

vue

Interactively generate a Commit message using the Commitizen command line. Custom scripts (regular matches) also validate commit messages written via git commit.

{
  "name": "vue"."version": "The 2.6.12"."sideEffects": false."scripts": {
    "lint": "eslint src scripts test"."commit": "git-cz"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"."commit-msg": "node scripts/verify-commit-msg.js"
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix"."git add"]},"devDependencies": {  
    "yorkie": "^ 2.0.0." "
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"}}}Copy the code

Related articles:

  1. Git engineering configuration commit specification from digging gold
  2. Commit message and Change log writing guide