提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

vue,react,angular都在用的commit规范,了解一下?

2023-02-26 12:27:07 时间

截图来自vue的PR:

vue,react,angular都在用的commit规范,了解一下?

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

1.commit-message规范必要性

  1. 统一格式的提交记录，更清晰和易读
  2. 可以通过提交记录来了解本次提交的目的，更好的CR和重构
  3. 更容易了解变更，定位和发现问题
  4. 每个提交描述都是经过思考的，改善提交质量
  5. 直接生成ChangeLog

2.规范选型

常见的commit message规范有：atom，eslint和Angular等,其中Angular规范更为通用。

3.Angular的Commit Message规范简介

每条提交记录包含三个部分：header,body和footer

<header> <BLANK LINE> <body> <BLANK LINE> <footer>

Commit Message Header

<type>(<scope>): <short summary>   │       │             │   │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.   │       │   │       └─⫸ Commit Scope: animations|bazel|benchpress|common|compiler|compiler-cli|core|   │                          elements|forms|http|language-service|localize|platform-browser|   │                          platform-browser-dynamic|platform-server|router|service-worker|   │                          upgrade|zone.js|packaging|changelog|dev-infra|docs-infra|migrations|   │                          ngcc|ve   │   └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test

其中type和summary是必要的,scope是可选的

Type 必须是以下的类型

  • feat: 新增页面或功能
  • fix: bug修复
  • build: 影响构建系统或外部依赖项的更改
  • ci: 对 CI 配置文件和脚本的更改
  • docs: 文档改动
  • perf: 性能提升改动
  • refactor: 不影响功能的代码重构(既不修复错误也不添加功能)
  • test: 添加或修改测试用例

Summary用来提供更改的简洁描述

4.规范实施

通过commitizen进行交互式提交，husky + commit-msg hook进行提交校验，cz-customizable来自定义交互提交流程和文案，standard-changelog来自动生成changelog

vue,react,angular都在用的commit规范,了解一下?

image-20210615173113038

1.使用commitizen工具，在commit时可以交互的方式选择type

安装commitizen

npm i -D commitizen

package.json中添加对应的npm script

"commit":"cz"

改动添加到暂存区后执行commit提交

npm run commit

2. 通过husky在git hooks中对不符合规范的提交进行拦截，拦截commitlint进行校验

安装husky , commitlint 和 符合angular提交规范的配置

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

添加git hooks

npx husky install

package.json中添加prepare的npm hook, 在每次install自动执行(yarn v2+不支持prepare)

"prepare": "husky install"

执行添加commit-msg hook

如果使用husk v4.x版本(推荐升级到新版本)，直接在package.json中或.huskyrc.json中新增commit-msg钩子即可

package.json

"husky": {     "hooks": {        "commit-msg": "commitlint --edit $1"      }  }

.huskyrc，.huskyrc.json，.huskyrc.js或husky.config.js

"hooks": {   "commit-msg": "commitlint --edit $1" }

如果使用husky v6+版本，需要添加对应的shell调用方式（husky v6对添加方式做了改动，所以无法通过添加配置到package.json中运行）

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

添加commintlint配置(也可以放到package.json中指定)

echo "module.exports = { extends: [[email protected]/config-conventional'] };" > commitlint.config.js

package.json中添加commitlint配置

"commitlint": {      "extends": [         "@commitlint/config-conventional"      ]}

3. 扩展和自定义规范

commitizen提供的交互式默认是英文的，如果改成中文或者对交互流程进行改动，可以使用cz-customizable进行扩展和自定义

安装cz-customizable

npm i -D cz-customizable

package.json中添加配置

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

.cz-config.js就是cz-customizable配置的具体文件了，可以参考CZ-Config-Example并进行改动, 可以把文案翻译成中文，自定义修改提示等。

也可以通过fork cz-customizable创建内封配置文件的npm包

npm i -D your-own-package

“config”: { “commitizen”: { “path”: “node_modules/your-own-package” } }

 配置文件可以自定义交互内容，比如可以只保留type scope breakchange confirm  *   选择提交类型      *   简单描述本次改动      *   是否有重大变更      *   确定提交       配置文件中设置skipQuestions: ['body','customScope','scope','footer']，即可忽略其他选项  allowBreakingChanges: ['feat', 'fix'], 仅在feat和fix时提示 breakchange  ### 4.自动生成changelog  可以使用standard-changelog来自动生成changelog

npm i -D standard-changelog

 配置npm script

“gen-changelog”: “standard-changelog”

 ## 5.其他  通过npm script进行commit，如果eslint没有通过(在pre-commit 钩子中做了eslint检测)，但是又想提交可以通过加'––'来向npm script传参

npm run commit — –no-verify # or npm run commit — -n

vue,react,angular都在用的commit规范,了解一下?

本站部分内容转载自网络，版权属于原作者所有，如有异议请联系QQ153890879修改或删除，谢谢！
转载请注明原文链接：vue,react,angular都在用的commit规范,了解一下?

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏
[[email protected]]
分享 (0)

相关文章