开发容器（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

Docker 运行后，您可以通过打开一个新的终端窗口并输入以下命令来确认一切正常

docker --version
# Docker version 18.09.2, build 6247962

安装扩展

Dev Containers 扩展允许您在 Docker 容器内运行 Visual Studio Code。

安装 Dev Containers 扩展

检查安装

安装 Dev Containers 扩展后，您会在左下角看到一个新的状态栏项目。

远程状态栏项目可以快速向您显示 VS Code 当前的运行环境（本地或远程），点击该项目将调出 Dev Containers 相关命令。

获取示例

为了创建一个 Docker 容器，我们将打开一个包含 Node.js 项目的 GitHub 存储库。

打开命令面板 (F1)，运行 Dev Containers: Try a Dev Container Sample... 命令，然后从列表中选择 Node 示例。

注意：还有其他开发容器示例，例如 vscode-remote-try-python 或 vscode-remote-try-java，但本教程将使用 vscode-remote-try-node。

等待容器构建

窗口随后会重新加载，但由于容器尚不存在，VS Code 将创建一个容器并将示例存储库克隆到一个隔离的 容器卷 (container volume) 中。这可能需要一些时间，进度通知会提供状态更新。幸运的是，下次打开该文件夹时不需要执行此步骤，因为容器已经存在。

容器构建完成后，VS Code 会自动连接到它，并将本地文件系统中的项目文件夹映射到容器中。

检查容器

容器运行并连接成功后，您应该会看到左下角的状态栏中远程环境上下文已更改

检查环境

在容器中开发的一个好处是，您可以为应用程序使用特定版本的依赖项，而不会影响您的本地开发环境。

本教程使用的特定容器安装了 Node.js v18，您可以通过打开新终端 终端 (Terminal) > 新建终端 (New Terminal) (⌃⇧` (Windows, Linux Ctrl+Shift+`)) 并输入以下内容来检查

node --version; npm --version

这应该会显示以下版本信息

运行应用程序

现在我们可以按下 F5，这将在容器内运行应用程序。进程启动后，访问 https://:3000，您应该能看到简单的 Node.js 服务器正在运行！

结束容器连接

您可以点击 文件 (File) > 关闭远程连接 (Close Remote Connection) 来结束容器会话并返回到本地运行 VS Code。

工作原理

下一节将更详细地介绍 Dev Containers 扩展如何设置和配置您的容器。

Dev Containers 扩展使用 .devcontainer 文件夹中的文件（即 devcontainer.json 以及可选的 Dockerfile 或 docker-compose.yml）来创建开发容器。

在我们刚刚探索的示例中，项目包含一个 .devcontainer 文件夹，其中有一个 devcontainer.json。该 devcontainer.json 使用了镜像 mcr.microsoft.com/devcontainers/javascript-node:0-18。您可以在 devcontainers/images 仓库中详细了解该镜像。

首先，系统会从提供的 Dockerfile 或镜像名称构建您的镜像，本例中为 mcr.microsoft.com/devcontainers/javascript-node:0-18。然后，使用 devcontainer.json 中的某些设置创建并启动一个容器。最后，您的 Visual Studio Code 环境会根据 devcontainer.json 中的设置重新安装和配置。例如，本例中的开发容器安装了 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。

devcontainer.json

devcontainer.json 本质上是一个配置文件，决定了开发容器如何构建和启动。

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

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

  // Features to add to the dev container. More info: https://containers.net.cn/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 仓库。

您可以查看 devcontainer.json 选项的完整列表。

恭喜

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

以上是对使用开发容器可能实现的功能的简要概述。作为下一步，我们建议您查看如何在容器中打开计算机上的现有文件夹，或者在隔离的容器卷中打开 GitHub 存储库或 PR。

查看其他的远程开发扩展。

• 远程 - SSH
• WSL

或者通过安装远程开发扩展包获取所有这些扩展。

故障排除

验证 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