【前端】代码Git提交规范之约定式提交和Commitizen简化提交流程

2,157 阅读4分钟

一、需求背景

在我们目前的前端项目中,我们采用 git 作为版本控制工具。使用 git 管理项目意味着我们经常需要提交代码。当我们执行 git commit -m "描述信息" 命令时,我们被要求提供一个描述信息。然而,由于每个人的理解和表达方式不同,提交信息的多样性有时会导致信息的模糊和不明确。

这不仅影响了代码的可追溯性,还可能隐藏潜在的风险。因此,为了提高团队的协作效率和代码质量,我们需要建立一套统一的提交规范,确保每次提交的信息都是清晰、一致且具有描述性的。那么该怎么规范呢?

二、解决方案

在现代软件开发实践中,定式提交规范(Conventional Commits)是一种流行的Git提交规范,它通过定义一系列的提交类型和格式,来指导开发者如何撰写提交信息。

1、约定式提交规范

约定式提交规范要求提交信息遵循以下格式:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]
  • 类型(Type) :表示提交的类型,如feat(新功能)、fix(修复)、docs(文档更新)等。
  • 范围(Scope,可选) :指定提交影响的代码模块或功能区域。
  • 描述(Description) :简短描述提交的内容。
  • 正文(Body,可选) :提供更详细的描述,如变更的原因、影响范围等。
  • 脚注(Footer,可选) :提供额外信息,如关联的issue编号、破壊性变更的标记等。

例如:

feat(login): Add login authorization feature

Update the login process to include enterprise authorization.

Closes issue #188.

要是每次都这么写提交描述,那可真的是要了老命,毕竟代码注释我们都懒得写这么多,接下来我们将一起解决这个问题!

2、使用Commitizen简化提交流程

为了简化约定式提交规范的遵循过程,开发者们创建了如Commitizen这样的工具。Commitizen(通常以cz-cli的形式存在)提供了一个命令git cz,它替代了传统的git commit命令。使用Commitizen时,它会引导开发者通过一系列问题来填写提交信息,确保提交信息符合规范。

使用Commitizen的好处包括:

  • 自动化:减少了手动填写提交信息的工作量,降低了出错的可能性。
  • 一致性:确保了团队成员提交的信息格式一致,便于阅读和理解。
  • 教育意义:对于新成员来说,Commitizen的问题引导有助于他们快速了解团队的提交规范。

如何使用Commitizen

要在项目中使用Commitizen,通常需要执行以下步骤:

1、安装Commitizen工具(cz-cli)。

npm install -g commitizen

2、安装 cz-customizable 插件,使用 npm 下载 cz-customizable

npm i cz-customizable --save-dev

3、修改 package.json 文件,添加以下内容

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

image-20240302230356446.png 4、在项目中初始化Commitizen,在项目根目录下创建 .cz-config.js 文件

module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:     新功能' },
    { value: 'fix', name: 'fix:      修复' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    {
      value: 'refactor',
      name: 'refactor: 重构(既不是增加feature,也不是修复bug)'
    },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     增加测试' },
    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:    打包' }
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交?(y/n/e/h)'
  },
  // 跳过步骤
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72
}

5、使用git cz命令代替git commit来提交代码。

那么到这里我们就已经可以使用git cz 来代替了 git commit 实现了规范化的提交诉求了,但是当前依然存在着一个问题,那就是我们必须要通过 git cz 指令才可以完成规范化提交!

那么如果有老六直接使用git commit提交了怎么办呢?