Skip to main content

Usando GitHub Codespaces no Visual Studio Code

Você pode desenvolver em seu codespace diretamente em Visual Studio Code conectando a extensão GitHub Codespaces com sua conta GitHub.

Sobre GitHub Codespaces em Visual Studio Code

Você pode usar a instalação local do Visual Studio Code para criar, gerenciar, trabalhar com 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 GitHub CodespacesVS Code, consulte Pré-requisitos.

Por padrão, se você criar um novo codespace em GitHub, ele será aberto no navegador. Se você preferir abrir novos codespaces VS Code automaticamente, poderá definir seu editor padrão como VS Code. Para saber mais, confira Definindo seu editor padrão para GitHub Codespaces.

Se preferir trabalhar no navegador, mas quiser continuar usando suas extensões, temas e atalhos existentes VS Code , você poderá ativar a Sincronização de Configurações. Para obter mais informações, consulte Personalizando GitHub codespaces para sua conta.

Pré-requisitos

Para desenvolver em um codespace diretamente no VS Code, você deve instalar e entrar na extensão GitHub Codespaces com suas credenciais GitHub. A GitHub Codespaces extensão requer VS Code a versão 1.51 ou posterior de outubro de 2020.

Use o Visual Studio Code Marketplace para instalar GitHub Codespaces extensão. Para obter mais informações, consulte o VS Code na documentação.

  1. No VS Code, na barra de Atividades, clique no ícone do Gerenciador Remoto.

    Captura de tela da Barra de Atividades. O ícone da barra lateral do "Gerenciador Remoto" (um retângulo sobreposto por um círculo) está realçado com um contorno laranja.

    Observação

    Se o Remote Explorer não for exibido na barra Activity:

    1. Abra a paleta de comandos. Por exemplo, pressionando Shift+Command+P (no Mac) / Ctrl+Shift+P (no Windows/Linux).
    2. Digite: details.
    3. Clique em Codespaces: detalhes.
  2. Se "GitHub Codespaces" ainda não estiver selecionado, selecione-o na lista suspensa no topo da barra lateral do "Explorador Remoto".

  3. Clique em Entrar em GitHub.

    Captura de tela da barra lateral do "Gerenciador Remoto" para "GitHub Codespaces" com o botão "Entrar no GitHub" exibido.

  4. Se você não estiver conectado no GitHub momento, será solicitado que você faça isso. Vá em frente e faça login.

  5. Quando for solicitado que você especifique o que deseja autorizar, clique no botão Autorizar para "GitHub.

  6. Se a página de autorização for exibida, clique em Autorizar Visual-Studio-Code.

Conectando-se a um ambiente empresarial em GHE.com

Se você acessar GitHub por meio de um subdomínio de GHE.com, deverá configurar as configurações de Github-enterprise: Uri e as configurações de Github > Codespaces: Auth Provider em VS Code antes de se conectar aos seus codespaces.

  1. Para abrir suas VS Code configurações, pressione Command+, (Mac) ou Ctrl+, (Windows).

  2. Na barra de pesquisa, procure enterprise.

  3. Para a definição de Github-enterprise: Uri, insira a URL onde você acessa GitHub. Por exemplo: https://octocorp.ghe.com.

    Como alternativa, você pode adicionar o seguinte ao arquivo settings.json :

    JSON
    "github-enterprise.uri": "https://SUBDOMAIN.ghe.com"
    
  4. Nas configurações de VS Code, pesquise por Codespaces Auth Provider.

  5. Para a Github > Codespaces: Auth Provider configuração, selecione github-enterprise na lista suspensa.

    Como alternativa, você pode adicionar o seguinte ao arquivo settings.json :

    JSON
    "github.codespaces.authProvider": "github-enterprise"
    
  6. Você verá um prompt solicitando que você entre. Clique em Entrar no GitHub e, em seguida, siga as instruções para autorizar sua conta.

    Se você não vir o prompt, tente reiniciar VS Code.

Se você precisar voltar para uma conta no GitHub.com, restaure a configuração Github > Codespaces: Auth Provider ao seu valor padrão e remova a configuração Github-enterprise: Uri.

Criando um codespace em VS Code

Você poderá criar um codespace após conectar sua conta no GitHub à extensão do GitHub Codespaces. Para obter mais informações sobre a extensão GitHub Codespaces, veja o VS Code Marketplace.

  1. No VS Code, na barra de Atividades, clique no ícone do Gerenciador Remoto.

    Captura de tela da Barra de Atividades. O ícone da barra lateral do "Gerenciador Remoto" (um retângulo sobreposto por um círculo) está realçado com um contorno laranja.

    Observação

    Se o Remote Explorer não for exibido na barra Activity:

    1. Abra a paleta de comandos. Por exemplo, pressionando Shift+Command+P (no Mac) / Ctrl+Shift+P (no Windows/Linux).
    2. Digite: details.
    3. Clique em Codespaces: detalhes.
  2. Passe o mouse sobre a barra lateral do "Gerenciador Remoto" e clique em .

    Captura de tela da barra lateral do "Gerenciador Remoto" para GitHub Codespaces. A dica de ferramenta "Criar Novo Codespace" é exibida ao lado do botão de sinal de adição.

  3. Na caixa de texto, digite o nome do repositório no qual você deseja desenvolver e selecione-o.

    Captura de tela de "octo-org/he" inserida na caixa de texto e uma lista de quatro repositórios que começam com essa cadeia de caracteres.

    Uma mensagem é exibida no lado direito dos prompts subsequentes informando quem pagará pelo codespace.

    Captura de tela de um prompt para um branch, com a mensagem "Uso pago pelo hubwriter".

  4. Clique no branch que você deseja desenvolver.

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

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

    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 saber mais, confira Restringindo o acesso aos tipos de máquina e Definindo uma especificação mínima para máquinas de codespaces.

Abrindo um codespace no VS Code

  1. No VS Code, na barra de Atividades, clique no ícone do Gerenciador Remoto.

    Captura de tela da Barra de Atividades. O ícone da barra lateral do "Gerenciador Remoto" (um retângulo sobreposto por um círculo) está realçado com um contorno laranja.

    Observação

    Se o Remote Explorer não for exibido na barra Activity:

    1. Abra a paleta de comandos. Por exemplo, pressionando Shift+Command+P (no Mac) / Ctrl+Shift+P (no Windows/Linux).
    2. Digite: details.
    3. Clique em Codespaces: detalhes.
  2. Em "GitHub Codespaces", passe o mouse sobre o codespace no qual você deseja desenvolver.

  3. Clique no ícone de conexão (um símbolo de plugue).

    Captura de tela da barra lateral "Gerenciador Remoto". O ícone de conexão de um codespace (um símbolo de plugue) é realçado com um contorno laranja escuro.

Alterando o tipo de computador em 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 [AUTOTITLE](/billing/managing-billing-for-your-products/managing-billing-for-github-codespaces/about-billing-for-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 saber mais, confira Restringindo o acesso aos tipos de máquina e Definindo uma especificação mínima para máquinas de codespaces.

  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."

    Captura de tela de "alterar máquina" inserido como uma cadeia de caracteres de pesquisa e "Codespaces: Alterar tipo de máquina" na lista suspensa.

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

    Captura de tela de uma lista suspensa de quatro 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 32 GB para 64 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 saber mais sobre como reiniciar um codespace, confira Parar e iniciar um codespace.

Excluindo um codespace em VS Code

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

  1. No VS Code, na barra de Atividades, clique no ícone do Gerenciador Remoto.

    Captura de tela da Barra de Atividades. O ícone da barra lateral do "Gerenciador Remoto" (um retângulo sobreposto por um círculo) está realçado com um contorno laranja.

    Observação

    Se o Remote Explorer não for exibido na barra Activity:

    1. Abra a paleta de comandos. Por exemplo, pressionando Shift+Command+P (no Mac) / Ctrl+Shift+P (no Windows/Linux).
    2. Digite: details.
    3. Clique em Codespaces: detalhes.
  2. Em "GitHub Codespaces", clique com o botão direito do mouse no codespace que você deseja excluir.

  3. Clique em Excluir Codespace.

Alternar para VS Code Participantes do Programa Insider no cliente Web

Se você estiver usando o VS Code cliente web, poderá alternar para a versão Insiders do aplicativo. Para obter mais informações sobre essa versão do VS Code, consulte Introdução ao Build do Insiders no blog VS Code.

Depois de alternar versões em um codespace, o cliente web continuará a usar a versão Insiders se você parar e reiniciar o codespace. Novos codespaces que você criar e abrir no VS Code cliente Web também usarão a versão do Insiders.

  1. No canto inferior esquerdo da janela do navegador que está exibindo um espaço de código, clique em .

  2. No menu, selecione "Alternar para Versão Insiders".

    Captura de tela do cliente Web VS Code. Um ícone de engrenagem é realçado com um contorno laranja. "Alternar para a Versão Insiders" é mostrado no menu.

  3. Clique em Recarregar.

Para alternar de volta para a versão estável de VS Code, repita o processo, mas escolha Alternar para Versão Estável. Depois que você alternar novamente, o codespace continuará a usar a versão Stable se você parar e reiniciar o codespace. Novos codespaces criados e abertos no VS Code cliente web também usarão a versão estável.

Usando o aplicativo desktop do Insiders para Codespaces

Para usar o GitHub Codespaces na versão Insiders do aplicativo de área de trabalho VS Code, inicie ou crie seus codespaces de dentro do aplicativo Insiders VS Code. Para obter mais informações, consulte Criação de um codespace em VS Code e Abertura de um codespace em VS Code anteriormente neste artigo.

Leitura adicional

  •         [AUTOTITLE](/codespaces/reference/using-the-vs-code-command-palette-in-codespaces)
    
  •         [AUTOTITLE](/codespaces/reference/using-github-copilot-in-github-codespaces)