---
title: Commit標準化及CHANGELOG.md自動生成
tags: git commit
---

# Commit標準化及CHANGELOG.md自動生成
[Angular CHANGELOG.md](https://github.com/angular/angular/blob/master/CHANGELOG.md)

Git commit時每次都需要添加描述，通常在描述中我們會簡單的描述當前提交的目的。而Commit message做得好就有以下好處。
1. 提供較詳細且可閱讀的版本內容供閱讀
2. 過濾部分commit，以便於快速查找
3. 直接從commit message生成 CHANGELOG.md。這也是我們接下來談到的內容。

## Commit Description 自動生成
#### Step 1 下載npm包
該動作會在本機上提供git cz互動式生成commit message的指令(如果已安裝在全域則該動作可跳過)
。但該指令需要配置模板與規則，所以接下來我們進行下一步來配置這部分。

npm install commitizen -g

#### Step 2 在專案根目錄裡執行已下命令，使其支援angular的commit message格式。

commitizen init cz-conventional-changelog --save --save-exact

#### Step 3 之後git commit就可以改成以下指令來進行

git cz

## Commit Description 驗證
#### Step 1 下載npm包
每一次提交的訊息都需要經過較驗，這是避免在合作的專案上有非標準化的提交訊息。進而丟失這些更新的訊息在未來生成的CHANGELOG.md中。所以接下來我們會透過husky來提供commit執行後的生命週期鉤子，並檢查該commit訊息中是否符合格式。

npm install validate-commit-msg --save-dev
npm install husky --save-dev

> **注意:validate-commit-msg已標記為棄用，可使用commitlint取代。**
#### Step 2 package.json新增githook腳本，使用validate-commit-msg進行驗證

"script": {
    "commitmsg": "validate-commit-msg"
}

或是husky新版建議的寫法

"husky": {
    "hooks": {
      "commit-msg": "validate-commit-msg"
    }
}

## 利用Commit訊息生成 CHANGELOG.md @deprecated

#### Step 1 下載npm包
這邊的步驟採用conventional-changelog-cli所提供的conventional-changelog指令，當然目前在網上還有其他方法可以生成 CHANGELOG，而且更為方便。這邊我們先舉一個比較繁瑣的方式，理解了之後也可以選擇較為方便的方式生成。

npm install conventional-changelog-cli -g

#### Step 2 使用以下指令來建立 CHANGELOG，且只會在CHANGELOG頭部更新內容

conventional-changelog -p angular -i CHANGELOG.md -s -r 0

## 官方建議操作流程
[conventional-changelog-cli](https://www.npmjs.com/package/conventional-changelog-cli)

#### 添加lifecycle hook

{
    "script":{
        "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
    }
}

#### 如何進行版本號更新?
1. git cz(commit)
2. pull tag
3. npm version major/minor/patch
4. git push

## 注意
1. 生成 CHANGELOG.md 之前，必需用npm version [type] 更新版本號(在Git上tag出版本號)。否則change log的內容不會有版本的分別。
2. 用npm version打版本號時，該版本號之前的更新會被歸類在該版本號內。
3. tag版本號避免出現第三個".""，如 XX.XX.XX.XX 0.1.12.20200810，生成的changelog會出現所有變更都在最後一個版本號內。
4. tag版本之後的更新並不會立即生成在CHANGELOG.md上面，除非下一次tag version出現。
5. husky本身提供自動更新husky config，僅需執行已下指令。

npx --no-install husky-upgrade

## 使用standard-version完成提交流水線
#### 使用的好處有
1. 上版本號
2. 更新 CHANGELOG.md(依據versionrc設定)
3. commit

#### Step 1 下載npm包

npm install standard-version --save-dev

#### Step 2 添加.versionrc or .versionrc.json

{
    "changelogHeader": "# Changelog ",
    "compareUrlFormat": "...",
    "commitUrlFormat": "...",
    "issueUrlFormat": "...",
    "type": [
        { "type": "feat", "section": "Features" },
        { "type": "fix", "section": "Bug Fixes" },
        { "type": "chore", "hidden": true },
        { "type": "docs", "section": "Document", "hidden": true },
        { "type": "style", "hidden": true },
        { "type": "refactor", "hidden": true },
        { "type": "perf", "hidden": true },
        { "type": "build", "hidden": true },
        { "type": "test", "hidden": true }
    ]
}

#### Step 3 之後就可以用npm

- [Standard Version README.md](https://github.com/conventional-changelog/standard-version)
- [conventional-changelog-config-spec README.md](https://github.com/conventional-changelog/conventional-changelog-config-spec/tree/master/versions/2.1.0)
1. 參考Standard Version的說明文件表示可用.versionrc或.versionrc.json或.versionrc.js作為config設定檔。
2. config設定檔內容如何配置請看conventional-changelog-config-spec README.md

## 參考網址
- [(推薦閱讀)(知乎)优雅的提交你的 Git Commit Message](https://zhuanlan.zhihu.com/p/34223150)
- [(掘金)针对具体项目配置commit规范和changelog](https://juejin.im/post/6844903993009766414#heading-7)
- [Commit message 和 Change log 编写指南<最初參考，但版本過舊。概念部分依舊可以參考>](http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html)
- [(掘金)规范你的 commit message 并且根据 commit 自动生成 CHANGELOG.md](https://juejin.im/post/5bd2debfe51d457abc710b57)
- [(CSDN)npm version常用命令及用法示例](https://blog.csdn.net/weixin_40817115/article/details/90384398)
- [(ITREAD01)規範你的 commit message 並且根據 commit 自動生成 CHANGELOG](https://www.itread01.com/lfccl.html)
- [自訂義repository url or bugs url](https://developer.aliyun.com/mirror/npm/package/conventional-changelog-custom-config)