一、前言

現在最流行的版本管理工具非git莫屬，而良好的程式碼規範有助於專案的維護，為了防止一些不規範的程式碼 commit並push到遠端,我們可以在git命令執行前用一些鉤子來檢測並阻止。現在大前端主要有兩種git鉤子外掛：husky（jquery與next.js都在用），pre-commit(antd在用)。
下面我將現介紹一個git鉤子，再介紹下husky與pre-commit的用法

二、git鉤子

用過git的小夥伴們都知道git有很多命令commit、push、rebase等等。那這些命令主要是在執行.git資料夾中的東西，那麼git 鉤子目錄就是在.git資料夾的hooks下，如下所示：

    cd .git/hooks
    ls -l

hook.png

上圖為各個鉤子的案例指令碼，可以把sample去掉，直接編寫shell指令碼來執行。
而前端的小夥伴們則可以用外掛husky與pre-commit，來使鉤子生效。

注意： 一般.git為隱藏檔案，可以把專案拖入IDE中檢視,.git檔案裡的內容一般不允許手動更改的。

三、husky

husky能夠防止不規範程式碼被commit、push、merge等等。
首先安裝husky

    npm install husky --save-dev

或

    yarn add husky --dev
 

編輯package.json檔案，如：

{
  "scripts": {
    "precommit": "webpack  --config ./web/webpack.config.js",
    "...": "..."
  }
}

當你git commit的時候，將會現現執行 precommit裡的指令碼，沒有問題了再提交。

husky.png

具體案例可檢視https://github.com/raoenhui/create-img

四、pre-commit

pre-commit能夠防止不規範程式碼被commit，沒有husky這麼全面，但是你可以接著安裝pre-push

首先安裝pre-commit

    npm install pre-commit --save-dev

編輯package.json檔案，如：

"scripts": {
    "test": "echo \"Error: I SHOULD FAIL LOLOLOLOLOL \" && exit 1",
    "foo": "echo \"fooo\" && exit 0",
    "bar": "echo \"bar\" && exit 0"
  },
  "pre-commit": [
    "foo",
    "bar",
    "test"
  ]

pre-commit的配置項非常靈活，還可以下面這樣寫：

{
  "precommit": "foo, bar, test"
  "pre-commit": "foo, bar, test"
  "pre-commit": ["foo", "bar", "test"]
  "precommit": ["foo", "bar", "test"],
  "precommit": {
    "run": "foo, bar, test",
  },
  "pre-commit": {
    "run": ["foo", "bar", "test"],
  },
  "precommit": {
    "run": ["foo", "bar", "test"],
  },
  "pre-commit": {
    "run": "foo, bar, test",
  }
}

你配置好後，執行git commit命令，它將會依次執行foo、bar、test來檢測完善程式碼。

五、總結

我們已經怎麼用git鉤子外掛了，那麼我們一般用它來做什麼呢。
prevent commit時，我們可以把eslint以及test命令加上，檢測程式碼規範：

"scripts": {
    "precommit": "lint-staged && npm run test"
  }

prevent publish 主幹分支時，我們可以把tag打上：

"scripts": {
    "precommit": "npm run tag"
  }

具體怎麼自動化打tag標籤，可以參考我的另