Skip to main content

Using GitHub Codespaces in Visual Studio Code

You can develop in your codespace directly in Visual Studio Code by connecting the GitHub Codespaces extension with your account on GitHub.

GitHub Codespaces 可用于使用 GitHub Team 或 GitHub Enterprise Cloud 的组织。 GitHub Codespaces 也可作为受限的 beta 版本提供给使用 GitHub Free 和 GitHub Pro 计划的个人用户。 有关详细信息,请参阅“GitHub 的产品”。

About GitHub Codespaces in Visual Studio Code

You can use your local install of Visual Studio Code to create, manage, work in, and delete codespaces. To use GitHub Codespaces in VS Code, you need to install the Codespaces extension. For more information on setting up GitHub Codespaces in VS Code, see "Prerequisites."

By default, if you create a new codespace on GitHub.com, it will open in the browser. If you would prefer to open any new codespaces in VS Code automatically, you can set your default editor to be VS Code. For more information, see "Setting your default editor for GitHub Codespaces."

If you prefer to work in the browser, but want to continue using your existing VS Code extensions, themes, and shortcuts, you can turn on Settings Sync. For more information, see "Personalizing GitHub Codespaces for your account."

Prerequisites

To develop in a codespace directly in VS Code, you must install and sign into the GitHub Codespaces extension with your GitHub credentials. The GitHub Codespaces extension requires VS Code October 2020 Release 1.51 or later.

Use the Visual Studio Code Marketplace to install the GitHub Codespaces extension. For more information, see Extension Marketplace in the VS Code documentation.

  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. Click Sign in to view GitHub....

    Signing in to view GitHub Codespaces

  3. To authorize VS Code to access your account on GitHub, click Allow.

  4. Sign in to GitHub to approve the extension.

  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. Use the "REMOTE EXPLORER" drop-down, then click GitHub Codespaces.

    The GitHub Codespaces header

  3. Click Sign in to view Codespaces....

    Signing in to view GitHub Codespaces

  4. To authorize VS Code to access your account on GitHub, click Allow.

  5. Sign in to GitHub to approve the extension.

Creating a codespace in VS Code

After you connect your account on GitHub.com to the GitHub Codespaces extension, you can create a new codespace. For more information about the GitHub Codespaces extension, see the VS Code Marketplace marketplace.

Note: Currently, VS Code doesn't allow you to choose a dev container configuration when you create a codespace. If you want to choose a specific dev container configuration, use the GitHub web interface to create your codespace. For more information, click the Web browser tab at the top of this page.

  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. Click the Add icon: .

    The Create new Codespace option in GitHub Codespaces

  3. Type the name of the repository you want to develop in, then select it.

    Searching for repository to create a new codespace

  4. Click the branch you want to develop on.

    Searching for a branch to create a new codespace

  5. If prompted to choose a dev container configuration file, choose a file from the list.

    Choosing a dev container configuration file for GitHub Codespaces

  6. Click the machine type you want to use.

    Instance types for a new codespace

    Note: 可供选择的计算机类型可能会受为组织配置的策略或存储库的计算机类型最低规范的限制。 有关详细信息,请参阅“限制对计算机类型的访问”和“为代码空间计算机设置最低规范”。

Opening a codespace in 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. Under "Codespaces", click the codespace you want to develop in.

  3. Click the Connect to Codespace icon.

    The Connect to Codespace icon in VS Code

Changing the machine type in VS Code

通常,你可以在选择的远程机器上运行 codespace,从 2 核到 32 核。 每种类型都有不同的资源水平和不同的计费等级。 有关信息,请参阅“关于 GitHub Codespaces 的计费”。

默认情况下,创建 codespace 时将使用具有最低有效资源的计算机类型。 You can change the machine type of your codespace at any time.

  1. In VS Code, open the Command Palette (shift command P / shift control P).

  2. Search for and select "Codespaces: Change Machine Type."

    Searching for a branch to create a new Codespaces

  3. Click the codespace that you want to change.

    Searching for a branch to create a new Codespaces

  4. Choose the machine type you want to use.

    Note: 可供选择的计算机类型可能会受为组织配置的策略或存储库的计算机类型最低规范的限制。 有关详细信息,请参阅“限制对计算机类型的访问”和“为代码空间计算机设置最低规范”。

  5. If the codespace is currently running, a message is displayed asking if you would like to restart and reconnect to your codespace now.

    Click Yes if you want to change the machine type used for this codespace immediately.

    If you click No, or if the codespace is not currently running, the change will take effect the next time the codespace restarts.

Deleting a codespace in VS Code

如你当前未在 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 中删除代码空间

Switching to the Insiders build of VS Code

You can use the Insiders Build of VS Code within GitHub Codespaces.

  1. In bottom left of your GitHub Codespaces window, select Settings.

  2. From the list, select "Switch to Insiders Version".

    Clicking on "Insiders Build" in GitHub Codespaces

  3. Once selected, GitHub Codespaces will continue to open in Insiders Version.