# GIT套件 conventional commit
## 壹．==直接設定==
### 壹-1 package.json
僅補上綠色+的部分即可
```diff
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
+ "changelog": "conventional-changelog -i CHANGELOG.md -s",
+ "prepare": "husky install",
+ "commit": "cz"
},
"devDependencies": {
+ "@commitlint/cli": "^12.1.4",
+ "@commitlint/config-conventional": "^12.1.4",
+ "@commitlint/cz-commitlint": "^16.2.3",
+ "@commitlint/prompt-cli": "^16.2.3",
+ "conventional-changelog-cli": "^2.1.1",
+ "cz-conventional-changelog": "^3.3.0",
+ "cz-customizable": "^6.3.0",
+ "husky": "^7.0.0",
},
+ "config": {
+ "commitizen": {
+ "path": "./node_modules/cz-customizable"
+ }
+ },
+ "husky": {
+ "hooks": {
+ "commit-msg": "commitlint -e $GIT_PARAMS"
+ }
+ }
```
### 壹-2 ==執行==
```bash
#1.安裝
npm install
#2.確認 [壹-3 建立相關檔案] 及 [壹-4 根目錄] 是否有以下相關檔案
#3.加入索引
git add .
#4.git commit //此為套件指令 git cz
git cz or npx cz
```
### 壹-3 建立相關檔案
#### 壹-3-1. .husky/commit-msg
```cmd
##若無法執行(好像有版本問題....)先PASS指令問題，改用下一行指令先建立檔案，在手動調整
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
#建立檔案
npx husky add .husky/commit-msg
```
##### 於.husky/commit-msg手動調整
* 調整undefined >>> `npx --no-install commitlint --edit $1`
* pre-commit >>> 請刪掉(沒有檔案也沒關係，會有這擋案主要是[貳-2．搭配 husky](https://hackmd.io/pdbCsfrXRIqaR4KT5N0u7A#%E8%B2%B3-2%EF%BC%8E%E6%90%AD%E9%85%8D-husky)安裝執行的會產出預設檔案)
```bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1
```
#### 壹-3-2. .cz-config.js
以下內容為自訂格式，都可以調整，沒有一定~
**自行建立檔案**(.cz-config.js)
將下列內容貼在建立的檔案中存檔
```js
// 20220328
module.exports = {
// 可選型別
types: [{
value: 'WIP',
name: '💪 WIP: 暫存工作。'
},
{
value: 'feat',
name: '✨ feat: 新增功能。'
},
{
value: 'fix',
name: '🐞 fix: 修復 bug。'
},
{
value: 'refactor',
name: '🛠 refactor: 重構、優化程式碼，不是新功能或是修復 bug。'
},
{
value: 'docs',
name: '📚 docs: 修改文件。'
},
{
value: 'test',
name: '🏁 test: 新增或修改現有的測試'
},
{
value: 'chore',
name: '🗯 chore: 修改建置流程、包管理、構建過程或輔助工具的變動。不包含修改測試檔、src 裡的檔案。'
},
{
value: 'style',
name: '💅 style: 修改程式碼的風格，不會對產品有任何的功能變動 (空白鍵、格式化、分號...等)。'
},
{
value: 'revert',
name: '⏪ revert: 撤銷、復原一次 git commit。'
}
]
// 訊息步驟
messages: {
type: '<type> 用於說明 commit 的類別，只允許使用下面 9 個標識: \n',
scope: '<scope> 影響範圍，比如會影響到哪個模塊/性能/哪一層（業務層，持久層，緩存，rpc），如果是特性代碼，可以寫特性名稱 (可選): \n',
customScope: '<scope> 自定義影響範圍，請精簡扼要但不失原意: \n',
subject: '<subject> 目的的簡短描述，不超過 100 個字符: \n',
body: '<body> 對本次 commit 的詳細描述，使用第一人稱，應該說明代碼變動的動機，以及與以前行為的對比，可以使用 "|" 分成多行 (可選):\n',
breaking: '<breaking> 對破壞性變動(Breaking Change)的描述、以及變動理由和遷移方法 (可選):\n',
footer: '<footer> 針對的 issue，像是：#520, #1314 (可選):\n',
confirmCommit: '<confirm commit> 請確認以上描述。(y/n/e/h)',
},
// upperCaseSubject: true,
// footerPrefix: 'Related issue:',
// allowCustomScopes: true,
// allowBreakingChanges: ["feat", "fix", "refactor"],
// 跳過問題
skipQuestions: ['body', 'footer'],
// subject文字長度預設是100
subjectLimit: 100
}
```
#### 壹-3-3. commitlint.config.js
命令執行
```cmd
echo module.exports = {extends: ['@commitlint/config-conventional']} > commitlint.config.js
```
### 壹-4 ==根目錄==
詳看：[MINFAN-PChome/ec-shopping24](https://github.com/MINFAN-PChome/ec-shopping24)
```ssh
├── .husky
├── _
├── husky.sh
├──commit-msg
├── .cz-config.js
├── commitlint.config.js
```
------------
:::info
**有興趣從頭自己安裝及設定，下方為套件介紹**
:::
------------
## 貳．自行研究[^first]
### 貳-1 ==commitlint==：檢查 commit message
commitlint 這套工具是用來作為 git commit 的 linter，並且可以搭配不同的 convention。
這裡選擇 config-conventional，也就是需要依據 conventional commit 的規範來寫 commit message：
```bash
# 安裝 commitlint-cli 和 config-conventional
# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
# 會在專案中建立 commitlint.config.js 並放入設定
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
```
#### test驗證
```bash
# 使用 commitlint
$ echo "add commitlint" | npx commitlint
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]
```
### 貳-2．搭配 husky
```bash
# 第一次安裝 husky 才需要執行
npx husky-init && npm install
# Install Husky v6
npm install husky --save-dev
# or
yarn add husky --dev
# Activate hooks
npx husky install
# or
yarn husky install
# 建立 commitlint 用的 git hook
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
##若無法執行再執行下一行，手動修改檔案
npx husky add .husky/commit-msg
```
#### 手動調整
於.husky/commit-msg，
* 調整undefined >>> `npx --no-install commitlint --edit $1`
* pre-commit >>> 請刪掉
```bash
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install commitlint --edit $1
```
### 貳-3．==commitizen==：建立 commit message
```bash
# 安裝
npx commitizen init cz-conventional-changelog --save-dev --save-exact
```
建立commit的話，只需要執行
```bash
npx cz
```
==實際執行==情況如下：
```bash
#此次commit類別
? Select the type of change that you’re committing: (Use arrow keys)
> feat:A new feature
fix:A bug fix
docs:Documentation only changes
style:Changes that do not affect the meaning of the code（white-space,formatting,missing-semi-colons,etc）
refactor: A code change that neither fixes a bug nor adds a feature
perf:A code change that improves performance
test:Adding missing tests or correcting existing tests
（Move up and down to reveal more choices）
# feat: 新增/修改功能 (feature)。
# fix: 修補 bug (bug fix)。
# docs: 文件 (documentation)。
# style: 格式 (不影響程式碼運行的變動 white-space, formatting, missing semi colons, etc)。
# refactor: 重構 (既不是新增功能，也不是修補 bug 的程式碼變動)。
# perf: 改善效能 (A code change that improves performance)。
# test: 增加測試 (when adding missing tests)。
# chore: 建構程序或輔助工具的變動 (maintain)。
# revert: 撤銷回覆先前的 commit 例如：revert: type(scope): subject (回覆版本：xxxx)。
```
```bash
#詳細敘述此次commit檔名或組件(沒有可按ENTER跳過)
? What is the scope of this change （e.g.component or file name):(press enter to skip）
#commit內容(限字數)
? Write a short, imperative tense description of the change (max 94 chars):
#詳細敘述此次commit內容或更改範圍(沒有可按ENTER跳過)
? Provide a longer description of the change: (press enter to skip)
#是否有重大版本(是/否)
? Are there any breaking changes? (y/N)
#此次改變是否影響其他問題(是/否)
? Does this change affect any open issues? (y/N)
```
#### 在 global 使用 commitizen
```bash
npm install -g commitizen # install commitizen globally
npm install -g cz-conventional-changelog # Install commitizen adapter globally
# create `.czrc` in home directory
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
# 建立 git commit 時，只需要使用
git cz
```
### 貳-4．==conventional-changelog==：建立 CHANGELOG
```bash
# 第一次安裝
npm install --save-dev conventional-changelog-cli
# 檢視可以使用的 options 和說明
npx conventional-changelog --help
# 第一次產生 CHANGELOG
npx conventional-changelog -p angular -i CHANGELOG.md -s -r 0
# 將新的更新 message 添加到 CHANGELOG
npx conventional-changelog -p angular -i CHANGELOG.md -s
```
也可以把產生 CHANGELOG 的指令放到 package.json 的 scripts 中：
```diff
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"scripts": {
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
+ "changelog": "conventional-changelog -i CHANGELOG.md -s",
"lint:staged": "lint-staged",
"prepare": "husky install"
},
@@ -51,6 +52,7 @@
"devDependencies": {
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
+ "conventional-changelog-cli": "^2.1.1",
"cz-conventional-changelog": "^3.3.0",
"husky": "^7.0.0",
"lint-staged": "^11.0.0"
```
之後就只需要執行 `npm run changelog` 就會產生最新的 CHANGELOG 檔。
### 貳-5．其他：readme-md-generator
```cmd
#安裝
npm i -g readme-md-generator
#執行
readme
```
## 資料來源
* [[note] git conventional commit](https://pjchender.dev/npm/note-git-conventional-commit/#%E6%90%AD%E9%85%8D-husky)
* [github.com/conventional-changelog](https://github.com/conventional-changelog)
* [Git Commit Message 這樣寫會更好，替專案引入規範與範例](https://wadehuanglearning.blogspot.com/2019/05/commit-commit-commit-why-what-commit.html)
[^first]: [[note] git conventional commit](https://pjchender.dev/npm/note-git-conventional-commit/#%E6%90%AD%E9%85%8D-husky)
###### tags: `Git` `Git 套件`
Sign in with Wallet
Connect another wallet