开发容器教程

本教程将引导您使用 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 将创建一个并将示例仓库克隆到独立的容器卷中。这可能需要一些时间，并且会有进度通知提供状态更新。幸运的是，下次打开该文件夹时不需要此步骤，因为容器已存在。

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

检查容器

容器运行并连接后，您应该会在状态栏的左下方看到您的远程上下文发生变化。

检查您的环境

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

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

node --version; npm --version

这应该显示以下版本：

运行应用程序

现在我们可以按下 F5，这将在容器内运行应用程序。进程启动后，导航到 http://localhost: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 中的一些设置创建并启动一个容器。最后，根据 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。

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 仓库。

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

恭喜

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

这简要概述了开发容器的可能性。作为下一步，我们建议您了解如何在容器中打开机器上的现有文件夹或在隔离的容器卷中打开 GitHub 仓库或 PR。

查看其他远程开发扩展。

• Remote - SSH
• WSL

或者安装 Remote Development 扩展包来获取所有这些扩展。

故障排除

验证 Docker 上下文

如果您不是全新安装 Docker，并且 Dev Containers: Try a Dev Container Sample... 示例在当前上下文遇到问题，则应检查 Docker 上下文。全新安装将具有“默认”上下文，您可以将其设置回当前上下文。

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

# Switches the list to the 'default' context
docker context use default