💡 前言

昨天我們學會了使用 Prettier 來處理程式碼的外觀美化，但光是字型整齊還不夠。在實際開發中，我們更需要防止潛在的邏輯漏洞或語法錯誤（例如：變數宣告了卻從未使用、引用了不存在的模組、誤用未定義的變數等）。

今天 Day 10 我們要登場的是靜態程式碼分析工具—— JavaScript/TypeScript 世界的 ESLint 以及 Python 世界的 Pylint / Flake8。它們就像是隨時站在你身邊的資深工程師，在寫 Code 的當下就幫你抓出潛在 Bug！

🎯 本篇重點

1. Formatter（排版）與 Linter（檢查）的根本差異
2. ESLint 設定：即時錯誤提示與存檔自動修復 (Auto Fix)
3. Pylint / Flake8 設定：Python 專案程式碼品質守護
4. 解決 ESLint 與 Prettier 的規則衝突

🔍 1. Formatter vs Linter：差別在哪裡？

• Formatter（如 Prettier）：只關心樣式。例如：換行、縮排、單雙引號、括號空格。它不關心你的程式碼邏輯對不對。
• Linter（如 ESLint / Pylint）：關心品質與潛在錯誤。例如：未使用的變數、死迴圈、未處理的 Promise、違反作用域規則等。

⚡ 2. ESLint：JavaScript / TypeScript 開發必備

Step 1：安裝 ESLint 擴充套件

在 VS Code 擴充套件商店搜尋並安裝 ESLint（由 Microsoft 提供）。

Step 2：在專案中初始化 ESLint

在專案終端機執行以下指令：

npm init @eslint/config

依提示勾選專案類別（如 React、Vue 或 Node.js）後，專案根目錄會生成 .eslintrc.js 或 eslint.config.js 設定檔。

Step 3：設定存檔自動修復

開啟全域或工作區的 settings.json，加入以下設定：

{
  "editor.codeActionsOnSave": {
    // 存檔時自動執行 ESLint 的可修復規則（如：自動移除未使用的引用）
    "source.fixAll.eslint": "explicit"
  }
}

🐍 3. Pylint / Flake8：Python 程式碼靜態檢查

對 Python 開發者而言，VS Code 官方提供了極為優秀的靜態檢查擴充套件：

1. 在擴充套件商店搜尋並安裝 Flake8 或 Pylint（官方出品套件）。
2. 開啟 settings.json 加入檢查與存檔自動修復配置：

{
  // 啟用 Flake8 進行語法與 PEP8 規範檢查
  "flake8.args": [
    "--max-line-length=88",
    "--ignore=E203,W503"
  ],
  // 搭配 Ruff 或 Black 進行自動修復
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  }
}

⚠️ 4. 防踩坑：解決 ESLint 與 Prettier 的規則衝突

有時候 ESLint 會要求句尾不加分號，而 Prettier 又強制句尾加上分號，導致存檔時程式碼一直閃爍或報錯。

解決方案：
在 JavaScript 專案中安裝 eslint-config-prettier：

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

並在 .eslintrc 的 extends 最後一行加上 "prettier"，即可關閉所有與排版相關的 ESLint 規則，讓 Prettier 專心管外觀，ESLint 專心抓 Bug！