Git commit 规范化提交指南

1、引言

在前端开发中，Git 作为版本控制系统，扮演着至关重要的角色。然而，仅仅使用 Git 进行版本控制是远远不够的，如何规范化地进行 Git 提交，使得项目的提交历史清晰、可读，并且能够快速地进行代码回滚、查找特定修改等，是每个前端开发者都需要掌握的技能。本文旨在提供一个前端 Git 规范化提交的指南，帮助大家更好地管理项目。如有错误，希望大佬能够指出，相互交流，以助萌新进步。

2、Git 提交信息的规范化

提交信息的规范化是 Git 提交规范化的核心。以下是一个建议的提交信息格式：

sh 复制代码

<type>(<scope>): <subject>  
  
<body>  
  
<footer>

type：提交类型，用于标识提交的性质。常用的类型有：
- feat：新功能（feature）
- fix：修补缺陷（bug fix）
- docs：文档（documentation）
- style：格式（不影响代码逻辑的变动）
- refactor：重构（即不是新增功能，也不是修改缺陷的代码改动）
- test：增加测试
- chore：构建过程或辅助工具的变动
- revert：回滚某个更早之前的提交
- merge：合并分支
注意：类型应该使用小写。
scope：可选的，用于标识提交影响的范围。例如，某个特定的模块、组件等。
subject：简短的描述，不超过 50 个字符，用来说明本次提交的目的。
body：可选的，更详细的描述，用于解释提交的内容和理由。如果 body 存在，它应该有一个空行与 subject 分隔。
footer：可选的，用于标识不兼容的变动、关闭的 issue、关联的 PR 等。

3、 Commitizen

Commitizen 是一个帮助我们编写规范 commit message 的工具；

3.1、代码提交风格

1.安装Commitizen

sh 复制代码

npm install commitizen -D

2.安装cz-conventional-changelog，并且初始化cz-conventional-changelog：

sh 复制代码

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

3.在package.json文件中配置

json 复制代码

"config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" } }

这个时候我们提交代码需要使用 npx cz：

第一步是选择type，本次更新的类型

Type	作用
feat	新增特性 (feature)
fix	修复 Bug(bug fix)
docs	修改文档 (documentation)
style	代码格式修改(white-space, formatting, missing semi colons, etc)
refactor	代码重构(refactor)
perf	改善性能(A code change that improves performance)
test	测试(when adding missing tests)
build	变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci	更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
chore	变更构建流程或辅助工具(比如更改测试环境)
revert	代码回退

第二步选择本次修改的范围（作用域）

第三步选择提交的信息

第四步提交详细的描述信息

第五步是否是一次重大的更改

第六步是否影响某个open issue

我们也可以在scripts中构建一个命令来执行 cz：npm run commit

3.2、代码提交验证

如果我们按照cz来规范了提交风格，但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢？

我们可以通过commitlint来限制提交；

1.安装 @commitlint/config-conventional 和 @commitlint/cli

sh 复制代码

npm i @commitlint/config-conventional @commitlint/cli -D

2.在根目录创建commitlint.config.js文件，配置commitlint

js 复制代码

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

3.使用husky生成commit-msg文件，验证提交信息：

sh 复制代码

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

4、cz-customizable

如果想自定义项目的提交说明 ，可以使用cz-customizable：

sh 复制代码

npm install cz-customizable -D

将之前符合Angular规范的cz-conventional-changelog 适配器路径改成cz-customizable适配器路径：

json 复制代码

"config": { 
    "commitizen": { 
       "path": "./node_modules/cz-customizable" 
     } 
}

新建.cz-config.js文件，进行如下配置：

如下配置已省略一些配置，完整的配置项可点击查看

js 复制代码

module.exports = {
  types: [
    { value: 'init', name: 'init:     初始提交' },
    { value: 'feat', name: 'feat:     新特性、新功能' },
    { value: 'fix', name: 'fix:      修复bug' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    样式修改不影响逻辑' },
    { value: 'perf', name: 'perf:     优化相关，比如提升性能、体验' },
    { value: 'refactor', name: 'refactor: 代码重构' },
    { value: 'test', name: 'test:     添加测试' },
    { value: 'chore', name: 'chore:    更改配置文件' },
    {
      value: 'build',
      name: 'build:    编译相关的修改，例如发布版本、对项目构建或者依赖的改动'
    },
    { value: 'ci', name: 'ci:       持续集成修改' },
    { value: 'revert', name: 'revert:   回滚到上一个版本' },
    { value: 'merge', name: 'merge:    合并其他分支代码' }
  ],
  messages: {
    type: '选择一种你的提交类型:',
    scope: '选择一个scope (可选):',
    // 如果allowcustomscopes为true，则使用
    customScope: '请输入修改范围(可选):',
    subject: '请输入简要描述(必填):',
    body: '详细描述. 使用"|"换行:\n',
    breaking: 'Breaking Changes列表:\n',
    footer: '关闭的issues列表. E.g.: #31, #34:\n',
    confirmCommit: '确认提交?'
  },
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  skipQuestions: ['breaking', 'footer'] // 跳过'breaking', 'footer'这两步
};

在配置到这一步时，执行npm run commit，你会发现在上面配置的customScope: '请输入修改范围(可选):'这一步会被跳过，如下图所示：

这时候就需要修改package.json文件中的配置了

json 复制代码

"commit": "node_modules/cz-customizable/standalone.js",

这时候再执行npm run commit，如下：

自此 Git 规范化提交配置完毕