💡 前言

在前幾天的學習中，我們學會了如何使用 Git、執行測試以及進行除錯。但在日常開發裡，我們經常需要執行一些重複性極高的終端機指令——例如：編譯 TypeScript、執行程式碼 Lint 檢查、打包靜態檔案，或是啟動本地端測試伺服器。

如果每次都要手動打開 Terminal 輸入長長的指令（例如 npm run build:prod -- --watch），不僅繁瑣又容易打錯字。今天 Day 22 我們要來解鎖 VS Code 的強大自動化引擎——Tasks (tasks.json)，教你把所有常用指令封裝成一鍵執行的快捷動作！

🎯 本篇重點

1. 什麼是 VS Code Tasks？（終端機指令的捷徑）
2. **如何建立與設定專屬的 tasks.json**
3. 實用自動化腳本設定範例（Build 與 Watch 模式）
4. 將 Task 綁定快速鍵或設定為檔案存檔時自動觸發

🛠️ **1. 快速建立與理解 tasks.json**

VS Code 的任務系統允許你將任何 Shell 指令包裝成具有視覺化介面的「任務 (Task)」。

建立步驟：

1. 按下快捷鍵 Ctrl + Shift + P 開啟命令面板（Mac 為 Cmd + Shift + P）。
2. 輸入並選擇 Tasks: Configure Task（設定工作）。
3. 選擇 Create tasks.json file from template（從範本建立）。
4. 選擇 Others（建立一個自訂的外殼命令）。
5. VS Code 會在專案根目錄下的 .vscode 資料夾中自動生成一個 tasks.json 檔案。

📄 2. tasks.json 核心結構與範例

開啟生成的 tasks.json，我們來看一個完整的專案自動化配置範例：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build Project (專案打包)",
      "type": "shell",
      "command": "npm run build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      },
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "Run Linter (程式碼檢查)",
      "type": "shell",
      "command": "npm run lint",
      "group": "test",
      "presentation": {
        "reveal": "silent"
      }
    }
  ]
}

核心參數解析：

• label：任務的名稱，會在選單中顯示。
• type：執行類型（通常為 "shell"，代表透過系統終端機執行指令）。
• command：你要執行的實際終端機指令。
• group：將任務歸類。如果設定 "kind": "build" 且 "isDefault": true，按下快捷鍵 Ctrl + Shift + B（Mac 為 Cmd + Shift + B）就會直接執行這個打包任務！
• problemMatcher：讓 VS Code 的「問題面板」能夠自動攔截該指令輸出的錯誤或警告行數。

🚀 3. 如何執行與管理 Tasks

設定好 tasks.json 後，執行指令變得前所未有地輕鬆：

1. 按下快捷鍵 Ctrl + Shift + P，輸入並選擇 Tasks: Run Task（執行工作）。
2. 畫面會彈出你剛剛設定好的任務清單（例如 Build Project 與 Run Linter）。
3. 點擊其中一個，VS Code 內建的 Terminal 面板 就會自動切換並開始跑指令！

⚡ 4. 進階玩法：將 Task 綁定快速鍵或結合存檔事件

如果你希望更進一步自動化：

• 綁定專屬快速鍵：
打開鍵盤捷徑設定 (Ctrl + K, Ctrl + S)，搜尋 tasks.runTask，將你常用的自訂 Task 綁定一個順手的快捷鍵（例如 Ctrl + Alt + B），以後按一個按鍵就能直接打包。
• 結合存檔自動觸發：
搭配擴充套件（如 Run on Save），可以做到「每次按下 Ctrl + S 存檔時，自動在背景執行 Lint 檢查或單元測試」，實現極致流暢的現代開發體驗！