git commit 規範指北

Git Hooks 簡介

Git 自己除了代碼版本管理以外，還提供了 Git Hooks 鉤子機制，它可以讓咱們在 commit、push 以前（後）執行一些自定義的操做。

在每一個 Git 項目根目錄下，都會有一個隱藏的 .git 目錄，其中 hooks 目錄中提供了許多默認的鉤子腳本，去掉其默認的 .sample 後綴便可在對應的步驟執行該腳本文件。

使用 husky 改造 Git Hooks

安裝

npm install -D husky
複製代碼

安裝 husky 以後，能夠看到 .git/hooks 目錄中文件的變化：

其中 pre-*爲某一操做以前運行的腳本，post-*爲某一操做以後運行的腳本。

配置

在 package.json 中加入以下配置：

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint",
      "pre-push": "npm test",
      "...": "..."
    }
  },
  "...": "..."
}
複製代碼

從 1.0.0開始，husky 能夠配置爲 .huskyrc，.huskyrc.json，.huskyrc.yaml，huskyrc.yml，.huskyrc.js或husky.config.js文件。

// .huskyrc
{
  "hooks": {
    "pre-commit": "npm run lint"
  }
}
複製代碼

如今，每次 commit 以前都會運行 npm run lint命令，若是存在錯誤（error），將不能提交代碼。PS：若是隻是警告（warning），會有相應的提示信息，可是是能夠成功提交的。

使用 lint-staged 改進 pre-commit

上一步中，每次提交前都會檢查全部代碼。在大型項目中這會使得提交速度很慢。並且，這可能會致使別人的代碼錯誤使得咱們的修改沒法提交。如今咱們使用 lint-staged 來解決這個問題，每一個團隊成員提交的時候，只檢查當次改動的文件。

安裝

npm install -D lint-staged
複製代碼

配置

// package.json
{
  "lint-staged": {
    "*.vue": "vue-cli-service lint",
    "*.js": "eslint",
    "*.less": "stylelint",
    "*.css": "stylelint",
    "*.scss": "stylelint",
    "*.md": "markdownlint"
  },
  "...": "..."
}
複製代碼

// .huskyrc
{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}
複製代碼

如今，咱們每次提交時都只會檢查咱們本身改動的文件，不再用去給別人修復錯誤了😁

使用 commitlint 規範 commit messages

規範的 commit message 更有利於閱讀和維護，有助於團隊的 code review，提升團隊工做效率。同時方便咱們生成 Change log。推薦使用 Angular 規範。

安裝

npm install -D @commitlint/config-conventional @commitlint/cli
複製代碼

配置

// .huskyrc
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}
複製代碼

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional']
}
複製代碼

當咱們的 commit message 不符合規範時，將沒法進行提交❌

咱們修改一下 commit message，使其符合 Angular 規範，再次提交✅

使用 commitizen 編寫符合規範的 commit message

安裝

# 全局安裝
npm install -g commitizen
 # 項目級安裝
npm install -D commitizen cz-conventional-changelog
複製代碼

配置

若是是全局安裝，在項目目錄下，運行下面的命令，使其支持 Angular 的 Commit message 格式。

commitizen init cz-conventional-changelog --save --save-exact
複製代碼

若是是項目級安裝，則需在 package.json中加入下面的配置：

{
  "script": {
    "...": "...",
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-conventional-changelog"
    }
  },
  "...": "..."
}
複製代碼

如今，在須要使用git commit命令的地方，改成使用git cz（全局安裝時）或者npm run commit（項目級安裝時）命令。而後在命令行中經過答題方式生成規範的 commit message。翻譯以下：

1. Select the type of change that you're committing: (Use arrow keys)
   選擇要提交的更改類型：（經過上下箭頭鍵）

   • feat: A new feature
     feat: 新功能
   • fix: A bug fix
     fix: 修復 bug
   • docs: Documentation only changes
     docs: 修改項目中的文檔
   • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
     style: 不影響代碼邏輯的修改（空格、格式、缺乏分號等）
   • refactor: A code change that neither fixes a bug nor adds a feature
     refactor: 重構（除了修復 bug 和新增功能的修改）
   • perf: A code change that improves performance
     perf: 性能優化
   • test: Adding missing tests or correcting existing tests
     test: 測試代碼修改
   • build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
     build: 構建工具或者外部依賴更改
   • ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
     ci: 修改 CI 配置文件和腳本文件
   • chore: Other changes that don't modify src or test files
     chore: 不修改 src 或 test 文件的其它變動
   • revert: Reverts a previous commit
     revert: revert 以前的某一次 commit

2. What is the scope of this change (e.g. component or file name): (press enter to skip)
   說明這次提交的影響範圍（好比：視圖層或者某個文件名）（回車跳過）

3. Write a short, imperative tense description of the change (max 95 chars):
   簡短描述

4. Provide a longer description of the change: (press enter to skip)
   詳細描述（回車跳過）

5. Are there any breaking changes? (y/N)
   有沒有與上個版本不兼容的更改？

6. Does this change affect any open issues? (y/N)
   這次提交是否針對某個 issues？

使用 conventional-changelog 生成 Change log

若是咱們的 commit message 都符合上面的規範，那麼在項目發佈時就能夠自動生成 Change log 文檔。

安裝

npm install -D conventional-changelog-cli
複製代碼

配置

// package.json
{
  "scripts": {
      "...": "..."
      "changelog": "conventional-changelog -p angular -i ./你的自定義路徑/CHANGELOG.md -s -r 0"
  },
  "...": "..."
}
複製代碼

運行npm run change log 便可生成 CHANGELOG.md 文檔。