Pre-commit：如何使用 husky、lint-staged和prettier優化你的項目

在軟件開發過程中，代碼風格檢查（Code Linting）是保障代碼規範和一致性的有效手段。過去，Lint 的工作一般在 Code Review 或者 CI 的時候進行，但這樣會導致問題的反饋鏈，浪費不必要的時間。因此，我們需要利用 Git 的 Pre Commit 鉤子，將 Lint 過程放到開發者提交代碼之前。

簡介

簡單介紹一下這三個工具：

• prettier 用來優化代碼格式，比如縮進、空格、分號等等
• husky 可以用於實現各種 Git Hook。這裏主要用到 pre-commit這個 hook，在執行 commit 之前，運行一些自定義操作
• lint-staged 用於對 Git 暫存區中的文件執行代碼檢測

安裝

首先，我們使用下面的命令把 husky 和 lint-staged 安裝到package.json的 devDependencies中：

npm install husky lint-staged prettier --save-dev
或者
yarn add husky lint-staged prettier --dev

配置package.json

將下面的代碼追加到 package.json文件中：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "prettier --write",
      "vue-cli-service lint",
      "git add"
    ]
  }
}

上面示例中lint-staged下的選項是vue項目中常用的配置，你可以根據你項目的技術棧配置相應的代碼檢查。

• prettier --write會自動美化你的代碼格式
• vue-cli-service lint是vue項目中語法檢查
• git add將更改後到文件添加到暫存區

.prettierrc文件

新建一個.prettierrc文件，將以下內容複製進去：

{
  "trailingComma": "es5", // 尾隨逗號
  "tabWidth": 4, // 縮進
  "semi": true, // 句尾分號
  "singleQuote": true, // 單引號
  "end-of-line": "lf" // 換行符
}

這樣，當在終端輸入 git commit命令提交代碼的時候，Lint 程序便會自動檢查本次提交所修改的文件是否符合本項目的代碼規範。如果代碼不符合規範，便會拒絕提交代碼。

如果想要跳過 Lint 程序，可以使用 git commit -no-verify 進行提交。

參看文獻

husky: https://www.npmjs.com/package/husky
lint-staged: https://www.npmjs.com/package/lint-staged
prettier: https://www.npmjs.com/package/prettier