开发容器教程

本教程将指导您使用 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

安装扩展

开发容器扩展允许您在 Docker 容器中运行 Visual Studio Code。

安装开发容器扩展

检查安装

安装开发容器扩展后，您将在最左侧看到一个新的状态栏项目。

远程状态栏项目可以快速显示 VS Code 在哪个上下文中运行（本地或远程），单击该项目将调出开发容器命令。

获取示例

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

打开命令面板（F1）以运行命令开发容器：尝试开发容器示例...并从列表中选择 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://127.0.0.1:3000，您应该会看到简单的 Node.js 服务器正在运行！

结束容器连接

您可以结束在容器中的会话并通过文件>关闭远程连接返回到在本地运行 VS Code。

工作原理

下一部分将更详细地描述开发容器扩展如何设置和配置您的容器。

开发容器扩展使用.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中的一些设置创建一个容器并启动它。最后，您的 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.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 安装，并且 **开发容器：尝试开发容器示例...** 示例在当前上下文中遇到问题，您应该检查您的 Docker 上下文。新的安装将具有“默认”上下文，您可以将其设置为当前上下文。

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

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