参加你附近的 ,了解 VS Code 中的 AI 辅助开发。

在教育中使用开发容器:教师指南

2020 年 7 月 27 日,作者:Brigit Murtaugh, @BrigitMurtaugh

我们从许多教育工作者那里了解到,学期的前几天甚至前几周都可能浪费在为学生配置正确的环境上。即便如此,学生最终可能仍然会遇到糟糕的开发体验或作业评分不充分的问题。

“为我的学生进行设置通常需要五个课时。要处理 Python 的版本问题。其中有很多复杂性。不幸的是,解决这些复杂性需要花费大量的时间和金钱。” - [美国社区大学 CS 101 教授]

“我更喜欢一个专门为 Python 安装设置的 VS Code 版本……” - [文理学院助理教授]

将 Visual Studio Code 与开发容器结合使用,可以成为教育领域的一个绝佳工具,以确保学生拥有一个一致的编码环境。它们负责处理设置,这样学生和教师就可以快速跳过配置阶段,转而专注于真正重要的事情:学习和编写出色的代码!

开发容器

那么,什么是开发容器呢?容器是一种软件,它打包了代码以及代码运行所需的所有依赖项,包括运行时、工具、库和设置。容器最初是为了在一致的环境中部署和管理应用程序,并更有效地利用硬件而创建的。后来,它们演变为帮助提供一致的构建环境,最近又发展到提供开发环境。这就是“开发容器”这个名字的由来。

当你创建一个容器时,它的初始内容来自所谓的“镜像”。镜像可以被看作是一个预装了操作系统和其他工具的迷你磁盘驱动器。你使用 Dockerfile 来描述镜像中包含的内容,一旦你运行镜像,它就变成了容器。

开发容器提供了一个与你的计算机相隔离的编码环境。例如,如果你下载了某个依赖项的特定版本,该版本将是该容器独有的。在下图中,请注意容器如何包含应用程序及其必要的依赖项,从而使计算机(主机操作系统和基础设施)保持整洁。

Containers diagram

作为一名教师,你可以为一项作业创建一个特定的镜像。每个学生都将获得完全相同的依赖项版本,例如相同版本的 Python 或 C++ 编译器,无论他们的操作系统或计算机上已安装了任何其他文件。

VS Code 中的开发容器

Visual Studio Code 开发容器扩展让你能够使用容器作为主要的编码环境。在课堂上,教师可以使用一个现有的开发容器,或者创建自己的开发容器,并与全班分享。每个学生都可以在 VS Code 中打开该容器,并自动获得开发应用程序所需的工具和运行时。在编码时,学生还可以使用 VS Code 的全部功能,包括 IntelliSense 和调试。

开发容器扩展仅适用于基于 Linux 的容器,因此尽管学生们的计算机上可能有不同的操作系统,但编码环境在所有学生中都将保持一致。

我们已经看到有教师在课堂上成功地使用了开发容器。你可以查看《使用开发容器标准化学生开发环境:一份经验报告》,以了解更多关于三位研究人员在加州大学圣地亚哥分校的一门课程中使用开发容器的经验。

这篇文章将作为一份指南,帮助希望在课堂上实施开发容器的教师,为他们的学生创造一个更顺畅、更一致的环境。

要亲眼见证开发容器的实际应用,以及学生如何在短短 5 分钟内开始使用,请观看我们的学生入门介绍视频

教师指南

使用传统的设置方法,学生在配置环境时可能会遇到各种各样的问题。一些例子包括他们独特的操作系统差异、项目文件的存储位置,或者他们安装的运行时或工具的微小差异。教师需要精通所有这些细节,才能帮助学生解决这些问题。

一个常见的问题是管理一个工具的不同版本。让我们以 Python 为例:有 Python 2 和 Python 3,以及不同的次要版本。拥有多个版本的 Python,以及多个附带的工具(如 linter),可能会令人困惑并导致错误。

为了节省大量时间和避免混淆,我们可以使用开发容器在全班范围内创建一个标准化的 Python 开发环境。学生们都将获得相同版本的 Python,避免了安装新版本或卸载任何旧版本的需要,而且运行相同容器和源代码的每个人都将得到完全相同的结果。

先决条件

  • 安装 Visual Studio Code
  • 安装 Docker Desktop。
    • Docker 是构建和共享容器的行业标准。我们推荐使用 Docker Desktop Stable 2.3.0.3,因为它是 Docker Desktop 最新且性能最好的版本。
    • 最近在 Windows Home 版上引入了 Docker Desktop 支持。它需要 Windows 10 版本 2004,并启用适用于 Linux 的 Windows 子系统 2 (WSL 2) 后端。按照 WSL 2 安装指南启用 WSL 2。
    • 对于不想配置 WSL 2 后端的学生,也可以在 Windows 10 专业版、企业版或教育版(版本 16299 或更高版本)上使用 Docker Desktop for Windows,但必须启用 Hyper-V 和容器 Windows 功能。

让我们首先启动 VS Code,我们可以在命令提示符或终端中输入 code 来实现(或者直接在你的计算机上选择 VS Code)。

Launch VS Code from command prompt

VS Code 启动后,请确保你已经安装了开发容器扩展。

Dev Containers extension

当我们安装任何远程扩展时,状态栏的左下角会添加一个绿色的远程指示器。

Remote indicator in VS Code

你可以点击它来打开命令面板,并验证开发容器的命令是否已列出。

List of remote commands in Command Palette

为你的班级访问容器

让我们通过一个开发容器的例子,来帮助学生获得一个一致的编码环境。在我们的课堂上,我们可以创建一个单一的 GitHub 仓库来存储使用相同技术栈的练习。例如,所有的 Python 作业都可以使用同一个容器,并存储在同一个仓库中。

我们有一个示例 vscode-course-sample GitHub 仓库,其中包含一个 Python 开发容器和两个 Python 入门作业。让我们在 VS Code 中打开它。

你可以选择左下角的远程指示器,或者使用命令面板,来调出开发容器的命令。

让我们调用在容器卷中克隆仓库... (Clone Repository in Container Volume...)

Clone Repository in Container Volume

我们需要输入存储我们容器的 GitHub 仓库的 URL,在我们的例子中是 microsoft/vscode-course-sample。

Paste GitHub URL in Command Palette

你可以创建一个唯一的卷 (Create a unique volume)。卷是文件将存储在我们容器中的地方。

Volume options in Command Palette

现在我们已经选择了我们的容器仓库,VS Code 会重新加载以构建镜像并启动容器。

Close-up on starting container notification

一旦容器构建并运行起来,我们的文件就被加载了,我们就可以在我们的 Python 环境中开始编码了!

在资源管理器中点击 sort.py 将其打开,然后按 F5(或右上角的绿色运行图标)来运行它。

Run sort.py program

我们的 Python 代码成功运行,而我们根本不需要在本地计算机上设置 Python。

我们还可以利用 VS Code 的所有优点,例如设置断点来暂停我们的程序并帮助我们调试。让我们在对单词列表进行排序时设置一个断点。

Setting a breakpoint

我们可以用 F5 运行我们的程序。请注意,程序在遇到断点时会停止。

Program stops at breakpoint

为你的班级创建容器

既然我们已经看到了一个绝佳的容器示例,让我们自己使用开发容器扩展来设置我们的第一个容器。让我们从一个“Hello World” Python 应用程序开始。

Hello world Python app

我们将选择开发容器:添加开发容器配置文件… (Dev Containers: Add Dev Container Configuration Files…) 来开始设置开发容器所需的文件。

Add Dev Container Configuration Files command

容器配置文件是创建和自定义开发容器所必需的。出现的容器定义列表是根据你的应用程序内容进行筛选的,在我们的例子中是一个 Python 文件。让我们选择 Python 3

Select Python 3 config file in Command Palette

开发容器扩展会自动添加一个 .devcontainer 文件夹和其中的两个配置文件:devcontainer.json 和一个 Dockerfile。让我们仔细看看这两个文件。

devcontainer.json

devcontainer.json 描述了 VS Code 应该如何启动我们的容器以及连接后该做什么。这个文件可以位于 .devcontainer/devcontainer.json 下,或者直接作为 devcontainer.json 存储在项目的根目录。

这是一个简单的 devcontainer.json 示例。它拉取一个预配置的 Node 镜像,自动为端口 3000 设置端口转发,并在容器创建时安装 eslint 扩展。

Simple Node devcontainer.json

这是一个为我们的 Python 项目设计的、稍微复杂一些的 devcontainer.json 示例。它通过 dockerfile 属性引用一个 Dockerfile 而不是直接引用一个镜像。它还会自动安装 Python 扩展,并在容器创建后建立一套特定于容器的设置,比如代码检查 (linting)。

More detailed Python devcontainer.json

devcontainer.json 是一个绝佳的机会,可以用来创建一个定制化的编码环境,以满足你学生的特定需求。你可以指定几个变量来为每个班级或作业创建独特的环境。

我们建议在用于教育的 devcontainer.json 中首先设置以下变量:

属性 类型 描述
image 字符串 容器注册表(如 DockerHub)中镜像的名称,VS Code 应使用该镜像来创建开发容器。
dockerFile 字符串 一个 Dockerfile 的位置,它定义了容器的内容。该路径是相对于 devcontainer.json 文件的。你可以在 vscode-dev-containers 仓库中找到许多针对不同运行时的 Dockerfile 示例。
name 字符串 容器的显示名称。
extensions 数组 一个扩展 ID 数组,指定在创建容器时应在容器内安装的扩展。默认为 []
settings 对象 将默认的 settings.json 值添加到容器/机器特定的设置文件中。

在这个文件中设置几个变量,从长远来看将为你的班级节省时间。例如,你可以使用 extensions 变量来确保你所有的学生都自动安装了相同的一组扩展。设置路径在学生的计算机上也可能具有挑战性或导致问题,但通过 settings 变量指定路径信息,你将为你的班级节省时间,并确保他们计算机的路径变量不会在此过程中受到损害。

devcontainer.json 参考中有表格列出了所有你可以在此配置文件中包含的可用属性。

Dockerfile

Docker 可以通过读取你的 Dockerfile 中的指令来自动构建镜像。这个文件至少会有一个使用 FROM 指定的基础镜像,并且它也可以包含命令行指令。

这是我们 Python 应用中的 Dockerfile 的样子:

Python dockerfile in app

打开容器

当我们的容器配置文件添加后,我们收到了一个通知,说我们的文件夹现在有了一个 devcontainer.json 文件。让我们选择在容器中重新打开 (Reopen in Container)

Reopen in container notification

一个新的 VS Code 实例启动了,我们的镜像正在被构建,我们的应用程序正在我们的开发容器中启动。

Relaunch VS Code to start dev container

一旦我们的容器构建完成,我们拥有所有相同的文件,但现在左下角的指示器显示为“开发容器:Python 3”,表示我们正处于我们的容器内部。我们可以轻松地运行我们的代码,无论我们在本地机器上安装了哪个版本的 Python(或者是否安装了)!

Run Python code in dev container

创建和分享作业

现在你已经有了一个开发容器,你可以将它上传到一个仓库,以便你的学生可以访问它来完成他们的作业。你可以在一个 README 文件中包含作业说明,以及作业所需的任何基础或模板代码,还有一个 .devcontainer 文件夹,这样他们就都能拥有一个一致的开发体验。所有这些文件都可以作为一个单一的仓库上传。

确保你已经安装了 Git。你可以在 VS Code 中从你的容器项目初始化一个新的 Git 仓库。或者,你可以在命令行的项目目录中使用 git init

下一步是把你本地的仓库连接到浏览器中 GitHub 上的一个新仓库

Create a new GitHub repo online

然后,我们将把我们本地的 Git 仓库(我们电脑上的容器项目)连接到远程仓库(我们在浏览器中创建的 GitHub 仓库)。

Connect Git repos in command prompt

你可能会被提示登录 GitHub。一旦你登录,你的文件就可以被添加到你的远程 Git 仓库中。

Push remote files in command prompt

现在当我在浏览器中刷新 GitHub 时,我可以看到我的文件了!

View files in GitHub repo in browser online

有关如何将你的仓库上传到 GitHub 的更多信息,请查阅这份将现有项目添加到 GitHub 的指南

访问作业

要了解学生如何从 GitHub 访问开发容器并轻松开始编程,请观看我们的 5 分钟快速视频

反馈与更多资源

为了帮助你设置 VS Code 和容器,我们在 VS Code 远程开发文档中有详细的文章。如果你对我们的团队有任何问题或反馈,请随时在 VS Code 远程开发 GitHub 仓库上提出问题,或在 Twitter 上@code我们。

编码愉快!

Brigit Murtaugh, VS Code 项目经理 @BrigitMurtaugh