git提交規(guī)范

一、 前言

在團(tuán)隊開發(fā)中，或者自己的項目中，我們都會用到git來管理我們的代碼，但是當(dāng)我們commit(git commit)的時候，是沒有規(guī)范的，有的時我們偷懶甚至git commit -m'..'，這種提交雖然當(dāng)時爽，但如果有一天我們需要回滾版本的時候，git relog，媽耶，這都是啥啊，如果在團(tuán)隊開發(fā)中這種情況更讓人絕望。這時候，指定制定一套commit規(guī)范顯得格外重要，我們可以借助husky和Commitizen這兩個工具幫助我們來管理commit

二、2. Husky

定義

• git有自己的hooks(鉤子)，其實(shí)就是類似于vue的生命周期
  • 比如在提交代碼前，會調(diào)用pre-commit hook
  • 如果不好理解hook，那么你就想vue中，頁面加載時會先調(diào)用created函數(shù)，當(dāng)commit的時候會先調(diào)用pre-commit，這么一舉例是不是好理解點(diǎn)，如果還是不理解，沒關(guān)系，先用，后面有機(jī)會在理解
• 這些hook都在.git/hooks中以.sample結(jié)尾的文件就是hook
• 如果我們手動調(diào)用，那么就會很麻煩，所以husky這個工具就孕育而生，對，這個工具就是讓我們調(diào)用這些git hook簡單點(diǎn)

安裝

• npx husky-init && npm install

• 上面的命令會幫我們做以下的操作(官網(wǎng)給的解釋，可以了解即可)

  1. 在package.json的script中添加"prepare": "husky install",
  2. 在當(dāng)前根目錄創(chuàng)建.husky文件夾，并且在當(dāng)前文件夾中創(chuàng)建一個pre-commit的文件
     1. 這個文件其實(shí)就是一個可執(zhí)行文件，他的作用就是commit之前會調(diào)用這個文件
  3. 配置git hook的路徑

使用

• 當(dāng)我們執(zhí)行g(shù)it commit時，就會先執(zhí)行pre-commit文件的內(nèi)容了

• 我們可以在其中添加添加自己的命令，比如npx eslint

• 意思是commit之前先用eslint來檢查代碼

• #!/usr/bin/env sh
  . "$(dirname -- "$0")/_/husky.sh"
  
  npx eslint
  

添加hook

• 上面說到在安裝的時候會幫我們創(chuàng)建一個pre-commithook文件，那么我們自己想要添加一個hook該怎么做呢，比如我們想要添加一個在commit時候執(zhí)行的hook

• git hook 官網(wǎng)寫的很清楚哦，這里就不再細(xì)述每個hook是干嘛的了。git 鉤子

• 做法很簡答，執(zhí)行以下命令即可

• 解讀一下其實(shí)也不難

• npx husky add .husky/commit-msg 使用husky在.husky文件夾下添加是commit-msg的鉤子

• 'npx --no -- commitlint --edit "$1"' 表示在調(diào)用該hook時候要執(zhí)行的命令

• 所以通用命令是npx husky add .husky/鉤子 '命令'

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

三、 Commitizen

定義和規(guī)范

• 這是一個規(guī)范我們提交代碼的工具

規(guī)范

安裝

# 安裝Commitizen
npm install commitizen -D
# 安裝cz-conventional-changelog，并且初始化cz-conventional-changelog
npx commitizen init cz-conventional-changelog --save-dev --save-exact

使用

• 安裝完畢后，之后我們要用npx cz來代替git commit

  • 安裝完畢后會在node_modules/bin創(chuàng)建一個cz的可執(zhí)行文件

• 執(zhí)行npx cz會依次出現(xiàn)以下的選項

• # 選擇一個此次commit的類型
  1.Select the type of change that you're committing: 
  # 此次commit影響的文件有哪些 比如我這次提交只是修改a.vue中的某個東西 那么就只影響到a.vue
  2.What is the scope of this change (e.g. component or file name):
  # 簡短的描述一下這次具體的改動最多91個字符
  3. Write a short, imperative tense description of the change (max 91 chars)
  # 詳細(xì)的描寫一下你的改動 如果沒有按空格鍵跳過
  4.Provide a longer description of the change: (press enter to skip)
  # 這次改動是重大的改動嗎 （比如發(fā)布了大的版本）
  5.Are there any breaking changes? 
  # 這次改動修復(fù)了別人提交的issues（這個選項針對開源項目，寫n即可）
  6.Does this change affect any open issues? 
  

• 完成以上的步驟你的commit才算是完成

修改commitizen提交指令

• 如果不想每次都是用npx cz，有的人會感覺別扭，或者記不住

• 這時候可以在package.json的script添加一個指令

• {
    "script": {
      commit: "cz"
    }
  }
  

• 這樣我們就可以使用npm run commit來代替git commit了

四、代碼提交驗證

• 上面我們雖然規(guī)范了代碼提交的風(fēng)格，但是我們commit的時候不按照該規(guī)范依然可以提交成功，那么這時候這個就成了防君子不防小人了，團(tuán)隊中難免有漏網(wǎng)之魚（哈哈哈～）
• 所以我們還需要通過commitlint來限制提交

安裝

• npm i @commitlint/config-conventional @commitlint/cli -D
  

使用

• 步驟一：在根目錄添加commitlint.config.js文件

• 步驟二：配置文件

• // 我們這里直接繼承官方給的默認(rèn)規(guī)則，如果想要更改，自動查
  module.exports = {
    extends: ['@commitlint/config-conventional']
  }
  

• 步驟三：使用husky生成commit-msg(這是commit時的hook)文件，驗證提交信息：

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

• 現(xiàn)在我們commit的時候如果不符合規(guī)范是無法commit哦

注意

如果遇到commitlint.config.js is treated as an ES module file as it is a .js file...這個錯誤，是因為在package.json文件中添加了 "type": "module"，將這個屬性刪除即可，或者將js文件的后綴改為.cjs即可，因為"type": "module"這個屬性是表示該項目都要用es module的方式導(dǎo)出導(dǎo)入文章來源地址http://www.zghlxwxcb.cn/news/detail-744497.html

到了這里，關(guān)于【git規(guī)范--husky的使用】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！