4. VS Code 開發流程（Docker / Dev Containers）

建議安裝 VS Code 擴充套件：

• Docker（ms-azuretools.vscode-docker）
• Dev Containers（ms-vscode-remote.remote-containers）

4.1 Docker 擴充套件

• 以圖形介面管理 Containers / Images / Volumes / Networks
• 右鍵：Attach Shell、View Logs、Inspect、Prune
• 對 Dockerfile、docker-compose.yml 提供 IntelliSense 與動作

4.2 Dev Containers（容器即開發機）

• 每位開發者使用相同的容器環境，減少「在我電腦可用」
• 三種進入方式：在容器中重開資料夾 / 直接附加至容器 / 從定義建置

最小設定（.devcontainer/devcontainer.json）

{
  "name": "Node Dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  "postCreateCommand": "npm ci",
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "extensions": ["ms-azuretools.vscode-docker", "esbenp.prettier-vscode"]
    }
  }
}

與 Compose 整合

• 在 .devcontainer/docker-compose.yml 定義 app + db
• devcontainer.json 指向 Compose 檔與服務名稱

4.3 偵錯與工作流

• launch.json 連容器內的 Node/Python 進程
• 用 VS Code Tasks 一鍵：Build / Test / Lint