大型项目中的Commit Message规范化控制实现

为什么要对git commit进行规范化。

Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。

git commit -m "hello world"

上面代码的-m参数，就是用来指定 commit mesage 的。

如果一行不够，可以只执行git commit，就会跳出文本编辑器，让你写多行。

git commit

基本上，你写什么都行。

但是，一般来说，commit message 应该清晰明了，说明本次提交的目的。

目前，社区有多种 Commit message 的写法规范，较为流行的还是Angular规范。

格式化Commit message的好处。

1、可以提供更多的历史信息，方便快速浏览git log --pretty=format:"%an - %s"。

2、可以过滤某些commit（比如新增功能），便于快速查找信息git log --grep feat。

3、使用工具conventional-changelog可以直接从commit生成Change log。

一、实现Commit Message格式化

在项目中安装commitizen及commitizen脚手架工具。

npm install -D commitizen cz-customizable

全局安装commitizen，这样通过commitizen提供的命令在package.json文件中生成相应配置内容。

npm install -g commitizen

然后，在项目目录里，运行下面的命令，使其支持 Angular 的 Commit message 格式。

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

将配置修改为如下内容。

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

新建cz-config.js，可以使用如下代码，也可参考官方示例：

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

module.exports = {
    
  types: [
    {
     value: 'feat', name: 'feat: 开发新功能。' },
    {
     value: 'fix', name: 'fix: 修复bug，需在脚注中注明bug号。' },
    {
     value: 'docs', name: 'docs: 文档修改。' },
    {
     value: 'style', name: 'style: 格式化代码或不会产生任何影响。' },
    {
    
      value: 'refactor',
      name: 'refactor: 既不修复bug也不添加特性的代码更改'
    },
    {
     value: 'perf', name: 'perf: 提高性能的代码更改。' },
    {
     value: 'test', name: 'test: 添加缺失的测试。' },
    {
     value: 'chore', name: 'chore: 对构建过程或辅助工具和库的更改。' },
    {
     value: 'revert', name: 'revert: 恢复到提交。' },
    {
     value: 'WIP', name: 'WIP: 正在进行中。' }
  ],

  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
}

以后，凡是用到git commit命令，一律改为使用git cz。这时就会shell命令交互的形式选择对应的信息来生成符合格式要求的 Commit message。

二、验证Commit Message格式是否符合要求

版本提交命令既可以用git commit也可以使用新增的git cz命令，根据git cz交互命令的提示我们可以很简单的生成符合Commit message合格式要求的提交请求，当然可以继续使用git commit进行版本提交的，但是我们会阻止不符合Commit message合格式要求的提交请求。

所以，接下来我们需要通过git hooks中的commit-msg配合commitlint实现对不符Commit message合格式要求的提交请求进行拦截。

首先在项目中安装commitlint相关工具。

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

在根目录下执行如下命令，生成commitlint配置文件。

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

修改commitlint.config.js文件，添加对应规则。

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

三、阻止不符合格式要求的Commit

安装git hooks管理工具husky，并生成相应文件。

相关配置文件及内容可以参考huskyGitHub仓库相关配置。

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

npm install husky --save-dev
npx husky install

添加commit-msghooks文件。

npx husky  add .husky/commit-msg

并写入如下内容。

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

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

四、提交代码的同时根据编码规范格式化代码

lint-staged配合git hooks可实现在代码提交之前进行格式化。不过需要EsLint及Prettier等编码规范相关的工具配合。

npm install --save-dev lint-staged

在package.json文件中加入如下内容。

如果是Vue项目，我们可以将格式化工具修改为vue-cli-service，或其他格式化程序。

格式化之后的程序应加入到缓存去，因此最后也应该执行git add。

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

新增git hooks文件pre-commit。

npx husky  add .husky/pre-commit

并写入如下内容。

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

npx lint-staged

至此我们就已经实现了，在进行代码提交时对Commit Message的格式校验及编码规范验证及修复。

参考文章：

Commit message 和 Change log 编写指南 - 阮一峰的网络日志

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

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

五、往期内容已全部收录在专栏中：

git专栏_WEB前端李志杰的博客-CSDN博客

Flutter专栏_WEB前端李志杰的博客-CSDN博客

Vue专栏_WEB前端李志杰的博客-CSDN博客