Edit

开发容器教程

Name: Visual Studio Code
Author: Microsoft

本教程将引导您使用Dev Containers扩展在Docker容器中运行Visual Studio Code。完成本教程不需要事先了解Docker。

在Docker容器内部运行VS Code有很多好处，但在本教程中，我们将重点介绍如何使用Docker容器来设置一个与本地环境分离的开发环境。

先决条件

你需要安装Visual Studio Code。

安装 Docker

需要Docker来创建和管理您的容器。

Docker 桌面版

下载并安装 Docker Desktop，或者选择一个替代的 Docker 选项，例如远程主机上的 Docker 或符合 Docker 的 CLI。

启动 Docker

运行Docker Desktop应用程序以启动Docker。如果您在活动托盘中看到Docker鲸鱼图标，您就会知道它正在运行。

Docker 可能需要几分钟才能启动。如果鲸鱼图标是动画的，它可能仍在启动过程中。您可以点击图标查看状态。

Docker状态

检查 Docker

一旦Docker运行起来，你可以通过打开一个新的终端窗口并输入以下命令来确认一切是否正常：

docker --version
# Docker version 18.09.2, build 6247962

安装扩展

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

安装 Dev Containers 扩展

Dev Containers 扩展

检查安装

安装了 Dev Containers 扩展后，您将在最左侧看到一个新的状态栏项目。

远程状态栏项目

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

Dev Containers 命令

获取样本

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

打开命令面板 (F1) 以运行命令 Dev Containers: 尝试一个开发容器示例... 并从列表中选择 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

这应该显示以下版本：

Node.js 版本检查

运行应用程序

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

运行应用程序

结束您的容器连接

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

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仓库中提取的。

Option	Description
`image`	The name of an image in a container registry (Docker Hub, GitHub Container Registry, Azure Container Registry) VS Code should use to create the dev container.
`dockerfile`	Rather than referencing an `image`, you may instead use the `dockerfile` property, which is the relative path to a `Dockerfile` that you want to use as your image.
`features`	An object of Dev Container Feature IDs and related options to be added.
`customizations`	Configure tool-specific properties, like `settings` and `extensions` properties for VS Code.
`settings`	Adds default `settings.json` values into a container/machine specific settings file, such as `"terminal.integrated.defaultProfile.linux": "bash"`.
`extensions`	An array of extension IDs that specify the extensions that should be installed inside the container when it is created.
`forwardPorts`	Make a list of ports inside the container available locally.
`portsAttributes`	Set default properties for specific forwarded ports.
`postCreateCommand`	A command string or list of command arguments to run after the container is created.
`remoteUser`	Overrides the user that VS Code runs as in the container (along with sub-processes). Defaults to the `containerUser`.

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

恭喜

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

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

查看其他远程开发扩展。

或者通过安装 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

12/11/2024