🚀 在 VS Code 中取得

在容器中開發

Visual Studio Code Dev Containers 擴充功能可讓您使用容器作為功能完整的開發環境。它可讓您在容器內(或掛載到容器中)開啟任何資料夾,並充分利用 Visual Studio Code 的完整功能集。專案中的 devcontainer.json 檔案會告訴 VS Code 如何存取 (或建立) 具有明確定義的工具和執行階段堆疊的開發容器。此容器可用於執行應用程式,或分隔處理程式碼庫所需的工具、程式庫或執行階段。

工作區檔案會從本機檔案系統掛載,或複製或複製到容器中。擴充功能會在容器內安裝和執行,它們在容器內可以完全存取工具、平台和檔案系統。這表示您可以僅透過連線到不同的容器,即可無縫切換整個開發環境。

Container Architecture

這讓 VS Code 能夠提供本機品質的開發體驗,包括完整的 IntelliSense (完成)、程式碼導覽和偵錯,無論您的工具 (或程式碼) 位於何處

Dev Containers 擴充功能支援兩種主要操作模型

注意:Dev Containers 擴充功能支援開放的 Dev Containers Specification,讓任何工具中的任何人都能設定一致的開發環境。您可以在我們的 開發容器常見問題 和規格網站 containers.dev 中深入瞭解。

開始使用

注意:您可以在入門的 Dev Containers 教學課程 中瞭解如何快速開始使用開發容器。

系統需求

本機 / 遠端主機

您可以透過幾種方式將 Docker 與 Dev Containers 擴充功能搭配使用,包括

  • 在本機安裝 Docker。
  • 在遠端環境中安裝 Docker。
  • 其他與 Docker 相容的 CLI,在本機或遠端安裝。

您可以在 替代 Docker 選項文件 中瞭解更多資訊。

以下是一些您可以在本機或遠端主機上設定 Docker 的特定方式

  • Windows: Windows 10 Pro/Enterprise 上的 Docker Desktop 2.0+。Windows 10 Home (2004+) 需要 Docker Desktop 2.3+ 和 WSL 2 後端。(不支援 Docker Toolbox。不支援 Windows 容器映像。)
  • macOSDocker Desktop 2.0+。
  • LinuxDocker CE/EE 18.06+ 和 Docker Compose 1.21+。(不支援 Ubuntu snap 套件。)
  • 遠端主機: 需要 1 GB RAM,但建議至少 2 GB RAM 和 2 核心 CPU。

容器:

  • x86_64 / ARMv7l (AArch32) / ARMv8l (AArch64) Debian 9+、Ubuntu 16.04+、CentOS / RHEL 7+
  • x86_64 Alpine Linux 3.9+

如果其他以 glibc 為基礎的 Linux 容器具有 所需的 Linux 先決條件,則可能可以使用。

安裝

若要開始使用,請依照下列步驟執行

  1. 使用下列其中一種路徑或 替代 Docker 選項 (例如遠端主機上的 Docker 或與 Docker 相容的 CLI),為您的作業系統安裝和設定 Docker

    Windows / macOS:

    1. 安裝 適用於 Windows/Mac 的 Docker Desktop

    2. 如果您在 Windows 上使用 WSL 2,若要確保 WSL 2 後端 已啟用:在 Docker 工作列項目上按一下滑鼠右鍵,然後選取 Settings (設定)。勾選 Use the WSL 2 based engine (使用以 WSL 2 為基礎的引擎),並確認您的發行版本已在 Resources > WSL Integration (資源 > WSL 整合) 下啟用。

    3. 當未使用 WSL 2 後端時,在 Docker 工作列項目上按一下滑鼠右鍵,選取 Settings (設定),並使用任何原始程式碼的儲存位置更新 Resources > File Sharing (資源 > 檔案共用)。如需疑難排解,請參閱提示與技巧

    Linux:

    1. 依照 適用於您的發行版本的 Docker CE/EE 官方安裝指示 執行。如果您使用 Docker Compose,也請依照 Docker Compose 指示 執行。

    2. 使用終端機執行:sudo usermod -aG docker $USER,將您的使用者新增至 docker 群組。

    3. 登出並重新登入,讓您的變更生效。

  2. 安裝 Visual Studio CodeVisual Studio Code Insiders

  3. 安裝 Dev Containers 擴充功能。如果您計劃在 VS Code 中使用其他遠端擴充功能,您可以選擇安裝 Remote Development 擴充功能套件

使用 Git 嗎?

以下是兩項需要考量的提示

  • 如果您在本機 Windows 和容器內使用相同的存放庫,請務必設定一致的行尾。如需詳細資訊,請參閱 提示與技巧,以瞭解如何解決 WSL 中導致許多檔案修改的 Git 行尾問題。
  • 如果您使用 Git 認證管理員進行複製,則您的容器應該已經可以存取您的認證!如果您使用 SSH 金鑰,您也可以選擇共用它們。如需詳細資訊,請參閱與您的容器共用 Git 認證

選擇您的快速入門

本文件包含 3 個快速入門 - 我們建議從最符合您的工作流程和興趣的一個開始

  1. 想要在快速範例存放庫中試用開發容器嗎?請查看 快速入門 1:試用開發容器
  2. 想要將開發容器新增至您現有的本機複製專案之一嗎?請查看 快速入門 2:在容器中開啟現有資料夾
  3. 想要使用存放庫的隔離複本,例如檢閱 PR 或調查分支,而不會影響您的本機工作嗎?請查看 快速入門 3:在隔離的容器磁碟區中開啟 Git 存放庫或 PR

快速入門:試用開發容器

開始使用的最簡單方式是試用其中一個範例開發容器。容器教學課程 將引導您完成 Docker 和 Dev Containers 擴充功能的設定,並讓您選取範例

Select a sample from the list

注意:如果您已經安裝 VS Code 和 Docker,則可以使用 在開發容器中開啟。您可以在 建立開發容器指南 中瞭解更多關於此功能以及如何將其新增至您的存放庫的資訊。

快速入門:在容器中開啟現有資料夾

此快速入門涵蓋如何為現有專案設定開發容器,以使用檔案系統上的現有原始程式碼作為您的全職開發環境。請依照下列步驟執行

  1. 啟動 VS Code,從命令面板 (F1) 或快速動作狀態列項目執行 Dev Containers: Open Folder in Container... (開發容器:在容器中開啟資料夾...) 命令,然後選取您要設定容器的專案資料夾。

    提示:如果您想要在開啟資料夾之前編輯容器的內容或設定,您可以改為執行 Dev Containers: Add Dev Container Configuration Files... (開發容器:新增開發容器設定檔...)。

    Quick actions Status bar item

  2. 現在為您的開發容器選擇起點。您可以從可篩選的清單中選取基本開發容器範本,或者如果您選取的資料夾中存在現有的 DockerfileDocker Compose 檔案,則可以使用它們。

    注意:當使用 Alpine Linux 容器時,某些擴充功能可能由於擴充功能內的原生程式碼中存在 glibc 相依性而無法運作。

    Select a node Dev Container Template

    清單將根據您開啟的資料夾內容自動排序。

    您可以透過其他功能自訂您的開發容器,您可以在下方 閱讀更多相關資訊

    顯示的開發容器範本來自我們的 第一方和社群索引,這是 Dev Container Specification 的一部分。我們在 devcontainers/templates 存放庫 中託管一組範本作為規格的一部分。您可以瀏覽該存放庫的 src 資料夾,以查看每個範本的內容。

    您也可以選擇使用 開發容器 CLI 發佈和散佈您自己的開發容器範本。

  3. 在選取容器的起點之後,VS Code 會將開發容器設定檔新增至您的專案 (.devcontainer/devcontainer.json)。

  4. VS Code 視窗將重新載入並開始建置開發容器。進度通知會提供狀態更新。您只需在第一次開啟開發容器時建置它;在第一次成功建置之後開啟資料夾將會快得多。

    Dev Container Progress Notification

  5. 建置完成後,VS Code 將自動連線到容器。

現在,您可以像在本機開啟專案時一樣,在 VS Code 中與您的專案互動。從現在開始,當您開啟專案資料夾時,VS Code 將自動選取並重複使用您的開發容器設定。

提示:想要使用遠端 Docker 主機嗎?請參閱關於 在容器中開啟遠端 SSH 主機上的資料夾 的章節以取得資訊。

雖然使用此方法將本機檔案系統 繫結掛載 到容器中很方便,但在 Windows 和 macOS 上確實有一些效能 overhead。您可以套用 一些技術 來改善磁碟效能,或者您可以 改為使用隔離的容器磁碟區在容器中開啟存放庫

在 Windows 上於容器中開啟 WSL 2 資料夾

如果您使用 Windows Subsystem for Linux v2 (WSL 2),並已啟用 Docker Desktop 的 WSL 2 後端,則可以使用儲存在 WSL 中的原始程式碼!

一旦 WSL 2 引擎啟用,您可以

  • 從已使用 WSL 擴充功能開啟的資料夾中使用 Dev Containers: Reopen in Container (開發容器:在容器中重新開啟) 命令。
  • 從命令面板 (F1) 中選取 Dev Containers: Open Folder in Container... (開發容器:在容器中開啟資料夾...),然後使用本機 \\wsl$ 共用 (從 Windows 端) 選擇 WSL 資料夾。

快速入門的其餘部分照常適用!您可以在其文件中瞭解更多關於 WSL 擴充功能 的資訊。

在容器中開啟遠端 SSH 主機上的資料夾

如果您使用 Linux 或 macOS SSH 主機,您可以將 Remote - SSH 和 Dev Containers 擴充功能一起使用。您甚至不需要在本機安裝 Docker 用戶端。

若要執行此操作

  1. 依照 Remote - SSH 擴充功能的 安裝 和 SSH 主機設定 步驟執行。
  2. 選用:設定伺服器的 SSH 金鑰型驗證,這樣您就不需要多次輸入密碼。
  3. 在您的 SSH 主機上安裝 Docker。您不需要在本機安裝 Docker。
  4. 依照 Remote - SSH 擴充功能的 快速入門 連線到主機並在那裡開啟資料夾。
  5. 從命令面板 (F1, ⇧⌘P (Windows、Linux Ctrl+Shift+P)) 使用 Dev Containers: Reopen in Container (開發容器:在容器中重新開啟) 命令。

Dev Containers 快速入門的其餘部分照常適用。您可以在其文件中瞭解更多關於 Remote - SSH 擴充功能 的資訊。如果此模型不符合您的需求,您也可以參閱 在遠端 Docker 主機上開發 文章以取得其他選項。

在容器中開啟遠端通道主機上的資料夾

您可以將 Remote - Tunnels 和 Dev Containers 擴充功能一起使用,以在容器內開啟遠端主機上的資料夾。您甚至不需要在本機安裝 Docker 用戶端。這與上述 SSH 主機案例類似,但改為使用 Remote - Tunnels。

若要執行此操作

  1. 依照 Remote - Tunnels 擴充功能的 開始使用 指示執行。
  2. 在您的通道主機上安裝 Docker。您不需要在本機安裝 Docker。
  3. 依照 Remote - Tunnels 擴充功能的 步驟 連線到通道主機並在那裡開啟資料夾。
  4. 從命令面板 (F1, ⇧⌘P (Windows、Linux Ctrl+Shift+P)) 使用 Dev Containers: Reopen in Container (開發容器:在容器中重新開啟) 命令。

Dev Containers 快速入門的其餘部分照常適用。您可以在其文件中瞭解更多關於 Remote - Tunnels 擴充功能 的資訊。如果此模型不符合您的需求,您也可以參閱 在遠端 Docker 主機上開發 文章以取得其他選項。

在容器中開啟現有的工作區

如果工作區僅參考相對於 .code-workspace 檔案所在的資料夾 (或資料夾本身) 的子資料夾的相對路徑,您也可以依照類似的程序,在單一容器中開啟 VS Code 多根工作區

您可以

  • 使用 Dev Containers: Open Workspace in Container... (開發容器:在容器中開啟工作區...) 命令。
  • 一旦您在容器中開啟包含 .code-workspace 檔案的資料夾,請使用 File > Open Workspace... (檔案 > 開啟工作區...)。

連線後,您可能想要將 .devcontainer 資料夾 新增至工作區,以便在它尚未顯示時輕鬆編輯其內容。

另請注意,雖然您無法在同一個 VS Code 視窗中為同一個工作區使用多個容器,但您可以從不同的視窗同時使用 多個 Docker Compose 管理的容器

快速入門:在隔離的容器磁碟區中開啟 Git 存放庫或 GitHub PR

雖然您可以在容器中開啟本機複製的存放庫,但您可能想要使用存放庫的隔離複本進行 PR 檢閱,或調查另一個分支,而不會影響您的工作。

存放庫容器使用隔離的本機 Docker 磁碟區,而不是繫結到本機檔案系統。除了不會污染您的檔案樹狀結構之外,本機磁碟區還具有改善 Windows 和 macOS 上效能的額外優勢。(請參閱進階設定 改善磁碟效能 文章,以瞭解如何在其他案例中使用這些類型的磁碟區。)

例如,依照下列步驟在存放庫容器中開啟其中一個「試用」存放庫

  1. 啟動 VS Code 並從命令面板 (F1) 執行 Dev Containers: Clone Repository in Container Volume... (開發容器:在容器磁碟區中複製存放庫...)。

  2. 在出現的輸入方塊中輸入 microsoft/vscode-remote-try-node (或其他「試用」存放庫之一)、Git URI、GitHub 分支 URL 或 GitHub PR URL,然後按下 Enter

    Input box with a repository name in it

    提示:如果您選擇私有存放庫,您可能想要設定認證管理員或將您的 SSH 金鑰新增至您的 SSH 代理程式。請參閱與您的容器共用 Git 認證

  3. 如果您的存放庫中沒有 .devcontainer/devcontainer.json 檔案,系統會要求您從可篩選的清單或現有的 DockerfileDocker Compose 檔案 (如果存在) 中選擇起點。

    注意:當使用 Alpine Linux 容器時,某些擴充功能可能由於擴充功能內的原生程式碼中存在 glibc 相依性而無法運作。

    Select a node Dev Container Template

    清單將根據您開啟的資料夾內容自動排序。顯示的開發容器範本來自我們的 第一方和社群索引,這是 Dev Container Specification 的一部分。我們在 devcontainers/templates 存放庫 中託管一組範本作為規格的一部分。您可以瀏覽該存放庫的 src 資料夾,以查看每個範本的內容。

  4. VS Code 視窗 (執行個體) 將重新載入、複製原始程式碼,並開始建置開發容器。進度通知會提供狀態更新。

    Dev Container Progress Notification

    如果您在步驟 2 中貼上 GitHub pull request URL,PR 將會自動簽出,且 GitHub Pull Requests 擴充功能將會安裝在容器中。擴充功能提供額外的 PR 相關功能,例如 PR 瀏覽器、與 PR 註解內嵌互動以及狀態列可見性。

    PR status in status bar

  5. 建置完成後,VS Code 將自動連線到容器。現在,您可以像在本機複製程式碼一樣,在這個獨立環境中使用存放庫原始程式碼。

請注意,如果容器由於 Docker 建置錯誤等問題而無法啟動,您可以選取顯示的對話方塊中的 Reopen in Recovery Container (在復原容器中重新開啟),以進入「復原容器」,讓您可以編輯 Dockerfile 或其他內容。這會以最小的容器開啟具有複製存放庫的 docker 磁碟區,並顯示建立記錄。完成修正後,請使用 Reopen in Container (在容器中重新開啟) 以重試。

提示:想要使用遠端 Docker 主機嗎?請參閱關於 在容器中開啟遠端 SSH 主機上的資料夾 的章節以取得資訊。

信任您的工作區

Visual Studio Code 非常重視安全性,並希望協助您安全地瀏覽和編輯程式碼,無論來源或原始作者為何。工作區信任功能 可讓您決定專案資料夾是否應允許或限制自動程式碼執行。

Dev Containers 擴充功能已採用工作區信任。根據您開啟和與原始程式碼互動的方式,系統會在不同時間點提示您決定是否信任您正在編輯或執行的程式碼。

在容器中重新開啟資料夾

為現有專案設定開發容器 需要信任本機 (或 WSL) 資料夾。在視窗重新載入之前,系統會要求您信任本機 (或 WSL) 資料夾。

此流程有幾個例外情況

  1. 當按一下最近的項目時。
  2. 如果尚未給予信任,則使用 Open Folder in Container (在容器中開啟資料夾) 命令會在視窗重新載入後要求信任。

附加至現有容器

附加到現有容器 時,系統會要求您確認附加表示您信任容器。這只會確認一次。

Workspace trust prompt when attaching to container

在磁碟區中複製存放庫

在容器磁碟區中複製存放庫 時,系統會要求您確認複製存放庫表示您信任存放庫。這只會確認一次。

Workspace trust prompt when cloning in container volume

檢查磁碟區

檢查磁碟區 會在 受限模式 中啟動,您可以信任容器內的資料夾。

遠端執行的 Docker daemon

這表示信任 執行 Docker daemon 的機器。沒有額外的提示需要確認 (只有上述本機/WSL 案例列出的提示)。

建立 devcontainer.json 檔案

VS Code 的容器設定儲存在 devcontainer.json 檔案中。此檔案類似於偵錯設定的 launch.json 檔案,但用於啟動 (或附加到) 您的開發容器。您也可以指定要在容器執行後安裝的任何擴充功能,或準備環境的後續建立命令。開發容器設定位於 .devcontainer/devcontainer.json 下,或儲存為專案根目錄中的 .devcontainer.json 檔案 (請注意點前置字元)。

從命令面板 (F1) 選取 Dev Containers: Add Dev Container Configuration Files... (開發容器:新增開發容器設定檔...) 命令,將會將所需的檔案新增至您的專案作為起點,您可以進一步自訂以符合您的需求。此命令可讓您從清單中根據資料夾的內容選取預先定義的容器設定、重複使用現有的 Dockerfile 或重複使用現有的 Docker Compose 檔案。

Select a node Dev Container Template

您也可以手動建立 devcontainer.json,並使用任何映像、Dockerfile 或一組 Docker Compose 檔案作為起點。以下是一個簡單的範例,其中使用其中一個預先建置的 開發容器映像

{
  "image": "mcr.microsoft.com/devcontainers/typescript-node",
  "forwardPorts": [3000],
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      // Add the IDs of extensions you want installed when the container is created.
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  }
}

注意:根據基本映像中的內容,其他設定已新增至容器。例如,我們在上方新增了 streetsidesoftware.code-spell-checker 擴充功能,而容器也會包含 "dbaeumer.vscode-eslint",因為 這是 mcr.microsoft.com/devcontainers/typescript-node 的一部分。當使用 devcontainer.json 預先建置時,會自動發生這種情況,您可以在 預先建置章節 中閱讀更多相關資訊。

若要深入瞭解如何建立 devcontainer.json 檔案,請參閱建立開發容器

開發容器功能

開發容器「功能」是獨立、可共用的安裝程式碼和開發容器設定單元。名稱來自於以下概念:參考其中一個功能可讓您快速輕鬆地將更多工具、執行階段或程式庫「功能」新增至您的開發容器,以供您或您的協作者使用。

當您使用 Dev Containers: Add Dev Container Configuration Files (開發容器:新增開發容器設定檔) 時,您會看到自訂現有開發容器設定的指令碼清單,例如安裝 Git 或 Azure CLI

Dev container Features list drop down

當您重建並在容器中重新開啟時,您選取的功能將可在您的 devcontainer.json 中使用

"features": {
    "ghcr.io/devcontainers/features/github-cli:1": {
        "version": "latest"
    }
}

當您直接在 devcontainer.json 中編輯 "features" 屬性時,您將會取得 IntelliSense

Intellisense when modifying terraform Feature

Dev Containers: Configure Container Features (開發容器:設定容器功能) 命令可讓您更新現有的設定。

VS Code UI 中來源的功能現在來自中央索引,您也可以為其貢獻。請參閱 Dev Containers specification 網站 以取得目前清單,並 瞭解如何發佈和散佈功能

「永遠安裝」功能

與您可以在開發容器中 設定永遠安裝的擴充功能 類似,您可以使用 dev.containers.defaultFeatures 使用者設定,設定您永遠想要安裝的功能

"dev.containers.defaultFeatures": {
    "ghcr.io/devcontainers/features/github-cli:1": {}
},

建立您自己的功能

建立和發佈您自己的 Dev Container 功能 (Features) 也非常容易。已發佈的功能可以儲存為 OCI Artifacts,並從任何支援的公開或私有容器登錄檔共用。您可以在 containers.dev 上查看目前已發佈功能的列表。

功能 (Feature) 是一個獨立的實體,存在於一個資料夾中,至少包含一個 devcontainer-feature.jsoninstall.sh 進入點腳本

+-- feature
|    +-- devcontainer-feature.json
|    +-- install.sh
|    +-- (other files)

請查看 feature/starter 儲存庫,以取得關於使用開發容器 CLI 發佈您自己的公開或私有功能的說明。

功能規格和發佈

功能是開放原始碼 開發容器規格 的關鍵部分。您可以查看更多關於功能如何運作及其發佈的資訊。

預先建置開發容器映像

我們建議預先建置包含您所需工具的映像,而不是每次在開發容器中開啟專案時都建立和建置容器映像。使用預先建置的映像將能加快容器啟動速度、簡化設定,並讓您釘選至特定版本的工具,以提高供應鏈安全性並避免潛在的中斷。您可以使用 DevOps 或持續整合 (CI) 服務 (如 GitHub Actions) 來排程建置,自動化預先建置映像的流程。

更棒的是,預先建置的映像可以包含開發容器中繼資料,因此當您參考映像時,設定將會自動提取。

我們建議使用 開發容器 CLI (或其他 規格 支援的公用程式,如 GitHub Action) 來預先建置您的映像,因為它可以與開發容器擴充功能的最新功能保持同步,包括 開發容器功能 (Features)。一旦您建置了映像,就可以將其推送至容器登錄檔 (如 Azure Container RegistryGitHub Container RegistryDocker Hub),並直接參考它。

您可以使用 devcontainers/ci 儲存庫中的 GitHub Action,以協助您在工作流程中重複使用開發容器。

前往關於預先建置映像的開發容器 CLI 文章以取得更多資訊。

繼承中繼資料

您可以透過 映像標籤 將開發容器設定和功能中繼資料包含在預先建置的映像中。這使映像成為獨立的,因為當映像被參考時,這些設定會自動被提取,無論是直接參考、在參考的 Dockerfile 中的 FROM 指令中,或是在 Docker Compose 檔案中。這有助於防止您的開發容器設定和映像內容不同步,並讓您透過簡單的映像參考,將相同設定的更新推送至多個儲存庫。

當您使用 開發容器 CLI (或其他 規格 支援的公用程式,如 GitHub ActionAzure DevOps 工作) 進行預先建置時,這個中繼資料標籤會自動新增,並且包含來自 devcontainer.json 和任何參考的開發容器功能的設定。

這讓您可以擁有一個更複雜的 devcontainer.json 來預先建置您的映像,然後在一個或多個儲存庫中擁有一個大幅簡化的版本。映像的內容將在您建立容器時與這個簡化的 devcontainer.json 內容合併 (前往 規格 了解關於合併邏輯的資訊)。但最簡單的情況是,您可以直接在 devcontainer.json 中參考映像,讓設定生效。

{
  "image": "mcr.microsoft.com/devcontainers/go:1"
}

請注意,您也可以選擇手動將中繼資料新增至映像標籤。即使您沒有使用開發容器 CLI 進行建置,這些屬性也會被提取 (即使您使用了,也可以由 CLI 更新)。例如,考慮以下 Dockerfile 片段

LABEL devcontainer.metadata='[{ \
  "capAdd": [ "SYS_PTRACE" ], \
  "remoteUser": "devcontainer", \
  "postCreateCommand": "yarn install" \
}]'

檢查磁碟區

有時您可能會遇到想要檢查或變更 Docker 具名磁碟區的情況。您可以使用 VS Code 來處理這些內容,而無需建立或修改 devcontainer.json 檔案,方法是從命令選 palette (F1) 中選取 Dev Containers: Explore a Volume in a Dev Container...(開發容器:在開發容器中瀏覽磁碟區...)

您也可以在「遠端總管」中檢查您的磁碟區。請確保您在下拉式選單中選取了「容器」,然後您會注意到一個 Dev Volumes (開發磁碟區) 區段。您可以右鍵點擊磁碟區以檢查其建立資訊,例如磁碟區建立的時間、複製到其中的儲存庫以及掛載點。您也可以在開發容器中瀏覽它。

Right-click dev volumes in Remote Explorer

如果您安裝了 Docker 擴充功能,您可以右鍵點擊 Docker 總管Volumes (磁碟區) 區段中的磁碟區,然後選取 Explore in a Development Container (在開發容器中瀏覽)

Explore in dev container in Docker context menu

管理擴充功能

VS Code 在兩個位置執行擴充功能:本機 UI/用戶端,或在容器中。雖然影響 VS Code UI 的擴充功能 (如佈景主題和程式碼片段) 安裝在本機,但大多數擴充功能將會駐留在特定的容器內。這讓您可以僅在容器中安裝給定任務所需的擴充功能,並透過連線到新的容器來無縫切換您的整個工具鏈。

如果您從「擴充功能」檢視安裝擴充功能,它將會自動安裝在正確的位置。您可以根據類別分組來判斷擴充功能安裝的位置。將會有一個 Local - Installed (本機 - 已安裝) 類別,以及您的容器的類別。

Workspace Extension Category

Local Extension Category

注意: 如果您是擴充功能作者,並且您的擴充功能無法正常運作或安裝在錯誤的位置,請參閱 支援遠端開發 以取得詳細資訊。

實際上需要遠端執行的本機擴充功能將會在 Local - Installed (本機 - 已安裝) 類別中顯示為 Disabled (已停用)。選取 Install (安裝) 以在您的遠端主機上安裝擴充功能。

Disabled Extensions w/Install Button

您也可以透過前往「擴充功能」檢視,並使用 Local - Installed (本機 - 已安裝) 標題列右側的雲端按鈕,選取 Install Local Extensions in Dev Container: {Name} (在開發容器中安裝本機擴充功能:{名稱}),在開發容器內安裝所有本機安裝的擴充功能。這將會顯示一個下拉式選單,您可以在其中選取要在容器中安裝的本機安裝擴充功能。

Install all extensions

但是,某些擴充功能可能需要您在容器中安裝其他軟體。如果您遇到問題,請查閱擴充功能文件以取得詳細資訊。

將擴充功能新增至 devcontainer.json

雖然您可以手動編輯您的 devcontainer.json 檔案來新增擴充功能 ID 列表,但您也可以右鍵點擊「擴充功能」檢視中的任何擴充功能,然後選取 Add to devcontainer.json (新增至 devcontainer.json)

Add to devcontainer.json menu

選擇退出擴充功能

如果基礎映像或功能設定了您不希望安裝在開發容器中的擴充功能,您可以透過列出帶有減號的擴充功能來選擇退出。例如

{
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
  "customizations": {
    "vscode": {
      "extensions": ["-dbaeumer.vscode-eslint"]
    }
  }
}

「始終安裝」的擴充功能

如果有您希望始終安裝在任何容器中的擴充功能,您可以更新 dev.containers.defaultExtensions 使用者設定。例如,如果您想要安裝 GitLensResource Monitor 擴充功能,您將會如下所示指定它們的擴充功能 ID

"dev.containers.defaultExtensions": [
    "eamodio.gitlens",
    "mutantdino.resourcemonitor"
]

進階:強制擴充功能在本機或遠端執行

擴充功能通常被設計和測試為在本機或遠端執行,而不是兩者。但是,如果擴充功能支援,您可以強制它在您的 settings.json 檔案中的特定位置執行。

例如,以下設定將強制 Docker 擴充功能在本機執行,並強制 Remote - SSH: Editing Configuration Files (遠端 - SSH:編輯組態檔) 擴充功能在遠端執行,而不是它們的預設值

"remote.extensionKind": {
    "ms-azuretools.vscode-docker": [ "ui" ],
    "ms-vscode-remote.remote-ssh-edit": [ "workspace" ]
}

"ui" 而不是 "workspace" 將強制擴充功能在本機 UI/用戶端執行。通常,這僅應用於測試,除非擴充功能的文件中另有說明,因為它可能會損壞擴充功能。請參閱關於 偏好的擴充功能位置 的章節以取得詳細資訊。

轉送或發佈連接埠

容器是獨立的環境,因此如果您想要存取容器內的伺服器、服務或其他資源,您需要「轉發」或 "發佈" 埠到您的主機。您可以設定您的容器始終公開這些埠,或只是暫時轉發它們。

始終轉發埠

當您在容器中附加或開啟資料夾時,您可以使用 devcontainer.json 中的 forwardPorts 屬性來指定您始終想要轉發的埠列表。

"forwardPorts": [3000, 3001]

只需重新載入/重新開啟視窗,當 VS Code 連線到容器時,設定就會套用。

暫時轉發埠

如果您需要存取您沒有新增到 devcontainer.json 或在您的 Docker Compose 檔案中發佈的埠,您可以透過從命令選 palette (F1) 執行 Forward a Port (轉發埠) 命令,在會話期間暫時轉發一個新的埠。

Forward port input

在選取埠之後,通知將會告訴您應該使用哪個 localhost 埠來存取容器中的埠。例如,如果您轉發了一個在埠 3000 上監聽的 HTTP 伺服器,通知可能會告訴您它已對應到 localhost 上的埠 4123。然後您可以使用 https://127.0.0.1:4123 連線到這個遠端 HTTP 伺服器。

如果您稍後需要存取此資訊,則相同的資訊可在「遠端總管」的 Forwarded Ports (已轉發埠) 區段中找到。

如果您希望 VS Code 記住您已轉發的任何埠,請在「設定編輯器」(⌘, (Windows, Linux Ctrl+,)) 中勾選 Remote: Restore Forwarded Ports (遠端:還原轉發的埠),或在 settings.json 中設定 "remote.restoreForwardedPorts": true

Restore forwarded ports setting

發佈埠

Docker 具有在建立容器時「發佈」埠的概念。已發佈的埠的行為非常像您提供給本機網路的埠。如果您的應用程式僅接受來自 localhost 的呼叫,它將會拒絕來自已發佈埠的連線,就像您的本機電腦對網路呼叫所做的那樣。另一方面,轉發的埠實際上看起來像是應用程式的 localhost。每種方法在不同的情況下都可能很有用。

要發佈埠,您可以

  1. 使用 appPort 屬性: 如果您在 devcontainer.json 中參考映像或 Dockerfile,您可以使用 appPort 屬性將埠發佈到主機。

    "appPort": [ 3000, "8921:5000" ]
    
  2. 使用 Docker Compose 埠對應: 埠對應 可以輕鬆地新增到您的 docker-compose.yml 檔案中,以發佈額外的埠。

    ports:
    - "3000"
    - "8921:5000"
    

在每種情況下,您都需要重建容器才能使設定生效。當您連線到容器時,您可以透過在命令選 palette (F1) 中執行 Dev Containers: Rebuild Container (開發容器:重建容器) 命令來執行此操作。

開啟終端機

從 VS Code 在容器中開啟終端機很簡單。一旦您在容器中開啟了一個資料夾,您在 VS Code 中開啟的任何終端機視窗 (Terminal > New Terminal (終端機 > 新終端機)) 都將自動在容器中而不是在本機執行。

您也可以從同一個終端機視窗中使用 code 命令列來執行許多操作,例如在容器中開啟新的檔案或資料夾。輸入 code --help 以了解可從命令列使用的選項。

Using the code CLI

在容器中偵錯

一旦您在容器中開啟資料夾,您就可以像在本機執行應用程式時一樣使用 VS Code 的偵錯工具。例如,如果您在 launch.json 中選取一個啟動設定並開始偵錯 (F5),應用程式將會在遠端主機上啟動,並將偵錯工具附加到它。

請參閱 偵錯 文件,以取得關於在 .vscode/launch.json 中設定 VS Code 偵錯功能的詳細資訊。

容器特定設定

當您連線到開發容器時,VS Code 的本機使用者設定也會重複使用。雖然這保持了您的使用者體驗一致,但您可能希望在本機電腦和每個容器之間變更其中一些設定。幸運的是,一旦您連線到容器,您也可以透過從命令選 palette (F1) 執行 Preferences: Open Remote Settings (偏好設定:開啟遠端設定) 命令,或透過在「設定編輯器」中選取 Remote (遠端) 標籤來設定容器特定的設定。當您連線到容器時,這些設定將會覆寫您已設定的任何本機設定。

Container specific settings tab

預設容器特定設定

您可以使用 settings 屬性,在 devcontainer.json 中包含容器特定設定的預設值。這些值將會在容器建立後自動放置在容器內的容器特定設定檔案中。

例如,將以下內容新增至 .devcontainer/devcontainer.json 將會設定 Java home 路徑

// Configure tool-specific properties.
"customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
        "settings": {
            "java.home": "/docker-java-home"
        }
    }
}

由於這僅建立預設值,因此您仍然可以在容器建立後根據需要變更設定。

管理容器

預設情況下,當您開啟資料夾時,開發容器擴充功能會自動啟動 devcontainer.json 中提及的容器。當您關閉 VS Code 時,擴充功能會自動關閉您已連線的容器。您可以透過將 "shutdownAction": "none" 新增至 devcontainer.json 來變更此行為。

雖然您可以使用命令列來管理您的容器,但您也可以使用 Remote Explorer (遠端總管)。若要停止容器,請從下拉式選單中選取「容器」(如果存在),右鍵點擊正在執行的容器,然後選取 Stop Container (停止容器)。您也可以啟動已退出的容器、移除容器和移除最近的資料夾。從「詳細資訊」檢視中,您可以轉發埠並在瀏覽器中開啟已轉發的埠。

Containers Explorer screenshot

如果您想要清除映像或大量刪除容器,請參閱 清除未使用的容器和映像 以取得不同的選項。

使用點檔案存放庫個人化

Dotfiles 是檔名以點 (.) 開頭的檔案,通常包含各種應用程式的組態資訊。由於開發容器可以涵蓋各種應用程式類型,因此將這些檔案儲存在某個位置可能很有用,以便您可以在容器啟動並執行後輕鬆地將它們複製到容器中。

一種常見的做法是將這些 dotfiles 儲存在 GitHub 儲存庫中,然後使用公用程式來複製和套用它們。開發容器擴充功能內建支援將這些檔案與您自己的容器一起使用。如果您不熟悉這個概念,請查看存在的不同 dotfiles bootstrap 儲存庫

若要使用它,請將您的 dotfiles GitHub 儲存庫新增至 VS Code 的使用者設定 (⌘, (Windows, Linux Ctrl+,)),如下所示

Settings for dotfiles

或在 settings.json

{
  "dotfiles.repository": "your-github-id/your-dotfiles-repo",
  "dotfiles.targetPath": "~/dotfiles",
  "dotfiles.installCommand": "install.sh"
}

從此時開始,每次建立容器時都會使用 dotfiles 儲存庫。

已知限制

開發容器限制

  • 支援 Windows 容器映像。
  • 多根工作區中的所有根目錄/資料夾都將在同一個容器中開啟,無論較低層級是否有組態檔。
  • 支援 Linux 的非官方 Ubuntu Docker snap 套件。請遵循 適用於您的發行版本的官方 Docker 安裝說明
  • 不支援 Windows 上的 Docker Toolbox。
  • 如果您使用 SSH 複製 Git 儲存庫,並且您的 SSH 金鑰有密碼,則 VS Code 的提取和同步功能在遠端執行時可能會掛起。請使用沒有密碼的 SSH 金鑰、使用 HTTPS 複製,或從命令列執行 git push 以解決此問題。
  • 本機 Proxy 設定不會在容器內重複使用,這可能會阻止擴充功能運作,除非設定了適當的 Proxy 資訊 (例如,具有適當 Proxy 資訊的全域 HTTP_PROXYHTTPS_PROXY 環境變數)。
  • 當 ssh-agent 以版本 <= 8.8 執行,而 SSH 用戶端 (在任何平台上) 執行版本 >= 8.9 時,Windows 上的 OpenSSH 版本之間存在不相容性。解決方法是將 Windows 上的 OpenSSH 升級到 8.9 或更高版本,可以使用 winget 或來自 Win32-OpenSSH/releases 的安裝程式。(請注意,ssh-add -l 將會正常運作,但 ssh <ssh-server> 將會失敗,並顯示 <ssh-server>: Permission denied (publickey)。這也會影響使用 SSH 連線到儲存庫的 Git。)

請參閱 此處 以取得與容器相關的現有問題列表。

Docker 限制

請參閱 Docker 疑難排解指南,以取得 WindowsMac 的資訊,並查閱 Docker 支援資源 以取得更多資訊。

Docker 擴充功能限制

如果您從 WSL、Remote - Tunnels 或 Remote - SSH 視窗使用 Docker 或 Kubernetes 擴充功能,則在 Docker 或 Kubernetes 檢視中使用 Attach Visual Studio Code (附加 Visual Studio Code) 內容選單動作時,會第二次要求從可用的容器中選取。

擴充功能限制

目前,大多數擴充功能都可以在開發容器內運作,而無需修改。但是,在某些情況下,某些功能可能需要變更。如果您遇到擴充功能問題,請參閱 此處 以取得常見問題和解決方案的摘要,您可以在報告問題時向擴充功能作者提及這些問題。

此外,雖然 Alpine 支援可用,但由於擴充功能內部原生程式碼中的 glibc 依賴性,某些安裝在容器中的擴充功能可能無法運作。請參閱 使用 Linux 進行遠端開發 文章以取得詳細資訊。

進階容器設定

請參閱 進階容器組態 文章,以取得關於以下主題的資訊

devcontainer.json 參考

有一個完整的 devcontainer.json 參考,您可以在其中查看檔案結構描述,以協助您自訂您的開發容器並控制您如何附加到正在執行的容器。

問題或意見反應

後續步驟