昨天討論了檔案該如何放置的專案結構，今天就來研究一下「專案標準」（Project Standards）吧～

目前公司裡前端團隊雖然只有我一人，但為了維持程式碼的一致性、可維護性，還是必須有一套明確的專案標準。同時，透過一些自動化工具來檢查程式碼，也能大幅減少後續的維護成本和潛在問題。今天要介紹三個在專案標準中不可或缺的工具：ESLint、Prettier 和 Husky，這三者能夠幫助我們更有效率地建立和維護專案標準。

ESLint：把錯誤攔截在開發過程中

ESLint 是一個專門用來檢查 JavaScript 及 TypeScript 程式碼的靜態檢查工具，它不僅能檢查語法錯誤，幫助我們在開發階段及早發現潛在的錯誤，還可以設定特定的規則來幫助進行 React 的最佳實踐！那常見的三大風格分別是 Airbnb（最嚴格）、Google、Standard。

分享一下，之前去一場前端聚會時，有人提到「不可能有人公司沒裝 ESLint 吧」，真的由此可見它的重要性XD

Prettier：超好用的排版工具

Prettier 是一個自動化的程式碼格式化工具，能將程式碼排成為統一的風格，搭配 IDE 後可以在按下儲存後自動排版。要注意的是，Prettier 不會檢查錯誤，它只負責程式碼的「美觀」的部分，這樣聽起來好像沒什麼，但在格式統一時，不同開發者之間的程式碼衝突會大幅減少，而且在程式碼提交前自動格式化程式碼，也能減少人為錯誤。

ESLint + Prettier

ESlint 能幫助確保程式碼品質，Prettier 能幫助排版，兩者結合後能「按下熱鍵觸發 Prettier-ESLint 的自動排版與糾錯」。

不知道大家有沒有踩過這邊的雷 QQ，以下也整理幾個觀念～

• 安裝完 ESLint 後，配置的規則會在 .eslintrc.js ，想配置什麼規則可以與團隊討論，但 eslint-plugin-react-hooks 推薦必裝，或 Next 官方文件 也有幾些基本的推薦～
• 要能讓 ESLint 搭配 Prettier，要處理的是 Prettier-Eslint 這部分，需要安裝以下：
  • eslint-config-prettier：關閉 ESLint 中可能與 Prettier 衝突的規則。
  • eslint-plugin-prettier：把 Prettier 當作 ESLint 規則來執行，讓 ESLint 同時處理語法錯誤和格式問題。
  • 放一下官方的參考：Integrating with Linters
• 在安裝的時候如果一直無法成功使用，也要確認是不是 IDE 的問題，仔細檢查到底是哪個環節出錯，像是使用 VSCode 的人，看看有沒有安裝到 ESLint 與 Prettier ESLint。

Husky：自動化程式碼檢查的守門員

過去有使用 commitlint 來快速確保 commit 訊息符合一定的標準，最近跟朋友聊天才知道原來 hosky 可以在 commit 之前自動執行 ESLint 檢查和 Prettier 格式化，可以參考官方文件來實作～

參考資料

• bulletproof-react - Project Standards
• Next - ESLint
• Prettire - Integrating with Linters
• Hosky