現已釋出！閱讀關於 11 月新增功能和修復的內容。

Dev Containers 教程

本教程將引導您使用 Dev Containers 擴充套件，在 Docker 容器中執行 Visual Studio Code。完成本教程無需 Docker 基礎知識。

在 Docker 容器內部執行 VS Code 可能有多種原因，但在此過程中，我們將重點介紹使用 Docker 容器來設定一個與本地環境隔離的開發環境。

先決條件

您需要安裝 Visual Studio Code。

安裝 Docker

需要 Docker 來建立和管理您的容器。

Docker Desktop

下載並安裝 Docker Desktop，或者 替代的 Docker 選項，例如遠端主機上的 Docker 或相容 Docker 的 CLI。

啟動 Docker

執行 Docker Desktop 應用程式以啟動 Docker。如果檢視活動托盤並看到 Docker 鯨魚圖示，則表示它正在執行。

Docker 可能需要幾分鐘才能啟動。如果鯨魚圖示正在動畫，它可能仍在啟動過程中。您可以單擊圖示檢視狀態。

Docker status

檢查 Docker

Docker 執行後，您可以開啟一個新的終端視窗並鍵入以下命令來確認一切正常：

docker --version
# Docker version 18.09.2, build 6247962

安裝擴充套件

Dev Containers 擴充套件允許您在 Docker 容器內執行 Visual Studio Code。

安裝 Dev Containers 擴充套件

Dev Containers extension

檢查安裝

安裝 Dev Containers 擴充套件後，您會在最左側看到一個新的狀態列項。

Remote Status bar item

遠端狀態列項可以快速顯示 VS Code 正在哪個上下文（本地或遠端）中執行，單擊該項將開啟 Dev Containers 命令。

Dev Containers commands

獲取示例

要建立 Docker 容器，我們將開啟一個帶有 Node.js 專案的 GitHub 儲存庫。

開啟命令面板（F1），執行命令Dev Containers: Try a Dev Container Sample...，然後從列表中選擇 Node 示例。

Select a sample from the list

注意：還有其他開發容器示例，例如 vscode-remote-try-python 或 vscode-remote-try-java，但本教程將使用 vscode-remote-try-node。

等待容器構建完成

然後視窗將重新載入，但由於容器尚不存在，VS Code 將建立一個容器並將示例儲存庫克隆到一個隔離的 容器卷中。這可能需要一些時間，進度通知將提供狀態更新。幸運的是，下次開啟資料夾時不需要執行此步驟，因為容器已存在。

Dev Container Progress Notification

容器構建完成後，VS Code 會自動連線到它，並將專案資料夾從您的本地檔案系統對映到容器中。

檢查容器

容器執行並連線後，您應該會看到狀態列左下角的遠端上下文發生變化。

Building image

檢查您的環境

在容器中進行開發的一個好處是，您可以使用應用程式所需的特定版本的依賴項，而不會影響本地開發環境。

本教程的特定容器已安裝 Node.js v18，您可以透過開啟新終端終端 > 新建終端（⌃⇧` (Windows, Linux Ctrl+Shift+`)）並輸入以下命令來檢查：

node --version; npm --version

這應該會顯示以下版本：

Node.js version check

執行應用程式

我們現在可以按 F5，它將在容器內執行應用程式。程序啟動後，導航到 https://:3000，您應該會看到簡單的 Node.js 伺服器正在執行！

Running the application

結束您的容器連線

您可以透過檔案 > 關閉遠端連線來結束容器中的會話，並返回到本地執行 VS Code。

工作原理

下一部分將更詳細地介紹 Dev Containers 擴充套件如何設定和配置您的容器。

Dev Containers 擴充套件使用 .devcontainer 資料夾中的檔案，即 devcontainer.json，以及可選的 Dockerfile 或 docker-compose.yml，來建立您的開發容器。

在我們剛剛探索的示例中，該專案有一個帶有 devcontainer.json 的 .devcontainer 資料夾。devcontainer.json 使用映象 mcr.microsoft.com/devcontainers/javascript-node:0-18。您可以在 devcontainers/images 倉庫中更詳細地檢視此映象。

首先，您的映象將從提供的 Dockerfile 或映象名稱構建，在本例中為 mcr.microsoft.com/devcontainers/javascript-node:0-18。然後，將使用 devcontainer.json 中的一些設定建立並啟動一個容器。最後，將根據 devcontainer.json 中的設定再次安裝和配置您的 Visual Studio Code 環境。例如，本示例中的開發容器將安裝 streetsidesoftware.code-spell-checker 擴充套件。

注意：將根據基礎映象的內容向容器新增其他配置。例如，我們上面看到了 streetsidesoftware.code-spell-checker 擴充套件，並且容器還將包括 "dbaeumer.vscode-eslint"，因為 這是 mcr.microsoft.com/devcontainers/typescript-node 的一部分。透過 devcontainer.json 進行預構建時，這會自動發生，您可以在 預構建部分中瞭解更多資訊。

完成所有這些操作後，您的本地 Visual Studio Code 副本將連線到執行在您的新開發容器中的 Visual Studio Code Server。

Architecture

devcontainer.json

devcontainer.json 基本上是一個配置檔案，用於確定如何構建和啟動您的開發容器。

//devcontainer.json
{
  "name": "Node.js",

  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",

  // Features to add to the dev container. More info: https://containers.dev/features.
  // "features": {},

  "customizations": {
    "vscode": {
      "settings": {},
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  },

  // "forwardPorts": [3000],

  "portsAttributes": {
    "3000": {
      "label": "Hello Remote World",
      "onAutoForward": "notify"
    }
  },

  "postCreateCommand": "yarn install"

  // "remoteUser": "root"
}

上面的示例摘自我們在教程中使用的 vscode-remote-try-node 儲存庫。

選項 描述
image VS Code 用於建立開發容器的容器登錄檔中（Docker Hub、GitHub Container Registry、Azure Container Registry）映象的名稱。
dockerfile 您可以不引用 image，而是使用 dockerfile 屬性，該屬性是您要用作映象的 Dockerfile 的相對路徑。
features 要新增的 Dev Container Feature ID 和相關選項的物件。
customizations 配置特定於工具的屬性，例如 VS Code 的 settings 和 extensions 屬性。
settings 將預設的 settings.json 值新增到特定於容器/機器的設定檔案中，例如 "terminal.integrated.defaultProfile.linux": "bash"。
extensions 擴充套件 ID 陣列，指定在建立容器時應安裝在容器內的擴充套件。
forwardPorts 使容器內的埠列表在本地可用。
portsAttributes 設定特定轉發埠的預設屬性。
postCreateCommand 容器建立後要執行的命令字串或命令引數列表。
remoteUser 覆蓋 VS Code 在容器中（以及子程序）執行的使用者。預設為 containerUser。

您可以檢視 devcontainer.json 選項的 完整列表。

恭喜

恭喜，你已成功完成本教程！

以上是對使用開發容器可能性的簡要概述。下一步，我們建議檢視如何 在容器中開啟本地計算機上的現有資料夾 或 在容器中開啟 GitHub 儲存庫或 PR。

檢視其他遠端開發擴充套件。

或者透過安裝遠端開發擴充套件包獲取所有這些擴充套件。

故障排除

驗證 Docker 上下文

如果您不是使用全新的 Docker 安裝，並且Dev Containers: Try a Dev Container Sample... 示例在使用當前上下文時遇到問題，則應檢查您的 Docker 上下文。全新安裝將有一個“default”上下文，您可以將其設定回當前上下文。

# Displays the list of contexts, '*' denotes the current context
docker context list

# Switches the list to the 'default' context
docker context use default
12/10/2025
© . This site is unofficial and not affiliated with Microsoft.