大廠技術(shù)  高級前端  Node進(jìn)階
點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號
回復(fù)1，加入高級Node交流群

一個(gè)開發(fā)人員需要知道的 commit 規(guī)范

什么是約定式提交

約定式提交（Conventional Commits）是一種用于代碼版本控制的規(guī)范，旨在通過明確和標(biāo)準(zhǔn)化提交信息來提高代碼協(xié)作質(zhì)量和效率。其基本原則是通過規(guī)定提交信息的結(jié)構(gòu)和語義來提高代碼版本控制的可讀性、可維護(hù)性和自動(dòng)化程度。

約定式提交規(guī)范通常要求提交信息包括一個(gè)描述性的"類型"、一個(gè)可選的"作用域"、一個(gè)用于簡潔說明的"主題"，以及可選的"正文"和"尾部"等組成部分。這些組成部分的格式和語義都是根據(jù)規(guī)范要求進(jìn)行約定的，比如使用"feat"來表示新功能、"fix"表示修復(fù)錯(cuò)誤、"docs"表示文檔變更等。

通過遵循約定式提交規(guī)范，開發(fā)人員可以更容易地理解和管理代碼的變更歷史，同時(shí)也為自動(dòng)化工具提供了更多可靠的信息，例如自動(dòng)生成版本號、發(fā)布日志和代碼庫更新等操作。

提交說明的結(jié)構(gòu)如下所示:

---

原文：

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]
復(fù)制代碼

譯文：

<類型>[可選 范圍]: <描述>

[可選 正文]

[可選 腳注]
復(fù)制代碼

---

提交說明包含了下面的結(jié)構(gòu)化元素，以向類庫使用者表明其意圖：

0. fix: 類型 為 fix 的提交表示在代碼庫中修復(fù)了一個(gè) bug（這和語義化版本中的 `PATCH`^[1] 相對應(yīng)）。
1. feat: 類型 為 feat 的提交表示在代碼庫中新增了一個(gè)功能（這和語義化版本中的 `MINOR`^[2] 相對應(yīng)）。
2. BREAKING CHANGE: 在腳注中包含 BREAKING CHANGE: 或 <類型>(范圍) 后面有一個(gè) ! 的提交，表示引入了破壞性 API 變更（這和語義化版本中的 `MAJOR`^[3] 相對應(yīng)）。破壞性變更可以是任意 類型 提交的一部分。
3. 除 fix: 和 feat: 之外，也可以使用其它提交 類型 ，例如 \@commitlint/config-conventional^[4]（基于 Angular 約定^[5]）中推薦的 build:、chore:、 ci:、docs:、style:、refactor:、perf:、test:，等等。
4. 腳注中除了 BREAKING CHANGE: <description> ，其它條目應(yīng)該采用類似 git trailer format^[6] 這樣的慣例。

其它提交類型在約定式提交規(guī)范中并沒有強(qiáng)制限制，并且在語義化版本中沒有隱式影響（除非它們包含 BREAKING CHANGE）。可以為提交類型添加一個(gè)圍在圓括號內(nèi)的范圍，以為其提供額外的上下文信息。例如 feat(parser): adds ability to parse arrays.。

示例

包含了描述并且腳注中有破壞性變更的提交說明

feat: allow provided config object to extend other configs

BREAKING CHANGE: `extends` key in config file is now used for extending other config files
復(fù)制代碼

包含了 ! 字符以提醒注意破壞性變更的提交說明

feat!: send an email to the customer when a product is shipped
復(fù)制代碼

包含了范圍和破壞性變更 ! 的提交說明

feat(api)!: send an email to the customer when a product is shipped
復(fù)制代碼

包含了 ! 和 BREAKING CHANGE 腳注的提交說明

chore!: drop support for Node 6

BREAKING CHANGE: use JavaScript features not available in Node 6.
復(fù)制代碼

不包含正文的提交說明

docs: correct spelling of CHANGELOG
復(fù)制代碼

包含范圍的提交說明

feat(lang): add polish language
復(fù)制代碼

包含多行正文和多行腳注的提交說明

fix: prevent racing of requests

Introduce a request id and a reference to latest request. Dismiss
incoming responses other than from latest request.

Remove timeouts which were used to mitigate the racing issue but are
obsolete now.

Reviewed-by: Z
Refs: #123
復(fù)制代碼

type 類型概覽

值	描述
feat	新增一個(gè)功能
fix	修復(fù)一個(gè)Bug
docs	文檔變更
style	代碼格式（不影響功能，例如空格、分號等格式修正）
refactor	代碼重構(gòu)
perf	改善性能
test	測試
build	變更項(xiàng)目構(gòu)建或外部依賴（例如scopes: webpack、gulp、npm等）
ci	更改持續(xù)集成軟件的配置文件和package中的scripts命令，例如scopes: Travis, Circle等
chore	變更構(gòu)建流程或輔助工具
revert	代碼回退

作者：子弈 鏈接：juejin.cn/post/684490…^[7] 來源：稀土掘金 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

為什么需要約定式提交？

Git提交信息需要遵循Angular約定是為了使提交信息格式清晰、易于閱讀和理解，從而提高代碼協(xié)作的效率。Angular約定包括以下三個(gè)部分：

1. 標(biāo)題（header）：用一行簡短的描述來總結(jié)更改內(nèi)容，并使用特殊關(guān)鍵字指定更改類型和影響范圍。
2. 正文（body）：提供更詳細(xì)的更改描述，包括更改原因、影響和解決方案等信息。
3. 頁腳（footer）：提供一些附加信息，如相關(guān)鏈接、關(guān)聯(lián)的BUG編號等。

通過遵循Angular約定，可以使提交信息更加規(guī)范化和易于管理，從而方便其他團(tuán)隊(duì)成員閱讀和理解更改的含義，從而提高團(tuán)隊(duì)協(xié)作效率。此外，遵循Angular約定的提交信息還可以更好地與許多自動(dòng)化工具進(jìn)行集成，如自動(dòng)化版本控制、代碼審查工具等。

如何遵守約定式提交？

第一步：自動(dòng)生成提交說明的工具

Commitizen是一個(gè)基于命令行的交互式工具，它可以幫助開發(fā)者規(guī)范化提交Git提交信息，符合Angular Commit Message Conventions的規(guī)范，從而更好地管理代碼變更歷史。

Commitizen提供了一個(gè)友好的命令行交互界面，讓開發(fā)者根據(jù)規(guī)范選擇提交信息的類型、影響范圍等內(nèi)容，自動(dòng)生成符合規(guī)范的Git提交信息。

Commitizen可以與Git結(jié)合使用，使得開發(fā)者可以使用commitizen命令代替git commit命令提交代碼變更，并且生成的提交信息格式更加規(guī)范化和易于管理。

這里我建議您全局安裝

pnpm install -g commitizen 
pnpm install -g cz-conventional-changelog
復(fù)制代碼

隨后在電腦用戶根目錄穿件.czrc文件，不然使用的時(shí)候會(huì)進(jìn)入命令行（筆者的系統(tǒng)為Ubuntu20.04）

echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
復(fù)制代碼

隨后使用commitizen生成符合AngularJS規(guī)范的提交說明

commitizen init cz-conventional-changelog --save --save-exact
復(fù)制代碼

隨后你就可以使用以下命令獲得中規(guī)中距的commit信息了。

git cz 
復(fù)制代碼

第二步：客制化自動(dòng)提交信息

cz-customizable是Commitizen的一個(gè)插件，可以幫助開發(fā)者自定義符合Angular Commit Message Conventions的提交信息格式和內(nèi)容。

拜托，人又不是機(jī)器！別那么死板。和代碼打交道最重要的事情就是懂得如何苦中作樂，在遇到挑戰(zhàn)和困難時(shí)，優(yōu)秀的人能夠采取積極的心態(tài)，并且能夠?qū)ふ医鉀Q問題的方式和方法。

cz-customizable提供了一些配置選項(xiàng)，讓開發(fā)者可以根據(jù)項(xiàng)目的需要自定義提交信息的格式和內(nèi)容。

cz-customizable的配置選項(xiàng)包括：

1. types: 定義提交信息的類型，如feat（新功能）、fix（修復(fù)Bug）等。
2. scopes: 定義提交信息的影響范圍，如模塊、組件等。
3. allowCustomScopes: 是否允許自定義影響范圍。
4. scopeOverrides: 定義不同類型的提交信息對影響范圍的要求。
5. messages: 定義提交信息的模板，包括標(biāo)題、正文、頁腳等內(nèi)容。
6. allowBreakingChanges: 是否允許提交破壞性變更。

1. 安裝 cz-customizable

npm install cz-customizable --save-dev
復(fù)制代碼

2. 添加以下配置到package.json中

"config": {
    "commitizen": {
    "path": "node_modules/cz-customizable"
    }
}
復(fù)制代碼

3.項(xiàng)目根目錄下創(chuàng)建.cz-config.js文件來自定義提示

├── CHANGELOG.md
├── commitlint.config.js
├── index.html
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── public
├── README.md
├── src
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── .cz-config.js  // 創(chuàng)建
復(fù)制代碼

以下是我的一些參考配置

module.exports = {
  // 可選類型
  types: [
    {
      value: ':sparkles: feat',
      name: '? feat:      新功能'
    },
    {
      value: ':bug: fix',
      name: '?? fix:      修復(fù)'
    },
    {
      value: ':memo: docs',
      name: '?? docs:      文檔變更'
    },
    {
      value: ':lipstick: style',

      name: '?? style:     代碼格式(不影響代碼運(yùn)行的變動(dòng))'
    },
    {
      value: ':recycle: refactor',

      name: '??  refactor:    重構(gòu) (既不增加feature, 也不是修復(fù)bug)'
    },
    {
      value: ':zap: perf',
      name: '?? perf:      性能優(yōu)化'
    },
    {
      value: ':white_check_mark: test',
      name: '? test:      增加測試'
    },
    {
      value: ':wrench: chore',
      name: '?? chore:     構(gòu)建過程或輔助工具的變動(dòng)'
    },
    {
      value: ':rewind: revert',
      name: '? revert:     回退'
    },
    {
      value: ':rocket: build',
      name: '?? build:     打包'
    }
  ],

  // 步驟

  messages: {
    type: '請選擇提交的類型：',
    customScope: '情輸入修改的范圍(可選)',
    subject: '請簡要描述提交(必填)',
    body: '請輸入詳細(xì)描述(可選)',
    footer: '請輸入要關(guān)閉的issus(可選)',
    confirmCommit: '確認(rèn)要使用以上信息提交？(y/n)'
  },
  // 默認(rèn)長度72
  subjectLimit: 72
};

復(fù)制代碼

此時(shí)再次運(yùn)行 git cz時(shí)就可以看到

? 請選擇提交的類型： (Use arrow keys)
? ? feat:      新功能 
  ?? fix:      修復(fù) 
  ?? docs:      文檔變更 
  ?? style:     代碼格式(不影響代碼運(yùn)行的變動(dòng)) 
  ??  refactor:    重構(gòu) (既不增加feature, 也不是修復(fù)bug) 
  ?? perf:      性能優(yōu)化 
  ? test:      增加測試 
復(fù)制代碼

第三部：增加對自動(dòng)生成 commit 信息的校驗(yàn)

有時(shí)候你的隊(duì)友可能是傻逼？請你注意防范

很遺憾的是，上面的操作并沒有任何校驗(yàn)功能，你的隊(duì)友仍然可以提交 trash 在 commit 信息中。如果不敲你是隊(duì)伍中的審核人員，那么我想你需要設(shè)置一些規(guī)范

這里我們分情況討論：

若您沒有使用cz-customizable適配器做了破壞Angular風(fēng)格的提交說明配置，則可以使用以下配置方案

1.安裝 @commitlint/config-conventional

npm i @commitlint/config-conventional @commitlint/cli -D
復(fù)制代碼

2.在根目錄創(chuàng)建commitlint.config.js文件，配置commitlint

module.exports = {
  extends: ['@commitlint/config-conventional']
}
復(fù)制代碼

若您使用cz-customizable了則需要使用以下配置方案

npm install commitlint-config-cz --save-dev
復(fù)制代碼
復(fù)制代碼

然后加入commitlint校驗(yàn)規(guī)則配置：

module.exports = {
  extends: [
    'cz'
  ]
};
復(fù)制代碼

最后的一些補(bǔ)充

husky 最后的幫手

是一個(gè)可以在 Git hooks 中使用的 npm 包，它可以幫助你在特定的 Git 事件發(fā)生時(shí)執(zhí)行命令，例如提交代碼之前進(jìn)行代碼格式化、測試等操作.

"husky"是一個(gè)為了方便使用Git hooks的工具，它能夠幫助你在項(xiàng)目中自動(dòng)化地執(zhí)行一些Git相關(guān)的操作。使用husky，你可以在Git的一些關(guān)鍵操作（例如提交、推送、合并等）前或后，執(zhí)行一些腳本或命令，比如代碼格式化、自動(dòng)化測試、打包發(fā)布等。

他可以幫助我們額外攔截一些如git commit等指令。需要注意的是，husky只在Git倉庫中才能正常工作，所以在使用之前請確保你的項(xiàng)目已經(jīng)初始化為Git倉庫

1.安裝 husky

1. 在項(xiàng)目中安裝 husky，可以使用 npm或者 yarn 進(jìn)行安裝：
   

pnpm install husky --save-dev
復(fù)制代碼

或者

yarn add husky --dev
復(fù)制代碼

2.在package.json中定義需要執(zhí)行的Git hooks和對應(yīng)的腳本

例如，在提交代碼前執(zhí)行代碼格式化和自動(dòng)化測試：

jsonCopy code{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run test"
    }
  }
}
復(fù)制代碼

這樣，每次在執(zhí)行git commit命令時(shí)，都會(huì)自動(dòng)執(zhí)行npm中定義的lint和test命令。

除了pre-commit鉤子，husky還支持其他一些Git hooks，比如pre-push、post-merge、post-checkout等，可以根據(jù)實(shí)際需求進(jìn)行配置。

需要注意的是，husky只在Git倉庫中才能正常工作，所以在使用之前請確保你的項(xiàng)目已經(jīng)初始化為Git倉庫。

當(dāng)然 除了在pageage.json中設(shè)置之外，還可以使用

npx husky add .husky/pre-commit來生成一個(gè) hook 的文件

隨后你也可以在相應(yīng)的文件中書寫要執(zhí)行的腳本了

./.husky/
├── _
│   └── husky.sh
├── commit-msg
└── pre-commit // 再此寫入
復(fù)制代碼

3.使用lint-staged, 對暫存區(qū)代碼進(jìn)行eslint校驗(yàn)和prettier格式化

現(xiàn)在我們已經(jīng)約束了提交規(guī)范，但是我們希望在提交前對當(dāng)前的代碼進(jìn)行格式驗(yàn)證和修復(fù)，此時(shí)需要使用到lint-staged

1. 安裝 npm i lint-staged \--save-dev

2. 在package.json中新增配置

   "lint-staged": {
   

"/*.scss": "stylelint --syntax scss",  "/.{js,jsx, tsx,ts }": "npm run lint-staged:js",  "**/.{js,jsx,tsx,ts,less,scss,md,json}": [    "prettier --write" ] } 復(fù)制代碼 復(fù)制代碼 ```

3. 在package.json中新增 lint-staged 和 lint-staged.js 命令

   "scripts": {
   

"lint-staged": "lint-staged",    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx " } 復(fù)制代碼 復(fù)制代碼 ```

4. 最后在 pre-commit中新增腳本

   npm run lint-staged
   復(fù)制代碼
   

源自：https://juejin.cn/post/7212597327579037756

作者：喜歡哆肉

感謝 · 轉(zhuǎn)發(fā)歡迎大家留言

Node 社群

•      
  
        
  
         
  
          
  
           
  
          
          
  
           
  
          
         
        
       
  我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
  

• 最后不要忘了點(diǎn)個(gè)贊再走噢