參加你附近的 ,瞭解 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