在前端項目中使用Git Hooks

在前端項目中使用Git Hooks

具備基本工程素養的同學都會注重編碼規範，而代碼風格檢查（Code Linting，簡稱 Lint）是保障代碼規範一致性的重要手段。

使用 Lint 會有什麼好處呢？在我看來至少具有如下 3 點：

• 更少的 Bug
• 更高的開發效率，Lint 很容易發現低級的、顯而易見的錯誤
• 更高的可讀性

很多時候我們lint的校驗是放在持續集成階段，大概流程如下：

代碼提交 --> 跑 CI 發現問題(遠程) --> 本地修復問題 --> 重新提交 --> 通過檢查(遠程)

但這樣有一個問題，我們的 CI(持續集成) 往往不是僅僅只做 Lint工作，它還有會有很多其它的任務（如打包文件，靜態資源上傳 CDN 等），這樣就導致特別的浪費時間，往往可能需要幾分鐘之後你纔會發現問題，或者有的時候你根本就沒有發現你的 CI 沒有跑通過。

常見的流程：本地寫好了代碼，提交，開始跑 lint，發現不通過，本地修改代碼，再提交，再等待 CI 的結果，若還有問題再重複之前的操作。

提交代碼Eslint檢查並自動格式化

在項目根目錄下安裝

npm install --save-dev husky lint-staged

修改package.json文件

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

如上配置，每次它只會在你本地 commit 之前，校驗你提交的內容是否符合你本地配置的 eslint規則(這個見文檔 ESLint )，如果符合規則，則會提交成功。如果不符合它會自動執行 eslint --fix 嘗試幫你自動修復，如果修復成功則會幫你把修復好的代碼提交，如果失敗，則會提示你錯誤，讓你修好這個錯誤之後才能允許你提交代碼。

優雅的提交你的Git Commit Message

在項目根目錄下安裝

npm install --save-dev @commitlint/cli @commitlint/config-conventional

在項目根目錄下新建.commitlintrc.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'subject-case': [0, 'never'],
    'type-enum': [
      2,
      'always',
      [
        'build', // 構建
        'ci', // ci
        'chore', // Other changes that don't modify src or test files. 改變構建流程、或者增加依賴庫、工具等
        'docs', // Adds or alters documentation. 僅僅修改了文檔，比如README, CHANGELOG, CONTRIBUTE等等
        'feat', // Adds a new feature. 新增feature
        'fix', // Solves a bug. 修復bug
        'perf', // Improves performance. 優化相關，比如提升性能、體驗
        'refactor', // Rewrites code without feature, performance or bug changes. 代碼重構，沒有加新功能或者修復bug
        'revert', // Reverts a previous commit. 回滾到上一個版本
        'style', // Improves formatting, white-space. 僅僅修改了空格、格式縮進、逗號等等，不改變代碼邏輯
        'test' // Adds or modifies tests. 測試用例，包括單元測試、集成測試等
      ]
    ]
  }
}

修改package.json文件

  "husky": {
    "hooks": {
      ...
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },

這樣，每次提交都會檢測message信息，如果不符合要求，則提交不成功。