當你使用 Visual Studio Code 開發前後端專案時，是否常常需要重複打開終端機、切換目錄、執行啟動指令？這些看似日常的工作，其實可以透過 VS Code 內建的 tasks.json 設定檔自動化，讓開發流程更加順暢省力。本篇文章將會帶你從認識 tasks.json、進一步到實際專案應用，讓你感受自動化帶來的高效率。
什麼是 tasks.json？
tasks.json 是 Visual Studio Code 為工作區（Workspace）或專案目錄設計的自動化任務設定檔。你可以在專案內 .vscode/ 目錄下新增這個檔案，內容採用 JSON 格式，能夠定義各式各樣的指令，例如啟動伺服器、編譯程式、打包前端、執行測試等等。這些任務可以單獨執行，也能設計成多個任務「同步」或「依序」執行，大幅減少重複操作，提升你的開發效率。
實際案例：前後端自動啟動
假設你正在開發一個前後端分離的專案，資料夾結構如下：
專案根目錄/
├─ backend/
│ └─ package.json
├─ frontend/
│ └─ package.json
└─ .vscode/
└─ tasks.json
每次開始開發時，你都要先進入 backend 目錄執行 npm run dev，再進入 frontend 目錄執行 npm run serve。透過 tasks.json，你可以將這兩個指令自動化。
設定 tasks.json 範例
在 .vscode/tasks.json 中填入如下內容：
{
"version": "2.0.0",
"tasks": [
{
"label": "啟動後端",
"type": "shell",
"command": "npm run dev",
"options": {
"cwd": "${workspaceFolder}/backend"
},
"problemMatcher": []
},
{
"label": "啟動前端",
"type": "shell",
"command": "npm run serve",
"options": {
"cwd": "${workspaceFolder}/frontend"
},
"problemMatcher": []
},
{
"label": "全部啟動",
"dependsOn": [
"啟動後端",
"啟動前端"
],
"dependsOrder": "parallel"
}
]
}
這個設定檔會讓你在 VS Code 裡選擇「全部啟動」時，自動同時開啟兩個內建終端機分頁，分別幫你進入對應目錄並執行啟動指令。
如何啟動自動化任務？
設定好 tasks.json 後，只需在 VS Code 按下 Ctrl+Shift+P，搜尋「Tasks: Run Task」，就能選擇「全部啟動」。你會看到下方終端機分頁自動跑起來，無須手動輸入任何指令。若常用這些任務，也可以自訂鍵盤快捷鍵，讓自動化更加方便。
進階應用：打包、測試、編譯全自動
tasks.json 不只適用於啟動專案，也可以串接各種開發流程。例如你想要一鍵完成前端打包，或是自動執行測試、編譯程式，甚至可以利用 dependsOn 設計任務執行順序，像是先測試通過才打包，或是同時編譯多個子專案，彈性極高。
常見疑問與解法
有些開發者會問，能不能讓 tasks.json 在每次打開專案時就自動啟動？目前 VS Code 原生並沒有提供這個功能，是為了考量安全性與使用者掌控。
結語
熟悉並善用 tasks.json，你會發現開發流程不再被重複瑣事耽誤，專注在程式本身。自動化不只是懶人福音，更是專業工程師養成的關鍵技巧。下次當你覺得某個工作太瑣碎，不妨試著寫進 tasks.json，讓 VS Code 為你分憂！