跳至主要内容

在 Visual Studio Code 中使用 GitHub Codespaces

您可以通过将 GitHub Codespaces 扩展与您在 GitHub 上的帐户连接,直接在 Visual Studio Code 中的 Codespace 中进行开发。

关于在 Visual Studio Code 中使用 GitHub Codespaces

您可以使用本地安装的 Visual Studio Code 来创建、管理、使用和删除代码空间。要在 VS Code 中使用 GitHub Codespaces,您需要安装 Codespaces 扩展。有关在 VS Code 中设置 GitHub Codespaces 的更多信息,请参阅“先决条件”。

默认情况下,如果您在 GitHub.com 上创建新的代码空间,它将在浏览器中打开。如果您希望自动在 VS Code 中打开所有新的代码空间,可以将您的默认编辑器设置为 VS Code。有关更多信息,请参阅“设置 GitHub Codespaces 的默认编辑器”。

如果您更喜欢在浏览器中工作,但希望继续使用现有的 VS Code 扩展、主题和快捷键,可以打开设置同步。有关更多信息,请参阅“个性化您的 GitHub Codespaces 帐户”。

先决条件

要在 VS Code 中直接开发代码空间,您必须安装并使用您的 GitHub 凭据登录 GitHub Codespaces 扩展。GitHub Codespaces 扩展需要 VS Code 2020 年 10 月发布版 1.51 或更高版本。

使用 Visual Studio Code Marketplace 安装 GitHub Codespaces 扩展。有关更多信息,请参阅 VS Code 文档中的 扩展市场

  1. 在 VS Code 中,在活动栏中,单击远程资源管理器图标。

    Screenshot of the Activity Bar. The icon for the "Remote Explorer" side bar (a rectangle overlaid by a circle) is highlighted with an orange outline.

    注意:如果活动栏中未显示远程资源管理器

    1. 访问命令面板。例如,按 Shift+Command+P(Mac)/ Ctrl+Shift+P(Windows/Linux)。
    2. 键入:details
    3. 单击代码空间:详细信息
  2. 从“远程资源管理器”侧边栏顶部的下拉菜单中选择“GitHub Codespaces”,如果尚未选择。

  3. 单击登录 GitHub

    Screenshot of the "Remote Explorer" side bar for "GitHub Codespaces" with the "Sign in to GitHub" button displayed.

  4. 如果您当前未登录 GitHub,系统会提示您登录。请继续登录。

  5. 当系统提示您指定要授权的内容时,请单击“GitHub”的“**授权**”按钮。

  6. 如果显示授权页面,请单击“**授权 Visual-Studio-Code**”。

在 VS Code 中创建代码空间

在将您的 GitHub.com 帐户连接到 GitHub Codespaces 扩展后,您可以创建一个新的代码空间。有关 GitHub Codespaces 扩展的更多信息,请参阅 VS Code Marketplace

  1. 在 VS Code 中,在活动栏中,单击远程资源管理器图标。

    Screenshot of the Activity Bar. The icon for the "Remote Explorer" side bar (a rectangle overlaid by a circle) is highlighted with an orange outline.

    注意:如果活动栏中未显示远程资源管理器

    1. 访问命令面板。例如,按 Shift+Command+P(Mac)/ Ctrl+Shift+P(Windows/Linux)。
    2. 键入:details
    3. 单击代码空间:详细信息
  2. 将鼠标悬停在“远程资源管理器”侧边栏上,然后单击 .

    Screenshot of the "Remote Explorer" side bar for GitHub Codespaces. The tooltip "Create New Codespace" is displayed beside the plus sign button.

  3. 在文本框中,键入要开发的存储库的名称,然后选择它。

    Screenshot of "octo-org/he" entered into the text box and a list of four repositories that start with this string.

    在后续提示的右侧会显示一条消息,告诉您谁将为代码空间付费。

    Screenshot of a prompt for a branch, with the message "Usage paid for by hubwriter."

  4. 单击要开发的分支。

  5. 如果系统提示您选择一个开发容器配置文件,请从列表中选择一个文件。

  6. 单击要使用的机器类型。

    注意:可用的机器类型选择可能会受到多种因素的限制。这些因素可能包括为您的组织配置的策略,或您的存储库的最小机器类型规范。有关更多信息,请参阅“限制对机器类型的访问”和“为代码空间机器设置最小规范”。

在 VS Code 中打开代码空间

  1. 在 VS Code 中,在活动栏中,单击远程资源管理器图标。

    Screenshot of the Activity Bar. The icon for the "Remote Explorer" side bar (a rectangle overlaid by a circle) is highlighted with an orange outline.

    注意:如果活动栏中未显示远程资源管理器

    1. 访问命令面板。例如,按 Shift+Command+P(Mac)/ Ctrl+Shift+P(Windows/Linux)。
    2. 键入:details
    3. 单击代码空间:详细信息
  2. 在“GitHub Codespaces”下,将鼠标悬停在要开发的代码空间上。

  3. 单击连接图标(一个插头符号)。

    Screenshot of the "Remote Explorer" side bar. The connection icon for a codespace (a plug symbol) is highlighted with a dark orange outline.

在 VS Code 中更改机器类型

通常,您可以在选择的远程机器类型上运行您的代码空间。这些机器类型提供从 2 核到 32 核的硬件规格选择,但并非始终提供所有机器类型。每种机器类型都有不同的资源级别和不同的计费层级。有关信息,请参阅“关于 GitHub Codespaces 的计费”。

默认情况下,在您创建代码空间时,将使用具有最低有效资源的机器类型。您可以随时更改代码空间的机器类型。

注意:可用的机器类型选择可能会受到多种因素的限制。这些因素可能包括为您的组织配置的策略,或您的存储库的最小机器类型规范。有关更多信息,请参阅“限制对机器类型的访问”和“为代码空间机器设置最小规范”。

  1. 在 VS Code 中,使用 Command+Shift+P(Mac)或 Ctrl+Shift+P(Windows/Linux)打开命令面板。

  2. 搜索并选择“Codespaces: 更改机器类型”。

    Screenshot of "change machine" entered as a search string and "Codespaces: Change Machine Type" in the dropdown list.

  3. 如果您没有在代码空间内按照这些说明操作,请单击您要更改的代码空间。

    Screenshot of a dropdown list of four codespaces.

    如果您在代码空间内按照这些说明操作,则更改将应用于您正在使用的代码空间。

  4. 选择您要使用的机器类型。

  5. 如果您要更改为具有不同存储容量的机器类型,将出现一个提示,询问您是否要继续。阅读提示并单击“是”以接受。

如果您更改为具有不同存储容量的虚拟机(例如,从 32 GB 更改为 64 GB),您的代码空间将在更改机器类型时短暂不可用。如果代码空间当前处于活动状态,它将自动停止。更改完成后,您将能够重新启动在新的机器类型上运行的代码空间。

如果您更改为具有相同存储容量的虚拟机,则更改将在您下次重新启动代码空间时应用。活动代码空间不会自动停止。有关重新启动代码空间的更多信息,请参阅“停止和启动代码空间”。

在 VS Code 中删除代码空间

当您当前不在代码空间中工作时,您可以从 VS Code 中删除代码空间。

  1. 在 VS Code 中,在活动栏中,单击远程资源管理器图标。

    Screenshot of the Activity Bar. The icon for the "Remote Explorer" side bar (a rectangle overlaid by a circle) is highlighted with an orange outline.

    注意:如果活动栏中未显示远程资源管理器

    1. 访问命令面板。例如,按 Shift+Command+P(Mac)/ Ctrl+Shift+P(Windows/Linux)。
    2. 键入:details
    3. 单击代码空间:详细信息
  2. 在“GitHub Codespaces”中,右键单击要删除的 codespace。

  3. 单击 **删除 Codespace**。

在 Web 客户端中切换到 VS Code Insiders

如果您使用的是 VS Code Web 客户端,则可以切换到应用程序的 Insiders 版本。有关此版本的 VS Code 的更多信息,请参阅 VS Code 博客中的 Introducing the Insiders Build

在 codespace 中切换版本后,如果您停止并重新启动 codespace,Web 客户端将继续使用 Insiders 版本。您在 VS Code Web 客户端中创建和打开的新 codespace 也将使用 Insiders 版本。

  1. 在显示 codespace 的浏览器窗口的左下角,单击 ****。

  2. 在菜单中,选择“切换到内部版本”。

    Screenshot of the VS Code web client. A gear icon is highlighted with an orange outline. "Switch to Insiders Version" is shown in the menu.

  3. 点击重新加载

要切换回 VS Code 的稳定版本,请重复此过程,但选择切换到稳定版本。切换回稳定版本后,如果您停止并重新启动 codespace,codespace 将继续使用稳定版本。您在 VS Code 网页客户端中创建和打开的新 codespace 也将使用稳定版本。

使用 Codespaces 的内部版本桌面应用程序

要在 VS Code 桌面应用程序的内部版本中使用 GitHub Codespaces,请从 VS Code 内部版本应用程序中启动或创建您的 codespace。有关更多信息,请参阅本文档前面部分的“在 VS Code 中创建 codespace”和“在 VS Code 中打开 codespace”。

进一步阅读