Node.js 程式碼規範：ESLint 與 Prettier 的完美整合指南

當開發團隊變大或專案邏輯變得複雜時，每個人寫程式的風格差異（例如：有人用單引號、有人縮排習慣不同）會導致代碼難以維護。為了維持程式碼的高品質與一致性，我們需要 ESLint (邏輯檢查) 與 Prettier (視覺排版) 這對黃金組合。

ESLint：專案的「健康檢查員」

ESLint 的核心目標是找出你程式碼中的「邏輯潛在錯誤」以及「不安全感」。

功能：抓出未定義的變數、禁止使用 eval、強制執行特定的語法標準（如 ES6+）。
安裝與初始化：
```
npm install eslint --save-dev
npx eslint --init
```
建議選擇知名的風格規範，如 Airbnb 或 Standard。

Prettier：程式碼的「美容師」

Prettier 是一套「有主見」的排版工具。它不關心你的程式邏輯，只在乎你的 HTML/CSS/JS 長得漂不漂亮。

功能：自動處理縮排、分號、換行長度。

安裝：

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

解決兩者衝突：完美整合方案

ESLint 有時也會處理想法，這會與 Prettier 產生衝突。解決方案是讓 ESLint 負責邏輯，Prettier 負責排版。

在 .eslintrc.json 中配置：

{
  "extends": [
    "eslint:recommended",
    "prettier" // 務必放在最後面，用來關閉與 Prettier 衝突的規則
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error" // 強制執行 Prettier 規範
  }
}

自動化實戰：Husky 與 lint-staged

與其手動執行指令，不如在「送出程式碼 (Git Commit)」前自動檢查。這能保證進入 Repository 的代碼永遠是符合標準的。

安裝：npm install husky lint-staged --save-dev

設定：在 package.json 加入：

"lint-staged": {
  "*.js": ["eslint --fix", "prettier --write"]
}

VS Code 終極體驗：儲存即修復

在編輯器中安裝 ESLint 與 Prettier 插件，並在 settings.json 加入：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

現在，每次按下存檔，你的程式碼就會自動變得整整齊齊且排除了低級錯誤。

總結

ESLint 顧邏輯，Prettier 顧門面。
透過 eslint-config-prettier 達成兩者的和平共處。
善用 Husky 守住最後一道防線，讓「爛程式碼」永遠無法被提交。