Skip to main content

Como usar o GitHub Codespaces no Visual Studio Code

Você pode desenvolver seu codespace diretamente no Visual Studio Code ao conectar a extensão do GitHub Codespaces à sua conta no GitHub Enterprise Cloud.

Sobre o GitHub Codespaces no Visual Studio Code

Você pode usar sua instalação local de Visual Studio Code para criar, gerenciar, trabalhar e excluir codespaces. Para usar o GitHub Codespaces no VS Code, você deverá instalar a extensão do Codespaces. Para obter mais informações sobre como configurar os GitHub Codespaces no VS Code, confira "Pré-requisitos".

Por padrão, se você criar um novo codespace em GitHub.com, ele será aberto no navegador. Se você preferir abrir qualquer codespace novo no VS Code automaticamente, poderá definir seu editor padrão como VS Code. Para obter mais informações, confira "Como configurar o editor padrão do GitHub Codespaces".

Se preferir trabalhar no navegador, mas quiser continuar usando as extensões, os temas e os atalhos do VS Code, ative a Sincronização de Configurações. Para obter mais informações, confira "Como personalizar o GitHub Codespaces para sua conta".

Pré-requisitos

Para desenvolver em um codespace diretamente no VS Code, você deverá instalar e efetuar o login na extensão dos GitHub Codespaces com as suas credenciais do GitHub Enterprise Cloud. A extensão dos GitHub Codespaces exige a versão de outubro de 2020 1.51 ou posterior do VS Code.

Use o Visual Studio Code Marketplace para instalar a extensão dos GitHub Codespaces. Para obter mais informações, confira o Marketplace de Extensões na documentação do 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. Clique em Entrar no GitHub... .

    Como entrar nos GitHub Codespaces

  3. Para autorizar o VS Code a acessar sua conta no GitHub Enterprise Cloud, clique em Permitir.

  4. Registre-se e, GitHub Enterprise Cloud para aprovar a extensão.

  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 o menu suspenso "GERENCIADOR REMOTO" e clique em GitHub Codespaces .

    Sobre o cabeçalho dos GitHub Codespaces

  3. Clique em Entrar para ver os Codespaces .

    Como entrar para ver os GitHub Codespaces

  4. Para autorizar o VS Code a acessar sua conta no GitHub Enterprise Cloud, clique em Permitir.

  5. Registre-se e, GitHub Enterprise Cloud para aprovar a extensão.

Criar um codespace no VS Code

Depois de conectar a conta no GitHub.com à extensão GitHub Codespaces, você poderá criar um codespace. Para obter mais informações sobre a extensão GitHub Codespaces, veja o VS Code Marketplace.

  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. Clique no ícone de Adição: .

    A opção Criar codespace nos GitHub Codespaces

  3. Digite o nome do repositório no qual você deseja desenvolver e selecione-o.

    Como procurar um repositório para criar um codespace

    Se o repositório escolhido pertencer a uma organização e a organização tiver configurado os codespaces desse repositório como faturáveis para a organização ou empresa matriz, uma mensagem será exibida nos próximos prompts informando quem pagará pelo codespace.

  4. Clique no branch que você deseja desenvolver.

    Como procurar um branch para criar um codespace

  5. Se solicitado a escolher um arquivo de configuração de contêiner de desenvolvimento, escolha um arquivo na lista.

    Como escolher um arquivo de configuração de contêiner de desenvolvimento para GitHub Codespaces

  6. Clique no tipo de computador que você quer usar.

    Tipos de instância para um novo codespace

    Observação: Sua escolha de tipos de computador disponíveis pode ser limitada por vários fatores. Esses fatores podem incluir uma política configurada para a organização ou uma especificação mínima de tipo de computador para o 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".

Abrir um codespace no 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. Em "Codedespaces", clique no código que você deseja desenvolver.

  3. Clique no ícone Conectar-se ao Codespace.

    O ícone de Conectar a um Codespace no VS Code

Alterar o tipo da máquina no VS Code

Normalmente, você pode executar o codespace na sua escolha de tipos de computador remoto. Esses tipos de computador oferecem uma opção de especificações de hardware que variam de 2 a 32 núcleos, embora a gama completa de tipos de computador nem sempre esteja disponível. Cada tipo de computador tem um nível diferente de recursos e um tipo de cobrança diferente. 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. Você pode alterar o tipo de computador do seu codespace a qualquer momento.

Observação: Sua escolha de tipos de computador disponíveis pode ser limitada por vários fatores. Esses fatores podem incluir uma política configurada para a organização ou uma especificação mínima de tipo de computador para o 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. No VS Code, abra a Paleta de Comandos com Command+Shift+P (Mac) ou Ctrl+Shift+P (Windows/Linux).

  2. Pesquise e selecione "Codespaces: Alterar tipo de máquina."

    Pesquisar um branch para criar um novo Codespaces

  3. Se você não estiver seguindo essas instruções em um codespace, clique no codespace que deseja alterar.

    Pesquisar um branch para criar um novo Codespaces

    Se você estiver seguindo essas instruções em um codespace, a alteração se aplicará ao codespace do trabalho atual.

  4. Clique no tipo de computador que você quer usar.

  5. Se você estiver alterando para um tipo de computador com uma capacidade de armazenamento diferente, será exibido um prompt perguntando se deseja continuar. Leia o prompt e clique em Sim para aceitar.

Se você alterou para uma máquina virtual com uma capacidade de armazenamento diferente (por exemplo, de 64 GB para 32 GB), o codespace não ficará disponível por um breve período enquanto o tipo de computador é alterado. Se o codespace estiver ativo no momento, ele será interrompido automaticamente. Quando a alteração for concluída, você poderá reiniciar o codespace em execução no novo tipo de computador.

Se você alterou para uma máquina virtual com a mesma capacidade de armazenamento, a alteração será aplicada na próxima vez que você reiniciar o codespace. Um codespace ativo não será interrompido automaticamente. Para obter mais informações de como reiniciar um codespace, confira "Como parar e iniciar um codespace".

Excluir um codespace no 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

Alternar para o build de Insiders do VS Code

Você pode usar o Build de Insiders do VS Code nos GitHub Codespaces.

  1. No canto inferior esquerdo da janela dos GitHub Codespaces, selecione Configurações.

  2. Na lista, selecione "Alternar para Versão de Insiders".

    Clique em "Build do Insiders" nos GitHub Codespaces

  3. Após a seleção, os GitHub Codespaces continuarão a abrir na Versão Insiders.

Leitura adicional