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.

Os GitHub Codespaces estão disponíveis para organizações que usam o GitHub Team ou o GitHub Enterprise Cloud. GitHub Codespaces também está disponível como uma versão beta limitado para usuários individuais nos planos GitHub Free e GitHub Pro. Para obter mais informações, confira "produtos de 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. Em VS Code, na barra lateral esquerda, clique no ícone do Gerenciador Remoto.

    O ícone do Remote Explorer no Visual Studio Code

    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. Em VS Code, na barra lateral esquerda, clique no ícone do Gerenciador Remoto.

    O ícone do Remote Explorer no Visual Studio Code

    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. Em VS Code, na barra lateral esquerda, clique no ícone do Gerenciador Remoto.

    O ícone do Remote Explorer no Visual Studio Code

    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

    If codespaces are billable for the repository you choose, a message will be displayed in subsequent prompts telling you who will pay for the 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: As opções de tipos de computadores disponíveis podem ser limitadas por uma política configurada para sua organização ou por uma especificação de tipo mínimo de computador para seu repositório. Para obter mais informações, confira "Como restringir o acesso aos tipos de computadores" e "Como definir uma especificação mínima para computadores de codespace".

Opening a codespace in VS Code

  1. Em VS Code, na barra lateral esquerda, clique no ícone do Gerenciador Remoto.

    O ícone do Remote Explorer no Visual Studio Code

    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

Normalmente, você pode executar seu codespace em um computador remoto de 2 a 32 núcleos. Cada uma delas tem um nível diferente de recursos e uma camada diferente de cobrança. Para obter mais informações, confira "Sobre a cobrança do GitHub Codespaces".

Por padrão, o tipo de computador com os recursos válidos mais baixos é usado quando você cria um codespace. You can change the machine type of your codespace at any time.

Note: As opções de tipos de computadores disponíveis podem ser limitadas por uma política configurada para sua organização ou por uma especificação de tipo mínimo de computador para seu repositório. Para obter mais informações, confira "Como restringir o acesso aos tipos de computadores" e "Como definir uma especificação mínima para computadores de codespace".

  1. In VS Code, open the Command Palette with Command+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux).

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

    Searching for a branch to create a new Codespaces

  3. If you're not following these instructions within a codespace, click the codespace that you want to change.

    Searching for a branch to create a new Codespaces

    If you are following these instructions in a codespace, the change will apply to the codespace you're working in.

  4. Select the machine type you want to use.

  5. If you're changing to a machine type with a different storage capacity, a prompt will appear asking if you would like to continue. Read the prompt and click Yes to accept.

If you changed to a virtual machine with a different storage capacity (for example, from 64GB to 32GB), your codespace will be unavailable for a short time while the machine type is changed. If the codespace is currently active, it will automatically be stopped. When the change is complete, you'll be able to restart the codespace running on the new machine type.

If you changed to a virtual machine with the same storage capacity, the change will be applied the next time you restart the codespace. An active codespace will not be stopped automatically. For more information on restarting a codespace, see "Stopping and starting a codespace."

Deleting a codespace in VS Code

Você pode excluir codespaces de dentro do VS Code quando você não estiver trabalhando no codespace.

  1. Em VS Code, na barra lateral esquerda, clique no ícone do Gerenciador Remoto.

    O ícone do Remote Explorer no Visual Studio Code

    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. Em "GITHUB CODESPACES", clique com o botão direito do mouse no codespace que você deseja excluir.

  3. Clique em Excluir Codespace.

    Excluir um codespace em 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.