Implementation of commit message standardized control in large projects

Why is it right git commit Standardize .

Git Every time code is submitted , Write everything Commit message（ Submit instructions ）, Otherwise, submission is not allowed .

git commit -m "hello world"

Code above -m Parameters , It's used to designate commit mesage Of .

If one line is not enough , You can only execute git commit, Will jump out of the text editor , Let you write multiple lines .

git commit

Basically , You can write anything .

however , Generally speaking ,commit message It should be clear , State the purpose of this submission .

at present , There are many kinds of communities Commit message The writing standard of , More popular or Angular standard .

format Commit message The benefits of .

1、 Can provide more historical information , Easy and quick browsing git log --pretty=format:"%an - %s".

2、 It can filter some commit（ For example, new functions ）, Easy to find information quickly git log --grep feat.

3、 Using tools conventional-changelog Can be directly from commit Generate Change log.

One 、 Realization Commit Message format

Install... In the project commitizen And commitizen Scaffold tools .

npm install -D commitizen cz-customizable

Global installation commitizen, This way commitizen The commands provided are in package.json Generate corresponding configuration contents in the file .

npm install -g commitizen

then , In the project catalog , Run the following command , To support Angular Of Commit message Format .

commitizen init cz-conventional-changelog --save --save-exact

Change the configuration to the following .

// package.json
// ……
"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  },
  "cz-customizable": {
    "config": "cz-config.js"
  }
}
// ……

newly build cz-config.js, You can use the following code , Also refer to official examples ：

cz-customizable/cz-config-EXAMPLE.js at master · leoforfree/cz-customizable · GitHub

module.exports = {
    
  types: [
    {
     value: 'feat', name: 'feat:  Develop new features .' },
    {
     value: 'fix', name: 'fix:  Repair bug, Note in the footnote bug Number .' },
    {
     value: 'docs', name: 'docs:  Document revision .' },
    {
     value: 'style', name: 'style:  Formatting code or does not have any effect .' },
    {
    
      value: 'refactor',
      name: 'refactor:  Neither repair bug Code changes that do not add features '
    },
    {
     value: 'perf', name: 'perf:  Code changes to improve performance .' },
    {
     value: 'test', name: 'test:  Add missing tests .' },
    {
     value: 'chore', name: 'chore:  Changes to the build process or auxiliary tools and Libraries .' },
    {
     value: 'revert', name: 'revert:  Revert to commit .' },
    {
     value: 'WIP', name: 'WIP:  In progress .' }
  ],

  messages: {
    
    type: "Select the type of change that you're committing:",
    scope: '\nDenote the SCOPE of this change (optional):',
    customScope: 'Denote the SCOPE of this change:',
    subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
    body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
    breaking: 'List any BREAKING CHANGES (optional):\n',
    footer:
      'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n',
    confirmCommit: 'Are you sure you want to proceed with the commit above?'
  },

  allowCustomScopes: true,
  skipQuestions: ['body'],
  subjectLimit: 100
}

in the future , All use git commit command , Use... Instead git cz. And then shell Select the corresponding information in the form of command interaction to generate Commit message.

Two 、 verification Commit Message Whether the format meets the requirements

The version commit command can be used either git commit You can also use the new git cz command , according to git cz The prompt of the interactive command can be easily generated to conform to Commit message Submission request that meets the format requirements , Of course, you can continue to use git commit For version submission , But we will prevent non-compliance Commit message Submission request that meets the format requirements .

therefore , Next we need to pass git hooks Medium commit-msg coordination commitlint Realize the mismatch Commit message Intercept the submission request that meets the format requirements .

First install... In the project commitlint Related tools .

npm install --save-dev @commitlint/config-conventional @commitlint/cli

Execute the following command in the root directory , Generate commitlint The configuration file .

echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

modify commitlint.config.js file , Add corresponding rule .

module.exports = {
    
  extends: ['@commitlint/config-conventional'],
  rules: {
    
    'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'WIP']],
    'subject-case': [0],
  },
};

3、 ... and 、 Block those that do not meet the format requirements Commit

install git hooks Management tools husky, And generate corresponding files .

Relevant configuration files and contents can be referred to huskyGitHub Warehouse related configuration .

GitHub - typicode/husky: Git hooks made easy woof!

npm install husky --save-dev
npx husky install

add to commit-msghooks file .

npx husky  add .husky/commit-msg

And write the following .

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

npx --no -- commitlint --edit ${1}

Four 、 Format the code according to the coding specification while submitting the code

lint-staged coordination git hooks You can format the code before it is submitted . But I need EsLint And Prettier And other coding specification related tools .

npm install --save-dev lint-staged

stay package.json Add the following to the document .

If it is Vue project , We can change the formatting tool to vue-cli-service, Or other formatter .

The formatted program should be added to the cache , Therefore, it should also be implemented in the end git add.

// package.json
// ……
"lint-staged": {
    "src/**/*.{js,ts,tsx,vue,css,scss}": [
      "npm run lint",
      "npm run format",
      "git add"
    ]
  },
// ……

newly added git hooks file pre-commit.

npx husky  add .husky/pre-commit

And write the following .

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

npx lint-staged

So far, we have realized , When code submission is made, the Commit Message Format verification and coding specification verification and repair .

Reference article ：

Commit message and Change log Write a guide - Ruan Yifeng's Weblog

GitHub - ht1131589588/commitlint-cli: a cli for create commitlint at program

GitHub - typicode/husky: Git hooks made easy woof!

5、 ... and 、 All previous contents have been included in the column ：

git special column _WEB Front end Li Zhijie's blog -CSDN Blog

Flutter special column _WEB Front end Li Zhijie's blog -CSDN Blog

Vue special column _WEB Front end Li Zhijie's blog -CSDN Blog