配置git提交規范跟規范校驗（ESLint、commitLint、husky）

應用場景

在多人協作項目中，如果代碼風格統一、代碼提交信息的說明准確，那么在后期協作以及Bug處理時會更加方便。下面介紹2種工具

1、git提交規范，我們使用Commitizen工具來撰寫合格的 Commit message

第一步：全局安裝，安裝命令如下。

npm install -g commitizen

第二步：在項目目錄里，運行下面的命令，使其支持 Vue 的 Commit message 格式。

commitizen init cz-conventional-changelog --save --save-exact

第三步：配置，打開項目的 package.json 文件，配置如下。

{
  "scripts": {
    "commit": "git-cz",
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-conventional-changelog"
    }
  }
}

以后，凡是用到git commit命令，一律改為使用git cz。這時，就會出現選項，用來生成符合格式的 Commit message。

注意：

全局安裝使用 git cz 來代替 git commit

局部安裝使用 npm run commit 腳本來代替 git commit

我們上面的是使用全局安裝

2、安裝配置commitlint、配置一套屬於我們自己的git commit msg 校驗規則

第一步：安裝如下工具

npm install @commitlint/cli --save-dev  
npm install @commitlint/config-conventional --save-dev

第二步：初始化@commitlint/cli的配置文件，在項目根目錄創建名為commitlint.config.js的文件，代碼如下：

 

/* 'feat', //新功能
  'fix', //修補
  'docs', //僅文檔新增改動
  'style', //僅樣式改動
  'refactor', //重構（即不是新增功能，也不是修改bug的代碼變動）
  'test', //測試用例
  'code' //優化代碼 
*/
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'code']
    ]
  }
}

這個時候我們進行

 

git add .
git commit -m ""

 

git commit的時候會觸發commlint。進行提交規范校驗！！！

 

上面我們就完成了commitlint的安裝與提交規范的制定。檢驗commit message的最佳方式是結合git hook，所以需要配合Husky

3、理解git hooks 和 使用husky制定提交時作代碼校驗

husky繼承了Git下所有的鈎子，在觸發鈎子的時候，husky可以阻止不合法的commit,push等等。注意使用husky之前，必須先將代碼放到git 倉庫中，否則本地沒有.git文件，就沒有地方去繼承鈎子了。

husky：一個git鈎子工具，這里主要用pre-commit鈎子。通俗點講就是husky可以在你commit之前幫你做一些事情。

lint-staged：在你提交的文件中，執行自定義的指令。比如進行一些文件的格式化還有自動修復等等！！！

第一步：安裝，命令如下

npm i -D husky lint-staged pretty-quick

第二步：在package.json中配置上我們的husky的選項

 "husky": {
    "hooks": {
      "pre-commit": "lint-staged" // pre-commit，提交前的鈎子
    }
  },
  "lint-staged": {
    // 此處可以配置文件夾和文件類型的范圍
    "src/**/*.{jsx,txs,ts,js,json,css,vue}": [
      "prettier --write", // 先使用prettier進行格式化
      "eslint --fix", // 再使用eslint進行自動修復
      "git add" // 所有通過的話執行git
    ]
  }

第三步：把前面配置好commitlint結合到husky，加入

"commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 

package.json中配置完整代碼如下

 "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 
      "pre-commit": "lint-staged" // pre-commit，提交前的鈎子
    }
  },
  "lint-staged": {
    // 此處可以配置文件夾和文件類型的范圍
    "src/**/*.{jsx,txs,ts,js,json,css,vue}": [
      "prettier --write", // 先使用prettier進行格式化
      "eslint --fix", // 再使用eslint進行自動修復
      "git add" // 所有通過的話執行git
    ]
  }

這段配置告訴了git hooks，當我們在當前項目中執行 git commit -m '測試提交' 時將觸發commit-msg事件鈎子並通知husky，從而執行 commitlint -E HUSKY_GIT_PARAMS命令，也就是我們剛開始安裝的./node_modules/.bin/commitlint，它將讀取commitlint.config.js配置規則並對我們剛剛提交的測試提交這串文字進行校驗，若校驗不通過，則在終端輸出錯誤，commit終止。

通過以上步驟，我們就完成了整個規范的配置

4、總結整個工作流程及原理

husky和commitlint工作流程原理大致如下

 

 

 簡要通俗原理

 

5、集成ESLint，可以看其他文字里面的配置

6、最后我們，我們在package.json配置一下簡便命令

 

 

 以上配置完結合實際情況配置npm命令完整代碼如下

  "scripts": {
    "c": "git add . && git-cz && git push",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "eslint --fix --ext .js,.vue src",
    "format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\"",
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "npm run lint"
    }
  },
  "lint-staged": {
    "src/**/*.{js,json,css,vue}": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ]
  },

 

我們就可以使用npm run c 來進行提交代碼跟進行進行提交代碼前的規范校驗及提交規范

 選擇完，下面的提示注解如下

> 1、What is the scope of this change (e.g. component or file name): (press enter to skip) ---- `填寫更改范圍（功能模塊等）`

> 2、Write a short, imperative tense description of the change (max 88 chars): ---- `簡易描述提交內容（必填）`

> 3、Write a short, imperative tense description of the change (max 88 chars): ---- `詳細描述提交內容（選填）`

> 4、Are there any breaking changes? (y/N) ---- `是否有破壞性更改（默認直接回車，No，有特殊情況可以說明）`

> 5、Does this change affect any open issues? (y/N) ---- `關閉現有的issues（目前未做issues管理，默認直接回車，No）`

注意：不要使用 git bash （不能進行鍵盤上下選擇）我們用vscode

 

 

 

參考學習文章：

https://zhuanlan.zhihu.com/p/100427908

https://blog.csdn.net/qq_29055201/article/details/89248572

https://blog.csdn.net/y491887095/article/details/80594043