建立 2025-08-18 更新 2026-09-28

VS Code 開發流程

VS Code 可以和 Docker 搭配得很好，主要有兩種用法：一是在編輯器裡直接管理容器，不用一直切換到終端機；二是用 Dev Containers 把整個開發環境放進容器，打開專案就自動裝好需要的程式語言和工具。第二種用法特別適合團隊：每個人的開發環境都一模一樣，新成員也不用花半天安裝環境。

要安裝哪些擴充套件？

在 VS Code 左側的擴充套件頁面搜尋並安裝：

擴充套件	用途
Container Tools	在側邊欄管理容器、Image、Volume 與網路
Docker	撰寫 Dockerfile 和 Compose 檔時提供自動完成與錯誤檢查，安裝時會一併裝好 Container Tools
Dev Containers	把容器當成開發環境

電腦上也要先裝好並啟動 Docker Desktop（或 Linux 上的 Docker Engine）。

舊教學裡的 Docker 擴充套件

2025 年起，微軟把原本 Docker 擴充套件裡「管理容器」的功能移到了 Container Tools。所以舊教學提到的 Docker 側邊欄，現在是 Container Tools 的畫面，操作方式大致相同。

在 VS Code 裡管理容器

安裝後，左側會多出一個容器圖示，點開可以看到所有容器、Image、Volume 和網路。

常用操作都在右鍵選單裡：

容器：Attach Shell（打開容器的終端機）、View Logs（看日誌）、Restart、Remove。
Image：Run（啟動容器）、Push（上傳到倉庫）、Remove。
compose.yaml 檔案：Compose Up、Compose Down。

還沒寫 Dockerfile 的話，按 Ctrl+Shift+P 打開命令面板，執行 Containers: Add Docker Files to Workspace...，選擇程式語言後會自動產生 Dockerfile、.dockerignore 和 Compose 檔。

Dev Containers：在容器裡寫程式

它解決什麼問題？

一般開發時，要在自己電腦裝好 Python、Node.js、資料庫等工具，而且版本要跟同事一致。換了電腦或加入新專案，又要重裝一次。

Dev Containers 的做法是：在專案裡放一份設定檔，描述開發環境需要什麼。VS Code 會依照這份設定建立一個容器，把專案資料夾放進去，之後你在 VS Code 裡打的終端機指令、執行的程式、裝的擴充套件，全部都在容器裡。你的電腦只需要 Docker 和 VS Code。

第一次使用

用 VS Code 打開專案資料夾。
按 Ctrl+Shift+P，執行 Dev Containers: Add Dev Container Configuration Files...。
選一個範本，例如 Python 3，VS Code 會建立 .devcontainer/devcontainer.json。
右下角出現提示時，點 Reopen in Container（或從命令面板執行 Dev Containers: Reopen in Container）。

第一次會花幾分鐘下載和建立容器，之後就很快了。左下角顯示 Dev Container: ... 代表你已經在容器裡。

設定檔長什麼樣子？

.devcontainer/devcontainer.json：

{
  "name": "Python 開發環境",
  "image": "mcr.microsoft.com/devcontainers/python:3.12",
  "postCreateCommand": "pip install -r requirements.txt",
  "forwardPorts": [8000],
  "customizations": {
    "vscode": {
      "extensions": ["ms-python.python"]
    }
  }
}

設定	意思
`image`	開發環境用的 Image。微軟在 `mcr.microsoft.com/devcontainers/` 提供各種語言的現成環境
`postCreateCommand`	容器建好後執行一次，通常用來安裝套件
`forwardPorts`	把容器的連接埠轉到你的電腦，瀏覽器就能用 `localhost:8000` 打開
`extensions`	在容器裡自動安裝的 VS Code 擴充套件

把 .devcontainer 資料夾一起放進 Git，同事打開專案時也會得到一樣的環境。

需要資料庫怎麼辦？

可以改用 Compose 檔描述開發環境，devcontainer.json 改成指向 Compose 檔：

{
  "name": "App + Postgres",
  "dockerComposeFile": "compose.yaml",
  "service": "app",
  "workspaceFolder": "/workspace"
}

.devcontainer/compose.yaml：

services:
  app:
    image: mcr.microsoft.com/devcontainers/python:3.12
    volumes:
      - ..:/workspace:cached     # 把專案資料夾放進容器
    command: sleep infinity      # 讓容器一直開著，VS Code 才能連進去
  db:
    image: postgres:17
    environment:
      POSTGRES_PASSWORD: example

service: app 告訴 VS Code 要進入哪個容器。在容器裡，用 db 當主機名稱就能連到資料庫。

在容器裡除錯

在 Dev Container 裡除錯和平常完全一樣：設定中斷點、按 F5 就能開始，因為除錯工具本身也在容器裡執行。

參考資料

Containers in Visual Studio Code
Developing inside a Container
Dev Containers tutorial
教學課程：使用 Visual Studio Code 建立容器應用程式（微軟繁體中文）