Skip to main content

在 Visual Studio Code 中使用 GitHub Codespaces

可以将 GitHub Codespaces 扩展连接到 GitHub Enterprise Cloud 上的帐户,直接在 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 中的任何新 codespace,则可以将默认编辑器设置为 VS Code。 有关详细信息,请参阅“设置 GitHub Codespaces 的默认编辑器”。

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

先决条件

若要直接在 VS Code 的 codespace 中进行开发,必须使用 GitHub Enterprise Cloud 凭据安装并登录到 GitHub Codespaces 扩展。 GitHub Codespaces 扩展需要 VS Code 2020 年 10 月 版本 1.51 或更高版本。

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

  1. 在 VS Code 中,从左侧边栏单击“远程 Explorer”图标。

    Visual Studio Code 中的 Remote Explorer 图标

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. 单击“登录到 GitHub…”。

    登录到 GitHub Codespaces

  3. 要授权 VS Code 访问你在 GitHub Enterprise Cloud 上的帐户,请单击“允许”。

  4. 登录 GitHub Enterprise Cloud 以审批扩展。

  1. 在 VS Code 中,从左侧边栏单击“远程 Explorer”图标。

    Visual Studio Code 中的 Remote Explorer 图标

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. 使用“远程资源管理器”下拉列表,然后单击“GitHub Codespaces”。

    GitHub Codespaces 标头

  3. 单击“登录以查看 Codespaces”。

    登录以查看 GitHub Codespaces

  4. 要授权 VS Code 访问你在 GitHub Enterprise Cloud 上的帐户,请单击“允许”。

  5. 登录 GitHub Enterprise Cloud 以审批扩展。

在 VS Code 中创建 codespace

将 GitHub.com 上的帐户连接到 GitHub Codespaces 扩展后,可以创建新的 codespace。 有关 GitHub Codespaces 扩展的详细信息,请参阅 VS Code Marketplace

  1. 在 VS Code 中,从左侧边栏单击“远程 Explorer”图标。

    Visual Studio Code 中的 Remote Explorer 图标

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. 单击“添加”图标:

    GitHub Codespaces 中的“新建 Codespace”选项

  3. 键入要在其中开发的存储库的名称,然后将其选中。

    搜索要在其中新建 codespace 的存储库

    如果你选择的存储库归组织所有,并且该组织已将此存储库的 codespace 配置为可向组织或其父企业计费,则后续提示中会显示一条消息,告知谁将支付 codespace 费用。

  4. 单击要在其中开发的分支。

    搜索要在其中新建 codespace 的分支

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

    为 GitHub Codespaces 选择一个开发容器配置文件

  6. 选择你要使用的机器类型。

    新 codespace 的实例类型

    注意:你选择的可用计算机类型可能会受到多种因素的限制。 其中可能包括为组织配置的策略,或者存储库的计算机类型最低规范。 有关详细信息,请参阅“限制对计算机类型的访问”和“为代码空间计算机设置最低规范”。

在 VS Code 中打开 codespace

  1. 在 VS Code 中,从左侧边栏单击“远程 Explorer”图标。

    Visual Studio Code 中的 Remote Explorer 图标

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. 在“Codespaces(代码空间)”下,单击您要在其中开发的代码空间。

  3. 单击 Connect to Codespace(连接到代码空间)图标。

    VS Code 中的“连接到 codespace”图标

在 VS Code 中更改计算机类型

通常,你可以在选择的远程计算机上运行 codespace。 这些计算机类型有 2 核到 32 核的硬件规格可选,尽管各种计算机类型可能并不总是可用。 每种计算机类型都有不同的资源水平和不同的计费等级。 有关信息,请参阅“关于 GitHub Codespaces 的计费”。

默认情况下,创建 codespace 时将使用具有最低有效资源的计算机类型。 可以随时更改 codespace 的计算机类型。

注意:你选择的可用计算机类型可能会受到多种因素的限制。 其中可能包括为组织配置的策略,或者存储库的计算机类型最低规范。 有关详细信息,请参阅“限制对计算机类型的访问”和“为代码空间计算机设置最低规范”。

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

  2. 搜索并选择“代码空间:更改机器类型”。

    搜索分支以创建新的 Codespaces

  3. 如果没有在 codespace 中遵循这些说明,请单击要更改的 codespace。

    搜索分支以创建新的 Codespaces

    如果要在 codespace 中遵循这些说明,则更改将应用于正在使用的 codespace。

  4. 选择你要使用的计算机类型。

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

如果更改为具有不同存储容量(例如从 64GB 更改为 32GB)的虚拟机,则在更改计算机类型时,你的 codespace 将暂时不可用。 如果 codespace 当前处于活动状态,它将自动停止。 更改完成后,便可重启在新计算机类型上运行的 codespace。

如果更改为具有相同存储容量的虚拟机,则此更改将在下次重启 codespace 时应用。 处于活动状态的 codespace 不会自动停止。 有关重启 codespace 的详细信息,请参阅“停止和启动 codespace”。

在 VS Code 中删除 codespace

如你当前未在 codespace 中工作,可从 VS Code 内删除 codespace。

  1. 在 VS Code 中,从左侧边栏单击“远程 Explorer”图标。

    Visual Studio Code 中的 Remote Explorer 图标

    Note: If the Remote Explorer is not displayed in the Activity Bar:

    1. Access the Command Palette. For example, by pressing Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux).
    2. Type: codespaces.
    3. Click Codespaces: Details.
  2. 在“GitHub Codespaces”下,右键点击你要删除的 codespace。

  3. 单击“删除 codespace”。

    在 GitHub 中删除代码空间

切换到 VS Code 的预览体验版本

可以在 GitHub Codespaces 中使用 VS Code 的预览体验版本

  1. 在 GitHub Codespaces 窗口的左下角,选择“ 设置”。

  2. 从列表中,选择“Switch to Insiders Version(切换到内部版本)”。

    单击 GitHub Codespaces 中的“预览体验版本”

  3. 选择后,GitHub Codespaces 将继续以内部版本打开。

延伸阅读