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 将创建一个容器并将示例存储库克隆到隔离的 容器卷 中。这可能需要一些时间，并且进度通知将提供状态更新。幸运的是，下次打开文件夹时不需要此步骤，因为容器将已存在。

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

检查容器

容器运行并连接后，你应该会在状态栏的左下角看到你的远程上下文已更改。

检查你的环境

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

本教程的特定容器安装了 Node.js v18，你可以通过打开一个新终端 **终端** > **新建终端**（⌃⇧` (Windows, Linux Ctrl+Shift+`)）并输入以下命令来检查：

node --version; npm --version

这应该会显示以下版本：

运行应用程序

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

结束容器连接

你可以通过 **文件** > **关闭远程连接** 来结束在容器中的会话，并返回到在本地运行 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。

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。

查看其他远程开发扩展。

• 远程 - 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