首页 > 其他分享 >【转】前端 commit 规范

【转】前端 commit 规范

时间:2023-08-28 11:22:09浏览次数:38  
标签:Git 前端 规范 cz 复制 提交 husky commit 代码

【转】前端 commit 规范 

什么是约定式提交

约定式提交(Conventional Commits)是一种用于代码版本控制的规范,旨在通过明确和标准化提交信息来提高代码协作质量和效率。其基本原则是通过规定提交信息的结构和语义来提高代码版本控制的可读性、可维护性和自动化程度。

约定式提交规范通常要求提交信息包括一个描述性的"类型"、一个可选的"作用域"、一个用于简洁说明的"主题",以及可选的"正文"和"尾部"等组成部分。这些组成部分的格式和语义都是根据规范要求进行约定的,比如使用"feat"来表示新功能、"fix"表示修复错误、"docs"表示文档变更等。

通过遵循约定式提交规范,开发人员可以更容易地理解和管理代码的变更历史,同时也为自动化工具提供了更多可靠的信息,例如自动生成版本号、发布日志和代码库更新等操作。

提交说明的结构如下所示:


原文:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]
复制代码

译文:

<类型>[可选 范围]: <描述>

[可选 正文]

[可选 脚注]
复制代码

提交说明包含了下面的结构化元素,以向类库使用者表明其意图:

  1. fix: 类型 为 fix 的提交表示在代码库中修复了一个 bug(这和语义化版本中的 `PATCH`[1] 相对应)。
  2. feat: 类型 为 feat 的提交表示在代码库中新增了一个功能(这和语义化版本中的 `MINOR`[2] 相对应)。
  3. BREAKING CHANGE: 在脚注中包含 BREAKING CHANGE: 或 <类型>(范围) 后面有一个 ! 的提交,表示引入了破坏性 API 变更(这和语义化版本中的 `MAJOR`[3] 相对应)。破坏性变更可以是任意 类型 提交的一部分。
  4. 除 fix: 和 feat: 之外,也可以使用其它提交 类型 ,例如 \@commitlint/config-conventional[4](基于 Angular 约定[5])中推荐的 build:chore:、 ci:docs:style:refactor:perf:test:,等等。
  5. 脚注中除了 BREAKING CHANGE: <description> ,其它条目应该采用类似 git trailer format[6] 这样的惯例。

其它提交类型在约定式提交规范中并没有强制限制,并且在语义化版本中没有隐式影响(除非它们包含 BREAKING CHANGE)。可以为提交类型添加一个围在圆括号内的范围,以为其提供额外的上下文信息。例如 feat(parser): adds ability to parse arrays.

示例

包含了描述并且脚注中有破坏性变更的提交说明

feat: allow provided config object to extend other configs

BREAKING CHANGE: `extends` key in config file is now used for extending other config files
复制代码

包含了 ! 字符以提醒注意破坏性变更的提交说明

feat!: send an email to the customer when a product is shipped
复制代码

包含了范围和破坏性变更 ! 的提交说明

feat(api)!: send an email to the customer when a product is shipped
复制代码

包含了 ! 和 BREAKING CHANGE 脚注的提交说明

chore!: drop support for Node 6

BREAKING CHANGE: use JavaScript features not available in Node 6.
复制代码

不包含正文的提交说明

docs: correct spelling of CHANGELOG
复制代码

包含范围的提交说明

feat(lang): add polish language
复制代码

包含多行正文和多行脚注的提交说明

fix: prevent racing of requests

Introduce a request id and a reference to latest request. Dismiss
incoming responses other than from latest request.

Remove timeouts which were used to mitigate the racing issue but are
obsolete now.

Reviewed-by: Z
Refs: #123
复制代码

type 类型概览

描述
feat 新增一个功能
fix 修复一个Bug
docs 文档变更
style 代码格式(不影响功能,例如空格、分号等格式修正)
refactor 代码重构
perf 改善性能
test 测试
build 变更项目构建或外部依赖(例如scopes: webpack、gulp、npm等)
ci 更改持续集成软件的配置文件和package中的scripts命令,例如scopes: Travis, Circle等
chore 变更构建流程或辅助工具
revert 代码回退

作者:子弈 链接:juejin.cn/post/684490…[7] 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

为什么需要约定式提交?

Git提交信息需要遵循Angular约定是为了使提交信息格式清晰、易于阅读和理解,从而提高代码协作的效率。Angular约定包括以下三个部分:

  1. 标题(header):用一行简短的描述来总结更改内容,并使用特殊关键字指定更改类型和影响范围。
  2. 正文(body):提供更详细的更改描述,包括更改原因、影响和解决方案等信息。
  3. 页脚(footer):提供一些附加信息,如相关链接、关联的BUG编号等。

通过遵循Angular约定,可以使提交信息更加规范化和易于管理,从而方便其他团队成员阅读和理解更改的含义,从而提高团队协作效率。此外,遵循Angular约定的提交信息还可以更好地与许多自动化工具进行集成,如自动化版本控制、代码审查工具等。

如何遵守约定式提交?

第一步:自动生成提交说明的工具

Commitizen是一个基于命令行的交互式工具,它可以帮助开发者规范化提交Git提交信息,符合Angular Commit Message Conventions的规范,从而更好地管理代码变更历史。

Commitizen提供了一个友好的命令行交互界面,让开发者根据规范选择提交信息的类型、影响范围等内容,自动生成符合规范的Git提交信息。

Commitizen可以与Git结合使用,使得开发者可以使用commitizen命令代替git commit命令提交代码变更,并且生成的提交信息格式更加规范化和易于管理。

这里我建议您全局安装

pnpm install -g commitizen 
pnpm install -g cz-conventional-changelog
复制代码

随后在电脑用户根目录穿件.czrc文件,不然使用的时候会进入命令行(笔者的系统为Ubuntu20.04)

echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
复制代码

随后使用commitizen生成符合AngularJS规范的提交说明

commitizen init cz-conventional-changelog --save --save-exact
复制代码

随后你就可以使用以下命令获得中规中距的commit信息了。

git cz 
复制代码

第二步:客制化自动提交信息

cz-customizable是Commitizen的一个插件,可以帮助开发者自定义符合Angular Commit Message Conventions的提交信息格式和内容。

拜托,人又不是机器!别那么死板。和代码打交道最重要的事情就是懂得如何苦中作乐,在遇到挑战和困难时,优秀的人能够采取积极的心态,并且能够寻找解决问题的方式和方法。

cz-customizable提供了一些配置选项,让开发者可以根据项目的需要自定义提交信息的格式和内容。

cz-customizable的配置选项包括:

  1. types: 定义提交信息的类型,如feat(新功能)、fix(修复Bug)等。
  2. scopes: 定义提交信息的影响范围,如模块、组件等。
  3. allowCustomScopes: 是否允许自定义影响范围。
  4. scopeOverrides: 定义不同类型的提交信息对影响范围的要求。
  5. messages: 定义提交信息的模板,包括标题、正文、页脚等内容。
  6. allowBreakingChanges: 是否允许提交破坏性变更。

1. 安装 cz-customizable

npm install cz-customizable --save-dev
复制代码

2. 添加以下配置到package.json

"config": {
    "commitizen": {
    "path": "node_modules/cz-customizable"
    }
}
复制代码

3.项目根目录下创建.cz-config.js文件来自定义提示

├── CHANGELOG.md
├── commitlint.config.js
├── index.html
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── public
├── README.md
├── src
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── .cz-config.js // 创建
复制代码

以下是我的一些参考配置

module.exports = {
  // 可选类型
  types: [
    {
      value: ':sparkles: feat',
      name: '✨ feat:      新功能'
    },
    {
      value: ':bug: fix',
      name: '

标签:Git,前端,规范,cz,复制,提交,husky,commit,代码
From: https://www.cnblogs.com/guxingzhe/p/17661839.html

相关文章

  • 什么是前端和后端?
    什么是前端和后端?前端和后端是软件开发中的两个重要方向,分别负责网站的前端和后端功能。 前端通常是指网站的前台部分,包括网站的表现层和结构层,即Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。常用的前端技术包括HTML、CSS、JavaScript等。 前端通常是指用户在Web浏......
  • 前端歌谣的刷题之路-第五题-自定义列表
     目录前言题目核心代码总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于牛客网题......
  • 前端歌谣的刷题之路-第六题-加粗文字
     目录前言题目核心代码编辑运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷本题目源自于......
  • 5个前端开源项目带你在Web上体验Windows
    本文来分享五个yyds的开源项目,这些项目把Windows带到了Web平台上。让我们一起感受这些项目带来的回忆和创新,重温Windows93、98、XP和7的经典界面,甚至探索现代概念中的Windows11和12!Windows12使用JavaScript、CSS、HTML等技术开发的网页版Windows12,且支持深......
  • 前端单元测试与自动化测试实践
    1.引言在前端开发中,单元测试和自动化测试是保证代码质量和稳定性的重要手段。通过编写和执行测试用例,可以及早发现代码中的问题,并确保代码在不同环境下的正确运行。本文将介绍前端单元测试和自动化测试的实践,并通过一个示例说明其重要性和具体操作。2.前端单元测试前端单元测......
  • 后端传递给前端的参数,怎么处理
    1.直接传递布尔值  2.传递状态码 3.传递json【用这种吧】   ......
  • 前端存储方案一览
    Cookies在HTML5标准前本地储存的主要的也是最早提出的⽅式,优点是兼容性好,请求头⾃带cookie⽅便(使用fetch的话需要额外配置),缺点是⼤⼩只有4k,⾃动请求头加⼊cookie浪费流量,而且每个domain限制20个cookie,使⽤起来麻烦,需要自行封装相关方法。Cookie一旦创建成功,名称就无法修改Cooki......
  • 在线拍卖直播系统源码(双端APP+H5前端+管理后台)
    "东莞梦幻网络科技"开发该拍卖直播系统采用了多种开发语言。具体而言,后端采用了PHP语言,并且使用了ThinkPHP框架。而在移动端方面,苹果端采用了Objective-C语言,而安卓端则采用了Java。前端H5部分则使用了Vue.js框架。以下是该拍卖直播系统的主要功能模块:1、直播拍卖:用户可以观看主播......
  • 前端React学习路径
    在当今的软件开发领域,React已经成为一种广泛使用的JavaScript库,用于构建用户界面。它由Facebook开发并维护,具有高效、灵活和可扩展等特点,适用于各种类型的应用程序开发。本文将介绍前端React的学习路径,包括基本概念、核心功能、组件进阶、路由和状态管理、构建实践等方面,并结合代码......
  • 使用哪种注解处理后台Map参数类型,探究前端发送请求URL限制
    如何处理接口参数是Map类型探究URL限制法1:前端发送Get请求需求:为了得到分页结果,我将分页时需要的参数封装到Map中进行传递@GetMapping("/page")publicRqueryPage(@RequestParamMap<String,Object>params){}//1.测试GEThttp://localhost:8080/product/categorybrandrel......