使用Husky提升你的項目規范

使用 ESLint, Prettier, Husky, Lint-staged 提升你的項目規范

本文寫於 2020 年 11 月 7 日

大家應該都知道 ESLint 與 prettier，他們的用途分別在於約束代碼和美化代碼格式。

但我們並不能保證每次提交代碼之前我們的項目都執行過了 ESLint 與 prettier，所以我們需要 Git Hook，它能讓我們在 git 操作的各個階段進行一些自定義的操作。

例如在 commit 時，我們會在 commit 之前執行 ESLint 與 prettier，如果執行出錯，git 就會停止 commit 操作。

本文介紹的流程為：

1. 利用 ESLint 和 Prettier 來提升代碼質量；
2. 套用如 Airbnb Style Guide 這類大型團隊的 Style Guide；
3. 使用 yarn/npm run lint 來格式化所有代碼；
4. 使用 Husky 及 Lint-staged 在 git commit 之前測試代碼品質。

Prettier

首先介紹 Prettier，一個代碼格式化工具。

Prettier 主要用來整理我們的代碼格式。它刻意不提供太多的客制化功能，目的是不讓開發團隊花太多時間在討論該用怎樣的 Style，而能夠有個一致的設計規范。

即使使用上 Prettier 絕大多數的定制選項，你的 JSON 文件也許也就只有 10 行。

Prettier 提供的另一項好處就是安裝后即可上手，要安裝只需要：yarn add --dev prettier，然后 ./node_modules/.bin/prettier --write file-path 即可格式化文件。

官網寫的是 --write . 可以格式化所有文件，但在嘗試后發現不太行，我們需要使用通配符來配置：./node_modules/.bin/prettier --write src/**。

如果想要定制一些選項，可以創建 .prettierrc.json 文件，具體配置可以在官網查詢，只有十幾項。如果存在想忽略的文件夾，則可以新建一個 .prettierignore 文件夾。

ESLint

Linter 是一種靜態程式分析的工具，能夠幫助使用者找出程式中不符合團隊定義之規則的代碼。

對於 Javascript 這種動態的、弱類型的語言，如果能夠加上一個在寫程式時就提醒我們，哪一段代碼在執行時可能會出問題的工具，可謂百利而無害！

ESLint 跟 Prettier 的區別在於：Prettier 旨在統一「代碼樣式」，而 ESLint 則重視「代碼質量」。

例如在 ES6 環境中使用 const/let 而非 var、移除未被使用而無意義的 import、若是 function 的循環復雜度過高則需要調整設計等。

eslint 的另一個好處是：我們可以使用別人設定好的規則。

以這幾年最流行的 Style Guide 為例：為 Github、MongoDB 等知名公司所使用的 Javascript Standard Style；Airbnb 所使用的 Airbnb Style Guide；以及 Google 的 Google Style Guide。

我比較喜歡 Airbnb 的 Style。

首先，可以安裝 eslint：yarn add eslint，然后可以使用 npx eslint --init。一步步跟隨者他的引導，選擇 Airbnb 的代碼樣式。

eslint 有兩個常用的命令：eslint --fix file-path 與 eslint file-path。前者是修復可以自動修復的錯誤，后者是尋找是否存在 eslint 可以檢查出得錯誤。

加入 scripts

這個時候我們的流程應該是什么呢？

1. 首先使用 prettier 格式化代碼；
2. 然后使用 eslint 修復可以自動修復的錯誤；
3. 最后再使用 eslint 查看哪些文件存在錯誤，我們去一一進行修改。

所以，我們可以將這些操作加進 package.json 的 scripts 之下：

"scripts": {
  "lint": "./node_modules/.bin/prettier --write 'src/**' && ./node_modules/.bin/eslint --fix 'src/**' && ./node_modules/.bin/eslint ."
}

Husky 與 Lint-staged

當我們有了 Prettier 和 ESLint，在開發時已經能為我們避免掉許多不符合要求的代碼了。或是當我們拿到一個新項目的時候，也可以通過這些步驟去格式化整個工程。

但就像文章開頭說的那樣，我們還需要 git hook 來幫助我們在 git 操作時進行操作——可以使用 Husky。

Husky 可以讓我們在 git commit 或 git push 時執行一些動作，而 Lint-staged 則讓我們可以 lint 那些已經 git add 的文件。

這兩者的組合能夠在我們真正 commit 之前就檢查我們的代碼是否符合我們的要求，同時可以主動幫我們修好一些能夠修的錯誤。

yarn add -D husky lint-staged

接着在根目錄創建 .huskyrc.json，寫入：

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

然后再在根目錄創建 .lintstagedrc.json，來檢查並修正文件：

{
  "*.+(ts|js|tsx|jsx)": ["prettier --write", "eslint --fix"],
  "*.+(json|css|md)": ["prettier --write"]
}

如此一來，你每次 commit 之前，都會對文件執行操作了。

（完）