🚀 在 VS Code 中

开发容器教程

本教程将引导你使用开发容器扩展在 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

安装此扩展

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

安装开发容器扩展

Dev Containers extension

检查安装

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

Remote Status bar item

“远程”状态栏项可以快速显示 VS Code 正在哪个上下文中运行(本地或远程),单击该项将显示开发容器命令。

Dev Containers commands

获取示例

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

打开命令面板 (F1) 以运行命令开发容器: 尝试开发容器示例...,然后从列表中选择 Node 示例。

Select a sample from the list

注意:还有其他开发容器示例,例如 vscode-remote-try-pythonvscode-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://127.0.0.1:3000,你应该看到简单的 Node.js 服务器正在运行!

Running the application

结束你的容器连接

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

工作原理

下一节更详细地描述开发容器扩展如何设置和配置你的容器。

开发容器扩展使用 .devcontainer 文件夹中的文件,即 devcontainer.json 和可选的 Dockerfiledocker-compose.yml,来创建你的开发容器。

在我们刚刚探索的示例中,项目有一个 .devcontainer 文件夹,其中包含 devcontainer.jsondevcontainer.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 服务器。

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 容器注册表(Docker HubGitHub Container RegistryAzure Container Registry)中 VS Code 应使用以创建开发容器的镜像名称。
dockerfile 你可以改为使用 dockerfile 属性,而不是引用 image,它是要用作镜像的 Dockerfile 的相对路径。
features 要添加的开发容器功能 ID 和相关选项的对象。
customizations 配置特定于工具的属性,例如 VS Code 的 settingsextensions 属性。
settings 将默认 settings.json 值添加到容器/机器特定的设置文件中,例如 "terminal.integrated.defaultProfile.linux": "bash"
extensions 扩展 ID 的数组,用于指定应在创建容器时在容器内安装的扩展。
forwardPorts 使容器内的端口在本地可用列表。
portsAttributes 为特定转发端口设置默认属性。
postCreateCommand 在容器创建后要运行的命令字符串或命令参数列表。
remoteUser 覆盖 VS Code 在容器中运行的用户(以及子进程)。默认为 containerUser

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

恭喜

恭喜你,你已成功完成本教程!

这只是对使用开发容器的可能性的简要概述。作为下一步,我们建议查看如何在容器中打开计算机上的现有文件夹在容器中打开 GitHub 存储库或 PR

查看其他远程开发扩展。

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

故障排除

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