如何在git commit時新增eslint校驗

陳廣亮發表於2018-09-14
GitMITEsLint

git Hooks

首先需要了解下 Git 鉤子

和其它版本控制系統一樣，Git 能在特定的重要動作發生時觸發自定義指令碼。 有兩組這樣的鉤子：客戶端的和伺服器端的。 客戶端鉤子由諸如提交和合並這樣的操作所呼叫，而伺服器端鉤子作用於諸如接收被推送的提交這樣的聯網操作。

安裝一個客戶端鉤子 鉤子都被儲存在 Git 目錄下的 hooks 子目錄中。 也即絕大部分專案中的 .git/hooks 。

pre-commit

pre-commit 鉤子在鍵入提交資訊前執行。 它用於檢查即將提交的快照，例如，檢查是否有所遺漏，確保測試執行，以及核查程式碼。 如果該鉤子以非零值退出，Git 將放棄此次提交，不過你可以用 git commit --no-verify (-n) 來繞過這個環節。 你可以利用該鉤子，來檢查程式碼風格是否一致（執行類似 lint 的程式）、尾隨空白字元是否存在（自帶的鉤子就是這麼做的），或新方法的文件是否適當。

測試 pre-commit

pre-commit.sample 裡有個檔名的檢查

➜  mkdir testHook
➜  cd testHook
➜  git init
Initialized empty Git repository in /Users/guangliang.chen/testHook/.git/
➜  cp .git/hooks/pre-commit.sample .git/hooks/pre-commit
➜  vi 測試.js // 新建中文名檔案
➜  git add 測試.js
➜  git commit -m "test hook"

Error: Attempt to add a non-ASCII file name.

This can cause problems if you want to work with people on other platforms.

To be portable it is advisable to rename the file.

If you know what you are doing you can disable this check using:

  git config hooks.allownonascii true
複製程式碼

所以我們可以在 pre-commit 裡新增 eslint 操作, 想通過修改 pre-commit 實現的參考這篇

不過./hooks/pre-commit 提交程式碼時不會同步提交，需要下載原始碼後移動到.hook 資料夾下，建議使用 pre-commit 庫

pre-commit && lint-staged

下面介紹下 pre-commit 和 lint-staged (官方建議跟 husky 一起使用，不過 pre-commit 好像用的人滿多)

  npm install pre-commit --save-dev
  npm install lint-staged --save-dev
複製程式碼

package.json

  "scripts": {
    "lint:staged": "lint-staged"
  },
  "lint-staged": {
    "linters": {
      "*.js": [
        "eslint --ignore-path .gitignore --fix"
      ]
    },
    "ignore": []
  },
  "pre-commit": "lint:staged",
複製程式碼

注：

  1. git hook 有很多，commit-msg post-commit 等等
  2. 專案有 eslint 配置
  3. 例子中只校驗 js 檔案，有需求可以新增其他檔案型別（給 lint-staged 點贊）
  4. --ignore-path .gitignore（建議使用，特殊需求使用.eslintignore）

相關文章