js前端架構Git?commit提交規范

 更新時間:2022年07月05日 10:29:19   作者:Gaby  
這篇文章主要為大家介紹了前端架構Git?commit提交規范示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

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新功能、新特性
fixbugfix,修改問題
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-msgcommit message編輯器呼起前 default commit message創建后觸發,常用于生成默認的標準化的提交說明
commit-msg開發者編寫完并確認commit message后觸發,常用于校驗提交說明是否標準
post-commit整個git commit完成后觸發,常用于郵件通知、提醒
applypatch-msggit am提取補丁并 應用于當前分支后,準備提交觸發,常用于執行測試用例或檢查緩沖區代碼
pre-applypatchgit 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規范的資料請關注腳本之家其它相關文章!

相關文章

最新評論

美丽人妻被按摩中出中文字幕