commitlint+husky規範commit 日誌

阿新 • • 發佈：2019-01-23

為了方便開發團隊協作開發，commit -m 中的資訊需要有個規範，方便直觀的看出每次commit 目的
主要說下安裝步驟和commit 規範標準，有問題歡迎探討指出~~

##############################安裝步驟#############################
一.安裝node，從Node.js官網下載對應平臺的安裝程式
安裝成功後，終端執行命令 node -v 和 npm -v 可以檢視安裝的node，npm的版本號

$ node -v
v10.13.0

$ npm -v
6.4.1

二：cd到專案目錄，建立package.json檔案
1.通過下面命令列可以直接建立預設package.json檔案
npm init -y
2.通過下面命令列一步步輸入建立自定義的package檔案內容（注意package name:不可以以大寫字母開頭，下面有提示）
npm init

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (runloop) Runloop
Sorry, name can no longer contain capital letters.
package name: (runloop) runloop
version: (1.0.0) 
description: 測試commitlint
entry point: (index.js) 
test command: 
git repository: (https://github.com/wei3715/RunLoop.git) 
keywords: 
author: zww
license: (ISC) 
About to write to /Users/jolly/Desktop/up/self/RunLoop/package.json:

{
  "name": "runloop",
  "version": "1.0.0",
  "description": "測試commitlint",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wei3715/RunLoop.git"
  },
  "author": "zww",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/wei3715/RunLoop/issues"
  },
  "homepage": "https://github.com/wei3715/RunLoop#readme"
}


Is this OK? (yes) yes

執行完以下命令可以在專案根目錄看到package-lock.json,package.json檔案

三：安裝套件@commitlint/config-angular @commitlint/cli、husky

//1. 安裝套件@commitlint/config-angular @commitlint/cli
$ npm install --save-dev @commitlint/config-angular @commitlint/cli
npm notice created a lockfile as package-lock.json. You should commit this file.
+ @commitlint/ 
[email protected]
+ @commitlint/[email protected]
added 149 packages from 62 contributors and audited 388 packages in 28.666s
found 0 vulnerabilities

//2.安裝套件husky
$ npm install --save-dev husky

> [email protected] install /Users/jolly/Desktop/up/self/RunLoop/node_modules/husky
> node husky install

husky > setting up git hooks
husky > done
+ [email protected]
added 41 packages from 13 contributors and audited 466 packages in 10.866s
found 0 vulnerabilities

安裝完成後package.json檔案的內容：

{
  "name": "runloop",
  "version": "1.0.0",
  "description": "測試commitlint",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wei3715/RunLoop.git"
  },
  "author": "zww",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/wei3715/RunLoop/issues"
  },
  "homepage": "https://github.com/wei3715/RunLoop#readme",
  "devDependencies": {
    "@commitlint/cli": "^7.2.1",
    "@commitlint/config-angular": "^7.1.2",
    "husky": "^1.1.4"
  }
}

四：將husky hook加入到到package.json檔案中

{
  "name": "runloop",
  "version": "1.0.0",
  "description": "測試commitlint",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wei3715/RunLoop.git"
  },
  "author": "zww",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/wei3715/RunLoop/issues"
  },
  "homepage": "https://github.com/wei3715/RunLoop#readme",
  "devDependencies": {
    "@commitlint/cli": "^7.2.1",
    "@commitlint/config-angular": "^7.1.2",
    "husky": "^1.1.4"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

五：建立commitlint.config.js檔案到專案根目錄，設定規範

$ vim commitlint.config.js

編輯輸入以下一行內容即可，這個檔案代表以後commit -m 後面的提交應遵循的規範

module.exports = {extends: ['@commitlint/config-angular']};

好的，大功告成~~完成之後專案根目錄會多出下面這幾個檔案
在這裡插入圖片描述

測試效果
下面執行commit命令測試下效果：

$ git status
On branch master
Your branch is up to date with 'origin/master'.

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	commitlint.config.js
	node_modules/
	package-lock.json
	package.json

nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git commit -m "測試 commitlint"
husky > commit-msg (node v10.13.0)

⧗   input: 
測試 commitlint

✖   message may not be empty [subject-empty]
✖   type may not be empty [type-empty]
✖   found 2 problems, 0 warningshusky > commit-msg hook failed (add --no-verify to bypass)

可以看到如果不按照規範書寫commit的日誌會提示報錯

下面輸入正確的commit 日誌資訊：注意冒號後面要留空格，下面有介紹具體的編輯規範資訊

$ git commit -m "feat(): 新增commitlint"
husky > commit-msg (node v10.13.0)

⧗   input: feat(): 新增commitlint
✔   found 0 problems, 0 warnings[master 7a5bc00] feat(): 新增commitlint
 4097 files changed, 219349 insertions(+)
 create mode 100644 commitlint.config.js
 create mode 120000 node_modules/.bin/JSONStream
 create mode 120000 node_modules/.bin/commitlint
 create mode 120000 node_modules/.bin/conventional-commits-parser
 ........(這裡第一次會有很多crete  mode資訊)

//最後執行git push把修改推送到遠端
$ git push
Counting objects: 3519, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3351/3351), done.
Writing objects: 100% (3519/3519), 2.21 MiB | 653.00 KiB/s, done.
Total 3519 (delta 741), reused 0 (delta 0)
remote: Resolving deltas: 100% (741/741), done.
To github.com:wei3715/RunLoop.git
   9d89ab6..7a5bc00  master -> master

測試通過後，將下面檔案新增到忽略檔案.gitignore中

## commitlint
node_modules/
package-lock.json

##############################下面是commit規範##########################
commit message的格式

// Header
<type>(scope): <subject>
// 空一行
Body
// 空一行
Footer

不管是哪一個部分，任何一行都不得超過72個字元（或100個字元）,這是為了避免自動換行影響美觀(我的測試是不能超過72字元)

$ git add .
$ git commit -m "test(): good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&"
husky > commit-msg (node v10.13.0)

⧗   input: 
test(): good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&good&

✖   header must not be longer than 72 characters [header-max-length]
✖   found 1 problems, 0 warningshusky > commit-msg hook failed (add --no-verify to bypass)

Header：是必需的
(1) 注意冒號後面有空格，不能以大寫字母開頭
無空格時報以下錯誤：

$ git commit -m "test():good"
husky > commit-msg (node v10.13.0)

⧗   input: 
test():good

✖   message may not be empty [subject-empty]
✖   type may not be empty [type-empty]
✖   found 2 problems, 0 warningshusky > commit-msg hook failed (add --no-verify to bypass)

大寫字母開頭報以下錯誤：

$ git commit -m "test(): Good"
husky > commit-msg (node v10.13.0)

⧗   input: 
test(): Good

✖   subject must not be sentence-case, start-case, pascal-case, upper-case [subject-case]
✖   found 1 problems, 0 warningshusky > commit-msg hook failed (add --no-verify to bypass)

(2) 包括三個欄位：type（必需）、scope（可選）和subject（必需）

type：用於說明 commit 的型別，被指定在 commitlint.config.js 的 type-enum
feat：新功能（feature）
fix：修補bug
docs：文件
style：格式（不影響程式碼執行的變動）
refactor：重構（即不是新增功能，也不是修改bug的程式碼變動）
test：增加測試
chore：構建過程或輔助工具的變動
revert: 回滾到上一個版本

有一種比較特殊的情況： revert

如果當前 commit 用於撤銷以前的 commit，則必須以revert:開頭，後面跟著被撤銷 Commit 的 Header。

revert: feat(pencil): add 'graphiteWidth' option
This reverts commit 667ecc1654a317a13331b17617d973392f415f02.

scope: 可以省略；用於說明 commit 的影響範圍，比如資料層、控制層、檢視層等等，視專案不同而不同
subject：subject 是 commit 目的的簡短描述，不超過50個字元
以動詞開頭，使用第一人稱現在時，比如change，而不是changed或changes
第一個字母小寫
結尾不加句號（.）

Body：可省略； body 部分是對本次 commit 的描述，可以分成多行，例如下面這樣

More detailed explanatory text, if necessary.  Wrap it to 
about 72 characters or so. Further paragraphs come after blank lines.- Bullet points are okay, too- Use a hanging indent

有兩個注意點。

（1）使用第一人稱現在時，比如使用change而不是changed或changes。

（2）應該說明程式碼變動的動機，以及與以前行為的對比。

Footer：可省略； footer 用於不相容變動和關閉ISSUE
（1）不相容變動

如果當前程式碼與上一個版本不相容，則 Footer 部分以BREAKING CHANGE開頭，後面是對變動的描述、以及變動理由和遷移方法。例如：


BREAKING CHANGE: isolate scope bindings definition has changed.
 
    To migrate the code follow the example below:
 
    Before:
 
    scope: {
      myAttr: 'attribute',
    }
 
    After:
 
    scope: {
      myAttr: '@',
    }
 
    The removed `inject` wasn't generaly useful for directives so there should be no code using it.

（2）關閉 Issue

如果當前 commit 針對某個issue，那麼可以在 Footer 部分關閉這個 issue 。

Closes #234

也可以一次關閉多個 issue

Closes #123, #245, #992

測試完整commit message

//使用git commit 方便輸入多行的commit message
$ git commit

//輸入完整的commit message： header + body +footer

test(): 測試完成commit message
    
    I just change string to test
    完整的commit message
    添加了一個 測試字串
    
    Closes #111

//輸入完成後
husky > commit-msg (node v10.13.0)

⧗   input: test(): 測試完成commit message
✔   found 0 problems, 0 warnings[master 7ac378a] test(): 測試完成commit message
 1 file changed, 1 insertion(+), 1 deletion(-)


//檢視最近一個提交記錄
git log -n 1
commit 7ac378ad532f16cb84035214908b0833bbf3f6c8 (HEAD -> master)
Author: jolly <[email protected]>
Date:   Wed Nov 14 18:02:53 2018 +0800

    test(): 測試完成commit message
    
    I just change string to test
    完整的commit message
    添加了一個 測試字串
    
    Closes #111

另外對commitlint.config.js 檔案的內容再具體說下，我上次建立的commitlint.config.js 檔案只輸入了一行內容：

module.exports = {extends: ['@commitlint/config-angular']};

這樣就會遵循預設的commit規範，也可以輸入更多內容來自定義自己團隊的規範：

module.exports = {
    extends: ['@commitlint/config-conventional'],
    rules: {
        'subject-case': [0, 'never'],
        'type-enum': [
            2,                  //代表必須輸入
            'always', 
            [
                "docs",     // Adds or alters documentation. 僅僅修改了文件，比如README, CHANGELOG, CONTRIBUTE等等
                "chore",    // Other changes that don't modify src or test files. 改變構建流程、或者增加依賴庫、工具等
                "feat",     // Adds a new feature. 新增feature
                "fix",      // Solves a bug. 修復bug
                "merge",    // Merge branch ? of ?.
                "perf",     // Improves performance. 優化相關，比如提升效能、體驗
                "refactor", // Rewrites code without feature, performance or bug changes. 程式碼重構，沒有加新功能或者修復bug
                "revert",    // Reverts a previous commit. 回滾到上一個版本                
                "style",    // Improves formatting, white-space. 僅僅修改了空格、格式縮排、都好等等，不改變程式碼邏輯                
                "test"     // Adds or modifies tests. 測試用例，包括單元測試、整合測試等                
            ]
        ]
    }
};

commitlint+husky規範commit 日誌

commitlint+husky規範commit 日誌

回顧我這一年多的 Git commit 日誌

回顧一年多的 Git commit 日誌有感

Android開發規範：日誌Log

git 修改某次 commit 日誌和內容

commit日誌歷史不一致的Git倉庫合併

使用 Commitizen 撰寫 Angular 規範的 commit message

軟件開發的目錄規範/定制程序的入口/引用配置文件/引用自定義模塊/logging模塊/日誌繼承與propagate屬性/通過字典導入配置/日誌模塊在項目中的使用

mysql 常用命令，語句規範，及日誌儲存

PHP規範PSR3（日誌介面）介紹

git pre-commit hook failed 解決辦法解除安裝husky

git commit 規範工具

一個維護版本日誌整潔的Git提交規範

自家公司關於git commit 的規範

Logger日誌列印規範

學習日誌1---運用匈牙利命名法的命名規範，以及註釋規範

Commitizen —— git commit 規範工具

我的編碼習慣 —— 日誌規範

git分支管理及git commit message規範

規範Git Commit Message

commitlint+husky規範commit 日誌

相關推薦