GIT套件 conventional commit

# 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手動調整 ![husky/commit-msg](https://i.imgur.com/14UOf35.png) * 調整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)安裝執行的會產出預設檔案) ![undefined](https://i.imgur.com/IHWFkCc.png) ```bash #!/bin/sh . "$(dirname "$0")/_/husky.sh" npx --no-install commitlint --edit $1 ``` #### 壹-3-2. .cz-config.js 以下內容為自訂格式，都可以調整，沒有一定~ **自行建立檔案**(.cz-config.js) ![自行建立檔案](https://i.imgur.com/vpAtveG.png) 將下列內容貼在建立的檔案中存檔 ```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， ![husky/commit-msg](https://i.imgur.com/D3WXPRA.png) * 調整undefined >>> `npx --no-install commitlint --edit $1` * pre-commit >>> 請刪掉 ![undefined](https://i.imgur.com/P1QXp50.png) ```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 套件`

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.