js前端架構(gòu)Git?commit提交規(guī)范
更新時間：2022年07月05日 10:29:19 作者：Gaby
這篇文章主要為大家介紹了前端架構(gòu)Git?commit提交規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
Git commit 規(guī)范
在工作中避免不了多人協(xié)作，協(xié)作避免不了有一個規(guī)范的流程，讓大家有效的去合作；讓項目有條不紊的進行。自然使用 git 規(guī)范進行把控也是項目中必不可少的技術(shù)了。
為什么要寫好 Git Commit?
- 提供更多的歷史信息，方便快速瀏覽
- 可以過濾某些commit（比如文檔改動），方便快速查找信息
# 過濾日志信息 git log HEAD --pretty=format:%s --grep 關(guān)鍵字
- 可以直接從commit生成Change log
如何寫好Git Commit
業(yè)界使用比較廣泛的是Angular規(guī)范
<type>(<scope>):<subject> <BLANK LINE> <body> <BLANK LINE> <footer>
- 標(biāo)題行：必填，描述主要修改類型和內(nèi)容
- 主要內(nèi)容：描述為什么修改，做什么樣的修改，以及開發(fā)的思路等等
- 頁腳注釋：放 Breaking Changes 或 Closed Issuses
type | commit 類型
| 類型 | 詳細介紹 |
|---|---|
| feat | 新功能、新特性 |
| fix | bugfix，修改問題 |
| refactor | 代碼重構(gòu) |
| docs | 文檔修改 |
| style | 代碼格式修改，注意不是css修改 |
| test | 測試用例修改 |
| chore | 其他修改，比如構(gòu)建，依賴管理 |
scope | commit影響的范圍 比如：route、component、utils、build.....
- subject:commit 的概述，建議符合 50/72 formatting
- body：commit 具體修改內(nèi)容，可以分為多行，建議符合50/72 formatting
- footer：一些備注，通常是BREAKING CHANGE 或 修改的bug鏈接
利用插件（commitizen）
利用commitizen，提交規(guī)范的commit。
- commitizen 用于提示用戶輸入或選擇，生成規(guī)范的commit
- cz-conventional-changelog 用于生成changelog
# 1. 下載cz-conventional-changelog changelog插件
npm install -g commitizen cz-conventional-changelog
# 2. package.json 配置
{
"scripts": {
# 以后提交commit 直接執(zhí)行npm run commit
"commit": "git-cz",
},
# config用來設(shè)置一些項目不怎么變化的項目配置，用戶用的時候可以使用如下用法：process.env.npm_package_config_commitizen
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
# 也可以使用以下配置，配置全局變量
# 命令行中輸入以下命令，配置到czrc目錄下,也可以用vim編輯~/.czrc添加到文件中去{ "path": "cz-conventional-changelog"}
echo '{ "path": "cz-conventional-changelog"}' > ~/.czrc
自定義文檔格式,commit用中文去寫（擴展）
# 1.下載
npm install -g cz-customizable
# 2. package.json 配置
...
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
},
"cz-customizable": {
"config": "./cz.config.js"
}
}
# 也可以使用以下配置，配置全局變量
echo '{ "path": "cz-customizable"}' > ~/.czrc
# echo添加或vim編輯添加
vim .czrc
# 添加配置 { "path": "cz-customizable"}
# 3.創(chuàng)建配置文件
touch ./cz.config.js
cz.config.js
module.exports = {
//可選類型
types: [
{ value: 'feat', name: 'feat: 新功能' },
{ value: 'fix', name: 'fix: 修復(fù)' },
{ value: 'docs', name: 'docs: 文檔變更' },
{ value: 'style', name: 'style: 代碼格式(不影響代碼運行的變動)' },
{
value: 'refactor',
name: 'refactor:重構(gòu)(既不是增加feature)，也不是修復(fù)bug'
},
{ value: 'perf', name: 'perf: 性能優(yōu)化' },
{ value: 'test', name: 'test: 增加測試' },
{ value: 'chore', name: 'chore: 構(gòu)建過程或輔助功能的變動' },
{ value: 'revert', name: 'revert: 回退' },
{ value: 'build', name: 'build: 打包' },
{ value: 'revert', name: 'revert: 回退' }
],
//消息步驟
messages: {
type: '請選擇提交類型',
customScope: '請輸入修改范圍(可選)',
subject: '請簡要描述提交(必填)',
body: '請輸入詳細描述(可選)',
footer: '請輸入要關(guān)閉的issue(可選)',
confirmCommit: '確認(rèn)以上信息提交?(y/n)'
},
//跳過問題
skipQuestion: ['body', 'footer'],
//subject文字長度默認(rèn)是
subjectLimit: 72
}
gitmoji(趣味圖標(biāo)-擴展）
npm i -g gitmoji-cli gitmoji -c # git commit 提交
Git hooks
Git 鉤子（hooks）是在Git倉庫中特定事件（certain points）觸發(fā)后被調(diào)用的腳本
可以用git init初始化git文件，在.git/hooks下有各種鉤子模版，可以用例如less prepare-commit-msg.sample查看文件，里面是一段執(zhí)行腳本。
- 客戶端鉤子-> 由諸如提交和合并這樣的操作所調(diào)用
- 服務(wù)端鉤子-> 作用于諸如接收被推送的提交這樣的聯(lián)網(wǎng)操作
客戶端 Hooks
| 類型 | 詳細介紹 |
|---|---|
| prepare-commit-msg | commit message編輯器呼起前 default commit message創(chuàng)建后觸發(fā)，常用于生成默認(rèn)的標(biāo)準(zhǔn)化的提交說明 |
| commit-msg | 開發(fā)者編寫完并確認(rèn)commit message后觸發(fā)，常用于校驗提交說明是否標(biāo)準(zhǔn) |
| post-commit | 整個git commit完成后觸發(fā)，常用于郵件通知、提醒 |
| applypatch-msg | git am提取補丁并 應(yīng)用于當(dāng)前分支后，準(zhǔn)備提交觸發(fā)，常用于執(zhí)行測試用例或檢查緩沖區(qū)代碼 |
| pre-applypatch | git am提交后觸發(fā)，常用于通知、補丁、郵件推送回復(fù)（此鉤子不能停止git am過程） |
| pre-rebase | 執(zhí)行g(shù)it rebase命令時觸發(fā) |
| post-rewrite | 執(zhí)行會替換commit的命令時觸發(fā)，比如git rebase 或 git cimmit-amend |
| post-checkout | 執(zhí)行g(shù)it checkout命令成功后觸發(fā)，可用于生成特定文檔，處理大二進制文件等 |
| post-merge | 成功完成一次merge行為后觸發(fā) |
| pre-auto-gc | 執(zhí)行垃圾回收前觸發(fā) |
服務(wù)端 Hooks
| 類型 | 詳細介紹 |
|---|---|
| pre-receive | 當(dāng)服務(wù)端收到一個push操作請求時觸發(fā)，可用于檢測push的內(nèi)容 |
| update | 與pre-receive相似，但當(dāng)一次push想更新多個分支時，pre-receive只執(zhí)行一次，而此鉤子會為沒一分支都執(zhí)行一次 |
| post-receive | 當(dāng)整個push操作完成時觸發(fā)，常用于服務(wù)側(cè)同步、通知 |
項目使用
Git Husky
用node實現(xiàn)的的快速安裝git hooks的工具
// npm install husky --save-dev
// package.json
{
"husky" : {
"hooks": {
"pre-commit": "npm test",
// ......
}
}
}
命令行 less .git/hooks/pre-commit 查看pre-commit文件，可以看見"(dirname"(dirname "(dirname"0")/husky.sh",然后可以查看less .git/hooks/husky.sh
link-staged
只會檢測暫存區(qū)的文件，不會對所有的文件進行檢測，也就是說我修改一個文件，只會檢測當(dāng)前這個文件
# 安裝代碼檢測工具 npm install prettier eslint -D # 安裝lint-staged npx mrm lint-staged
{
"gitHooks": {
"pre-commit": "lint-staged"
},
{
"lint-staged": {
"*.js": "eslint --cache --fix",
"*.{js,css,md}": "prettier --write"
}
}以上就是js前端架構(gòu)Git commit提交規(guī)范的詳細內(nèi)容，更多關(guān)于js架構(gòu)Git commit規(guī)范的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了TypeScript 枚舉類型，TypeScript 在 ES 原有類型基礎(chǔ)上加入枚舉類型，使得在 TypeScript 中也可以給一組數(shù)值賦予名字，這樣對開發(fā)者比較友好，可以理解枚舉就是一個字典，文章內(nèi)容圍繞TypeScript 枚舉類型展開內(nèi)容,需要的朋友可以參考一下2021-10-10
瀏覽器切換到其他標(biāo)簽頁或最小化js定時器是否準(zhǔn)時測試
這篇文章主要為大家介紹了瀏覽器切換到其他標(biāo)簽頁或最小化是js定時器是否準(zhǔn)時的測試詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Javascript中bind()方法綁定函數(shù)的使用與實現(xiàn)
這篇文章主要為大家介紹了Javascript中bind()方法綁定函數(shù)的使用與實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
本篇文章主要介紹?typeScript?中新增的泛型概念、泛型使用、泛型與接口結(jié)合等內(nèi)容。具有一定的參價值，需要的小伙伴可以參考一下，希望對你有所幫助2022-02-02
這篇文章主要介紹了微信小程序-拍照或選擇圖片并上傳文件的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 自定義Toast實例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了詳解微信小程序Radio選中樣式切換的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了微信小程序 參數(shù)傳遞詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
lodash里to系列之將數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型實現(xiàn)示例
這篇文章主要為大家介紹了lodash里to系列之將數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
ES6中提出了一個新的特性，就是proxy，用來攔截在一個對象上的指定操作，這個功能非常的有用。本文會介紹 Proxy的使用方式及列舉具體實例解釋 Proxy 的使用場景。2016-07-07