前端工程化-Git代码提交规范解决方案

子禛
735 阅读6分钟

🫡HI大家好：我是子禛。 😊😊😊 在企业团队合作项目中，当项目人员足够多时。我们常常会发现仓库中代码提交的方式千奇百怪，这样会导致如下问题。

  • 这样当我们需要对项目进行回滚时，没有办法很好的去确定需要回滚的节点。
  • 项目提交信息不规范、不统一，在仓库上看着很难看，不能直接明确要点，无法明确知道仓库代码的变更情况。

那么我们应该如何解决这些问题呢？统一规范'是关键。

  • 公司内部可以通过讨论自定义一个规范。
  • 使用现有认知度广泛的规范

首先我们来看看图片

image.png

这个是React的GitHub仓库，我们可以看到每个文件、文件夹都有自己的说明。我们可以看到一些关键字如fix、build等关键词。他们到底是什么意思呢？下面我们来学习Angular规范

#Angular规范

Angular规范是，angularJS开发组定义的一套关于git代码提交规范，目的是为了增加git仓库的代码可维护性，以及美观度。

结构

Angular提交规范的格式包括Header、Body和Footer三个内容。Header为必填项，Body与Footer为可缺省项，这些内容通过以下结构组成一个完整的提交格式。

<type>(<scope>): <subject>
# 空一行
<body>
# 空一行
<footer>

Header

该部分仅书写一行，包括三个字段，分别是type、scope和subject。

  • type：用于说明commit的提交类型，必选
  • scope：用于说明commit的影响范围，可选
  • subject：用于说明commit的细节描述，可选

type

type用于说明commit的提交类型，包括以下选项，相信这些选项已满足日常大部分的应用场景。

  • 如果没有工程化需求的可以记忆一些常用的。
  • 对于有工程化要求的，当然这些选项无需刻意记忆，我会引入命令自动完成这些提交工作。
类型功能描述
feat新增功能迭代项目需求
fix修复缺陷修复上一版本存在问题
docs样式不影响代码逻辑
style修复缺陷修复上一版本存在问题
refactor重构代码非新增功能也非修复缺陷
perf优化性能提高代码执行性能
test新增测试追加测试用例验证代码
build更新构建改动构建工具或外部依赖
chore变动事务改动其他不影响代码的事务
revert合并分支合并分支代码到其他分支
sync同步分支同步分支代码到其他分支
impr改进功能升级当前功能模块

学习了上面的我们来看一个例子

scope && subject

scope用于说明commit的影响范围。简要说明本次改动的影响范围，例如根据功能可划分为数据层、视图层和控制层，根据交互可划分为组件、布局、流程、视图和页面。从Angular以往的提交说明来看，还是建议你在提交时对scope补全。

例如本次修改了login的登录页面，那么我们的scope可以写为login.tsx

subject用于说明commit的细节描述。文字一定要精简精炼，无需太多备注，因为Body部分可备注更多细节，同时尽量遵循以下规则。

  • 以动词开头
  • 使用第一人称现在时
  • 首个字母不能大写
  • 结尾不能存在句号(.)

# 可以精确到单一文件，可以直接写单一文件名
style(login.jsx): 修改登录页面样式 

# 对于范围修改，可以描述一个范围
feat(view) : 新增导出按钮

当然这些scope可以自行定义，公司内部可以进行集中讨论，形成一个比较完整的体系，对于单个文件，局部修改，全局修改等方面做出明确的规范，这样能够很好的统一风格，增强效率。

Body

该部分可书写多行，对subject做更详尽的描述，内容应包括改动动机与改动前后对比。

Footer

主要用用于结论的表达，该部分只适用两种情况，分别是不兼容变动与问题关闭。

  • 不兼容变动：当前代码与上一版本不兼容，则以BREAKING CHANGE开头，关联变动描述、变动理由和迁移方法
  • 问题关闭：当前代码已修复某些Issue，则以Closes开头，关联目标Issue

例子


git commit -m "feat(requisition文件夹): 完成资产领用新增和查询功能" -m "目前只完成了新增修改内容，对于详细信息正在开发中 -m 暂时关闭issue xx"



git commit -m "新增功能(requisition文件夹): 完成资产领用新增和查询功能" -m "目前只完成了新增修改内容，对于详细信息正在开发中 -m 暂时关闭issue xx"

上面的例子我们书写了一行commit信息。我们可以看一下

  • feat说明了是新增功能
  • ()说明了影响范围
  • : 后描述了核心信息
  • body : 描述了详细信息
  • footer：由于更改而产生的影响

上面的例子，基本算是一个比较ok的样例，大家可以根据自己的语言进行组织。当然对于type而言，也可以公司或组织内部内定，对现有的进行拓展。毕竟这些都是工具，是为了让我们更好的从事社会生产活动。

Git格式化提交解决方案

在说明Angular提交规范后，我们可以每次进行比较标准的git代码提交。但是这个时候，我们想通过工程化来帮助我们，减轻每次提交时的负担。我这里推荐一个工具commitizen。因为当前目标还要通过工具生成与约束提交说明，而commitizen是一个基于模板驱动的约束规范工具，可扩展性很强，因此推荐使用commitizen。

安装(推荐局部安装)

  • 全局

全局安装commitizen与cz-conventional-changelog。

npm i -g commitizen cz-conventional-changelog

不同系统中创建.czrc文件，具体情况如下，加入以下内容。

  • Windows系统：在C:/Users/$USER目录中创建.czrc文件
  • MacOS系统：在~目录中创建.czrc文件
  • 局部

局部部署

局部安装commitizen与cz-conventional-changelog。

npm i -D commitizen cz-conventional-changelog

在package.json中指定scripts与config。

{

  "script": {

      "commit": "git-cz"

  },

  "config": {

      "commitizen": {
        "path": "cz-conventional-changelog"
        // "path": "cz-conventional-changelog"
      }

  }

}`

点击查看源码。

使用上述两种方式配置好commitizen，就能使用git cz或npm run commit或者yarn commit代替git commit了，依次完成所有步骤就能规范地提交了。

当然这里建议搭建使用vscode的中的git bash命令工具，方便我们直接git add .后执行yarn commit的操作

image.png

image.png 会有以上的一些操作，这里的英文相对简单，这里我就不做过多的翻译了。但是如果我们想要一份中文的提交提示如何实现呢？

自定义中文提交规范

可能Angular提交规范的某些情况不适合当前需求，可通过cz-customizable制定一份符合自己团队的提交规范。

基于上述全局部署与局部部署，以下配置也有些许不同。

对于全局部署，全局安装cz-customizable，在.czrc中重新指定path。

npm i -g cz-customizable 

{ "path": "cz-customizable" }

对于局部部署，局部安装cz-customizable，在package.json中重新指定config。

npm i -D cz-customizable 

{

  "config": {

    "commitizen": {
  
      "path": "cz-customizable"
  
    }

  }

}

不同系统中创建.cz-config.js文件，具体情况如下，制定一份符合自己团队的提交规范。为了方便理解，我将原来英文版的commit type改成中文版的commit type并增加几个type。

  • 在Windows系统全局部署：在C:/Users/$USER目录中创建.cz-config.js文件
  • 在MacOS系统中全局部署：再~目录中创建.cz-config.js文件
  • 在项目中局部部署：在根目录中创建.cz-config.js文件
//`.cz-config.js`文件

module.exports = {
	allowBreakingChanges: ["feat", "fix"],
	allowCustomScopes: true,
	scopes: [],
	types: [{
		name: "功能：新增功能 (feat)",
		value: "feat"
	}, {
		name: "修复：修复缺陷(fix)",
		value: "fix"
	}, {
		name: "文档：更新文档 (docs)",
		value: "docs"
	}, {
		name: "样式：变动格式 (style)",
		value: "style"
	},]
};

这个标准大家可以通过公司内部讨论来试下，大家自行配置。

image.png

这里把文件内容复制过去，就可以了。但是在这里需要看一下自己的package.json文件的type是否为module，如果是module有两种方法。删除type:"nodule"或者将.cz-config.js文件名改为.cz-config.cjs

完成上述内容后运行yarn commit命令，即可出现下面的内容。

image.png

总结

目前最流行的代码提交规范是Angular提交规范，使用commitizen来实现统一的自动化提交，并通过给cz-customizable来进行提交信息的自定义。

avatar
文章
阅读
粉丝