js前端架構Git commit提交規範

2022-07-05 14:05:21

Git commit 規範

在工作中避免不了多人共同作業，共同作業避免不了有一個規範的流程，讓大家有效的去合作；讓專案有條不紊的進行。自然使用 git 規範進行把控也是專案中必不可少的技術了。

為什麼要寫好 Git Commit?

提供更多的歷史資訊，方便快速瀏覽
可以過濾某些commit（比如檔案改動），方便快速查詢資訊

  # 過濾紀錄檔資訊
  git log HEAD --pretty=format:%s --grep 關鍵字

可以直接從commit生成Change log

如何寫好Git Commit

業界使用比較廣泛的是Angular規範

<type>(<scope>):<subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

標題行：必填，描述主要修改型別和內容
主要內容：描述為什麼修改，做什麼樣的修改，以及開發的思路等等
頁尾註釋：放 Breaking Changes 或 Closed Issuses

type | commit 型別

型別	詳細介紹
feat	新功能、新特性
fix	bugfix，修改問題
refactor	程式碼重構
docs	檔案修改
style	程式碼格式修改，注意不是css修改
test	測試用例修改
chore	其他修改，比如構建，依賴管理

scope | commit影響的範圍比如：route、component、utils、build.....

subject:commit 的概述，建議符合 50/72 formatting
body：commit 具體修改內容，可以分為多行，建議符合50/72 formatting
footer：一些備註，通常是BREAKING CHANGE 或修改的bug連結

利用外掛（commitizen）

利用commitizen，提交規範的commit。

commitizen 用於提示使用者輸入或選擇，生成規範的commit
cz-conventional-changelog 用於生成changelog

# 1. 下載cz-conventional-changelog changelog外掛 
npm install -g commitizen cz-conventional-changelog
# 2. package.json 設定

{
    "scripts": { 
    # 以後提交commit 直接執行npm run commit
       "commit": "git-cz",
    },
    # config用來設定一些專案不怎麼變化的專案設定，使用者用的時候可以使用如下用法：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.建立組態檔
touch ./cz.config.js

cz.config.js

module.exports = {
  //可選型別
  types: [
    { value: 'feat', name: 'feat:   新功能' },
    { value: 'fix', name: 'fix:   修復' },
    { value: 'docs', name: 'docs:   檔案變更' },
    { value: 'style', name: 'style:   程式碼格式(不影響程式碼執行的變動)' },
    {
      value: 'refactor',
      name: 'refactor:重構(既不是增加feature)，也不是修復bug'
    },
    { value: 'perf', name: 'perf:   效能優化' },
    { value: 'test', name: 'test:   增加測試' },
    { value: 'chore', name: 'chore:   構建過程或輔助功能的變動' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:   打包' },
    { value: 'revert', name: 'revert:   回退' }
  ],
  //訊息步驟
  messages: {
    type: '請選擇提交型別',
    customScope: '請輸入修改範圍(可選)',
    subject: '請簡要描述提交(必填)',
    body: '請輸入詳細描述(可選)',
    footer: '請輸入要關閉的issue(可選)',
    confirmCommit: '確認以上資訊提交?(y/n)'
  },
  //跳過問題
  skipQuestion: ['body', 'footer'],
  //subject文字長度預設是
  subjectLimit: 72
}

gitmoji(趣味圖示-擴充套件）

npm i -g gitmoji-cli
gitmoji -c # git commit 提交

Git hooks

Git 勾點（hooks）是在Git倉庫中特定事件（certain points）觸發後被呼叫的指令碼

可以用git init初始化git檔案，在.git/hooks下有各種勾點模版，可以用例如less prepare-commit-msg.sample檢視檔案，裡面是一段執行指令碼。

使用者端勾點-> 由諸如提交和合並這樣的操作所呼叫
伺服器端勾點-> 作用於諸如接收被推播的提交這樣的聯網操作

使用者端 Hooks

型別	詳細介紹
prepare-commit-msg	commit message編輯器呼起前 default commit message建立後觸發，常用於生成預設的標準化的提交說明
commit-msg	開發者編寫完並確認commit message後觸發，常用於校驗提交說明是否標準
post-commit	整個git commit完成後觸發，常用於郵件通知、提醒
applypatch-msg	git am提取修補程式並應用於當前分支後，準備提交觸發，常用於執行測試用例或檢查緩衝區程式碼
pre-applypatch	git am提交後觸發，常用於通知、修補程式、郵件推播回覆（此勾點不能停止git am過程）
pre-rebase	執行git rebase命令時觸發
post-rewrite	執行會替換commit的命令時觸發，比如git rebase 或 git cimmit-amend
post-checkout	執行git checkout命令成功後觸發，可用於生成特定檔案，處理大二進位制檔案等
post-merge	成功完成一次merge行為後觸發
pre-auto-gc	執行垃圾回收前觸發

伺服器端 Hooks

型別	詳細介紹
pre-receive	當伺服器端收到一個push操作請求時觸發，可用於檢測push的內容
update	與pre-receive相似，但當一次push想更新多個分支時，pre-receive只執行一次，而此勾點會為沒一分支都執行一次
post-receive	當整個push操作完成時觸發，常用於服務側同步、通知

專案使用

Git Husky

用node實現的的快速安裝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

只會檢測暫存區的檔案，不會對所有的檔案進行檢測，也就是說我修改一個檔案，只會檢測當前這個檔案

 # 安裝程式碼檢測工具
 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前端架構Git commit提交規範的詳細內容，更多關於js架構Git commit規範的資料請關注it145.com其它相關文章！