Try   HackMD

GIT套件 conventional commit

壹．直接設定

壹-1 package.json

僅補上綠色+的部分即可

  "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 執行

#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

##若無法執行(好像有版本問題....)先PASS指令問題，改用下一行指令先建立檔案，在手動調整
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'


#建立檔案
npx husky add .husky/commit-msg
於.husky/commit-msg手動調整

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 調整undefined >>> npx --no-install commitlint --edit $1
  • pre-commit >>> 請刪掉(沒有檔案也沒關係，會有這擋案主要是貳-2．搭配 husky安裝執行的會產出預設檔案)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More → 

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

壹-3-2. .cz-config.js

以下內容為自訂格式，都可以調整，沒有一定~

自行建立檔案(.cz-config.js)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

將下列內容貼在建立的檔案中存檔

// 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

命令執行

echo module.exports = {extends: ['@commitlint/config-conventional']} > commitlint.config.js

壹-4 根目錄

詳看：MINFAN-PChome/ec-shopping24

├── .husky
    ├── _
        ├── husky.sh
    ├──commit-msg
├── .cz-config.js
├── commitlint.config.js

有興趣從頭自己安裝及設定，下方為套件介紹

貳．自行研究[1]

貳-1 commitlint：檢查 commit message

commitlint 這套工具是用來作為 git commit 的 linter，並且可以搭配不同的 convention。

這裡選擇 config-conventional，也就是需要依據 conventional commit 的規範來寫 commit message：

# 安裝 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驗證

# 使用 commitlint
$ echo "add commitlint" | npx commitlint
 ✖   subject may not be empty [subject-empty]
 ✖   type may not be empty [type-empty]

貳-2．搭配 husky

# 第一次安裝 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

  • 調整undefined >>> npx --no-install commitlint --edit $1
  • pre-commit >>> 請刪掉

undefined

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

貳-3．commitizen：建立 commit message

# 安裝
npx commitizen init cz-conventional-changelog --save-dev --save-exact

建立commit的話，只需要執行

npx cz

實際執行情況如下：

#此次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)。

#詳細敘述此次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

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

# 第一次安裝
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 中：

--- 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

#安裝
npm i -g readme-md-generator

#執行
readme

資料來源

tags: Git Git 套件

  1. [note] git conventional commit ↩︎

Last changed by 
 
Webart
webart for PChome
0
572

Read more

Angular方法

使用 NgFor 和異步管道處理 Observables[Angular2速成班]使用NgFor的5個特別變數，讓資料更有變化[Angular 大師之路] Day 04 - 認識 Angular 的生命週期

Sep 24, 2024
Angular多專案架設及Angular架構

一樣使用新增專案的方式，使用參數，讓建立執行只建立工作區，而後再針對專案包個別建立。

Sep 24, 2024
購物車

Notification 公告(API)/競標入口/資訊/返回大車 Interface Notification.propTypes = { GA: PropTypes.string, notificationType:PropTypes.oneOf([&apos;button&apos;, &apos;a&apos;]).isRequired, notificationColor:PropTypes.oneOf([&apos;grayLighter&apos;]), startIcon:PropTypes.oneOf(ICON_NAME), text:PropTypes.string, link:PropTypes.string,

Mar 7, 2023
Untitled

localStorage https://5xruby.tw/posts/localstorage https://codesandbox.io/s/mystifying-lederberg-g9yty3?file=/src/App.js:115-127

Sep 16, 2022
Read more from Webart
Published on HackMD