ESLint結合Git Hooks實作代碼送出前的lint檢查

• 前言
• 一、Git Hooks是什麼
• 二、Husky子產品的使用
• 三、lint-staged

前言

在團隊開發過程中，如果團隊裡的某一個成員沒有按照要求去使用lint工具，或者說他壓根忘記了去使用lint工具，最後直接把有問題的代碼送出到了遠端倉庫，這種情況下我們在後期進行項目內建的時候，就會導緻整個項目的代碼出現大問題，在這個時候我們的lint工具就喪失了它的意義。

而本身來說呢，我們使用lint的目的就是為了確定我們送出到倉庫的代碼都是沒有問題的，而且格式也是良好的，那麼我們該怎麼解決這個問題呢。

如果我們隻是單純的靠口頭限制要求團隊成員在送出代碼之前都必須執行lint，這樣的結果必然滞留于形式，是以更好的辦法就是通過某種方式，我們可以強制要求代碼在送出之前，必須要先通過lint的檢查，這也就是我們接下來學習的Git Hooks。

一、Git Hooks是什麼

Git Hooks也稱為git鈎子，每個鈎子都對應一個任務。（例如commit、push）

我們可以直接找到某個具體的鈎子，然後通過編寫一些具體的shell腳本，定義一些當鈎子觸發的時候要去執行的任務。

我建立了一個目錄，并初始化了git倉庫。

打開 .git，我們可以看到其中的hooks目錄

hooks目錄鐘存放了很多sample檔案，這裡面的每一個sample，其實就是每一個git鈎子

在這裡我們隻需要去關注pre-commit.sample這個鈎子，因為它對應的就是commit操作，當我們在執行commit的時候就會去觸發這個鈎子當中所定義的一些任務。

我們将pre-commit.sample拷貝一份，重命名為pre-commit，将其内容修改為如下：

#!/bin/sh // 決定我們目前代碼的運作環境
echo "before commit test text" // 編寫一段簡單的代碼以作示範
           

然後在項目目錄下建立一個測試的txt檔案，随便寫點内容，之後執行git操作

可以看到我們剛才在鈎子中自定義的内容在這裡輸出了

二、Husky子產品的使用

我們希望通過git鈎子在代碼送出之前去強制對代碼執行lint操作，但是這裡我們就遇到了一個很現實的問題，比如說，當下很多前端開發者并不擅長使用shell腳本來編寫功能，而目前的功能又是我們必須要去使用的，是以就有人開發了一個npm子產品，直接将Git Hooks的操作進行一個簡單化的實作，這個子產品就是Husky。

有了Husky子產品，我們就可以實作在不編寫shell腳本的情況下，也能夠去直接使用git鈎子所帶來的一些功能。

在使用Husky之前，我們需要将我們先前測試鈎子所建立的pre-commit檔案删除掉，否則它會影響到Husky的工作。

安裝Husky

yarn add husky --dev
           

配置package.json

"scripts":{
    "lint":"eslint ./index.js --fix"
  },
"husky":{
    "hooks":{
      "pre-commit":"npm run lint"
    }
  }
           

這樣我們在使用git送出代碼的時候就會執行

npm run lint

，也就是執行

eslint ./index.js --fix

三、lint-staged

經過以上對Husky的使用，我們已經可以對代碼在commit之前進行lint檢查，但是如果我們想要在檢查之後再對代碼進行一些後續的操作，例如格式化，這時候Husky就顯得有些不夠用了。

是以我們就要用到另一個子產品，也就是 lint-staged。它可以配合Husky，再對代碼繼續執行一些其他的操作。

安裝lint-staged

yarn add lint-staged --dev
           

配置package.json

"scripts": {
    "precommit":"lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  },
  "lint-staged":{
    "*.js":[ // 在這裡配置一些我們後續想要執行的任務
      "eslint --fix",
      "git add"
    ]
  }
           

如此一來，我們對代碼修改後，執行

git add .

，再執行

git commit -m "111"

送出代碼，就會執行

eslint --fix

指令，檢查代碼沒問題後會繼續執行

git add

指令，最後我們就可以通過

git push

将代碼推送至遠端倉庫了。