devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【总结】1670- 前端需要掌握的 commit 规范

作者：IT小白 | 2024-05-28 09:31:44

赞

踩

前端怎样commit提交时规范代码提交

a7995eea432a007bcbaf2ff5a61c4a74.jpeg

作者：喜欢哆肉

https://juejin.cn/post/7212597327579037756

一个开发人员需要知道的 commit 规范

什么是约定式提交

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

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

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

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

原文：

  1. <type>[optional scope]: <description>
  2.  
  3. [optional body]
  4.  
  5. [optional footer(s)]

译文：

  1. <类型>[可选 范围]: <描述>
  2.  
  3. [可选 正文]
  4.  
  5. [可选 脚注]

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

  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.。

示例

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

  1. feat: allow provided config object to extend other configs
  2.  
  3. 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 脚注的提交说明

  1. chore!: drop support for Node 6
  2.  
  3. BREAKING CHANGE: use JavaScript features not available in Node 6.

不包含正文的提交说明

docs: correct spelling of CHANGELOG

包含范围的提交说明

feat(lang): add polish language

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

  1. fix: prevent racing of requests
  2.  
  3. Introduce a request id and a reference to latest request. Dismiss
  4. incoming responses other than from latest request.
  5.  
  6. Remove timeouts which were used to mitigate the racing issue but are
  7. obsolete now.
  8.  
  9. Reviewed-by: Z
  10. Refs: #123

type 类型概览

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

为什么需要约定式提交？

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

  1. 标题（header）：用一行简短的描述来总结更改内容，并使用特殊关键字指定更改类型和影响范围。

  2. 正文（body）：提供更详细的更改描述，包括更改原因、影响和解决方案等信息。

  3. 页脚（footer）：提供一些附加信息，如相关链接、关联的BUG编号等。

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

如何遵守约定式提交？

第一步：Commitizen=>自动生成提交说明的工具

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

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

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

这里我建议您全局安装

  1. pnpm install -g commitizen 
  2. 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=> 客制化自动提交信息

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中
  1. "config": {
  2.     "commitizen": {
  3.     "path": "node_modules/cz-customizable"
  4.     }
  5. }
3.项目根目录下创建.cz-config.js文件来自定义提示
  1. ├── CHANGELOG.md
  2. ├── commitlint.config.js
  3. ├── index.html
  4. ├── node_modules
  5. ├── package.json
  6. ├── pnpm-lock.yaml
  7. ├── public
  8. ├── README.md
  9. ├── src
  10. ├── tsconfig.json
  11. ├── tsconfig.node.json
  12. ├── vite.config.ts
  13. └── .cz-config.js  // 创建
以下是我的一些参考配置
  1. module.exports = {
  2.   // 可选类型
  3.   types: [
  4.     {
  5.       value: ':sparkles: feat',
  6.       name: '✨ feat:      新功能'
  7.     },
  8.     {
  9.       value: ':bug: fix',
  10.       name: '
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/636805
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。