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

最終實現效果說明：
用 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 以後出現該文件）

1、步驟以下（下面是 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-commit\src\test.js:2:19: Extra semicolon.
------------------------------------------------
// 利用 snazzy 美化後的錯誤提示：
2:19  error  Extra semicolon
✖ 1 problem

2、步驟以下（下面是 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:\fe\pre-commit\src\test.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 博客：傳送門