用 git 鉤子，檢測程式碼規範性（eslint、standard）

gauseen發表於2018-03-07
GitEsLint

最終實現效果說明：
用 git commit 提交程式碼之前，利用 pre-commit git 鉤子，實現程式碼規範檢測（eslint、standard 規範），符合規範之後才可以提交到 git 倉庫。這樣在團隊合作開發時，可以統一程式碼風格，如果某些同志程式碼不符合規範，是無法進行提交程式碼的。

我的demo地址：
demo地址

規範doc：
standard規範
eslint規範

git 鉤子
git 鉤子

那麼問題來了，這種驗證是如何實現的呢？！

請確保已經安裝了： node | npm | git
安裝傳送門：node | npm | git

先說一下我的目錄結構：

               |——node_modules            # 專案資源依賴（npm install 之後出現改資料夾）
               |
pre-commit ——— |——src —— test.js          # 專案程式碼（專案業務邏輯）
               |
               |——package.json            # 本地安裝 npm 包 （npm init 之後出現該檔案）

一、步驟如下（下面是 standard 規範驗證）：

  • 先按照鄙人的目錄先建立目錄，然後先後執行如下命令：

       git init                                    // 將本地專案設定為 git 專案
   git remote add origin url                   // url 為自己的 git 倉庫地址
   npm init                                    // 將 pre-commit 專案設定為 npm 專案
   npm install --save-dev standard             // 安裝 standard 規範
   npm install --save-dev husky@next           // 安裝 husky git 鉤子
   npm install --save-dev snazzy               // 安裝 snazzy ，美化 standard 報錯提示，eslint 規範不需要安裝

  • 安裝好依賴資源後，更改 package.json 檔案

    // package.json
{
 "husky": {
   "hooks": {
     "pre-commit": "standard "src/**/*.{js,vue,wpy}" | snazzy",
   }
 }
}
注：檢測 src 目錄下的所有檔案字尾為 .js || .vue || .wpy 的檔案編碼，是否符合規範。
若不符合，git 鉤子將會阻止 git 繼續 commit, 並且會報出錯誤資訊；
若符合程式碼規範，git commit 就會成功提交到本地倉庫。

當然你可以繞過程式碼檢測強制提交:

git add . && git commit --no-verify -m "程式碼規範強制提交測試"

standard 規範錯誤提示如下：

// standard 規範預設錯誤提示：
D:pre-commitsrc	est.js:2:19: Extra semicolon.
------------------------------------------------
// 利用 snazzy 美化後的錯誤提示：
2:19  error  Extra semicolon
✖ 1 problem

二、步驟如下（下面是 eslint 規範驗證）：

  • 先按照鄙人的目錄先建立目錄，然後先後執行如下命令：

       git init                                    // 將本地專案設定為 git 專案
   git remote add origin url                   // url 為自己的 git 倉庫地址
   npm init                                    // 將 pre-commit 專案設定為 npm 專案
   npm install --save-dev eslint               // 安裝 eslint 規範
   npm install --save-dev husky@next           // 安裝 husky git 鉤子
   
   注意，執行命令：
   $ ./node_modules/.bin/eslint --init         // 生成 .eslintrc.js 檔案，可自定義程式碼風格

    注：eslint 自定義程式碼規範詳情 傳送門；.eslintrc.js配置詳解傳送門

  • 安裝好依賴資源後，更改 package.json 檔案

    // package.json
{
 "husky": {
   "hooks": {
     "pre-commit": "eslint "src/**/*.{js,vue,wpy}"",
   }
 }
}

當然你可以繞過程式碼檢測強制提交:

git add . && git commit --no-verify -m "程式碼規範強制提交測試"

eslint 規範錯誤提示如下：

// eslint 規範錯誤提示

D:fepre-commitsrc	est.js
  1:13  error  Strings must use doublequote                     quotes
  1:28  error  Expected linebreaks to be `LF` but found `CRLF`  linebreak-style
  1:28  error  Missing semicolon                                semi
  2:1   error  Unexpected console statement                     no-console
  2:20  error  Expected linebreaks to be `LF` but found `CRLF`  linebreak-style

✖ 5 problems (5 errors, 0 warnings)
✖ 1 problem

按照相應的錯提示，更改程式碼，符合規範後，即可提交到 git 倉庫。

宣告：有任何問題歡迎留言！未經作者同意禁止轉載！謝謝！

歡迎訪問我的 git 部落格：傳送門

相關文章