Skip to main content

Desenvolver em um codespace

Observação

O Codespaces não está disponível em subdomínios do GHE.com, como octocorp.ghe.com.

Você pode desenvolver código em um codespace usando a ferramenta de sua preferência:

  • Um shell de comando, por meio de uma conexão SSH iniciada usando CLI
  • O aplicativo da área de trabalho Visual Studio Code
  • Uma versão baseada em navegador do Visual Studio Code

As guias neste artigo permitem alternar entre informações para cada uma dessas maneiras de trabalhar. No momento, você está na guia da versão do navegador da Web do Visual Studio Code.

O uso de Codespaces no navegador fornece uma experiência de desenvolvimento completa. Você pode editar código, depurar, usar comandos Git e executar seu aplicativo.

Captura de tela anotada dos cinco componentes principais da interface do usuário: barra lateral, barra de atividades, editor, painéis, barra de status.

Os componentes principais da interface do usuário são:

  1. Barra lateral - Por padrão, esta área mostra os arquivos do seu projeto no Explorador.
  2. Barra de atividades – Mostra as Exibições e oferece um modo de alternar entre elas. Você pode reordenar as Visualizações arrastando e soltando-as.
  3. Editor – É aqui que você edita os arquivos. Você pode clicar com o botão direito do mouse na guia de um arquivo para acessar opções, como o modo de localizar o arquivo no Gerenciador.
  4. Painéis – Aqui você encontra informações de saída e depuração, bem como o local padrão do terminal integrado.
  5. Barra de status – Esta área fornece informações úteis sobre o codespace e o projeto. Por exemplo, o nome da agência, portas configuradas e muito mais. Para a melhor experiência com Codespaces, recomendamos o uso de um navegador baseado no Chromium, como o Google Chrome ou a Microsoft Edge. Para obter mais informações, confira Solução de problemas dos clientes dos Codespaces.

Você pode personalizar os codespaces criados para um repositório criando ou atualizando a configuração do contêiner de desenvolvimento do repositório. Você pode fazer isso de dentro de um codespace. Depois de alterar a configuração do contêiner de desenvolvimento, você pode aplicar as alterações ao codespace atual recriando o contêiner do Docker para o codespace. Para saber mais, confira Introdução aos contêineres de desenvolvimento.

Use um repositório dotfiles e a Sincronização de Configurações para personalizar os aspectos do ambiente de qualquer codespace criado. A personalização pode incluir preferências de shell e ferramentas adicionais. Para saber mais, confira Como personalizar o Codespaces para sua conta.

Você pode encaminhar portas no seu código para testar e depurar seu aplicativo. Você também pode gerenciar o protocolo de porta e compartilhar a porta em sua organização ou de modo público. Para saber mais, confira Encaminhar portas no seu código.

Quando fizer alterações em seu código, tanto código novo quanto de configuração, você deverá fazer commit delas. O commit das alterações de configuração no repositório garante que qualquer pessoa que crie um codespace desse repositório tenha a mesma configuração. Qualquer personalização que você fizer, como adicionar extensões do VS Code, ficará disponível para todos os usuários.

Para este tutorial, você criou um codespace com base em um repositório de modelos, de modo que o código em seu codespace ainda não seja armazenado em um repositório. Você pode criar um repositório publicando o branch atual no .

Para obter mais informações, confira Usando controle de origem no seu codespace.

A Visual Studio Code Command Palette permite que você acesse e gerencie vários recursos dos Codespaces e do Visual Studio Code. Para saber mais, confira Uso da paleta de comandos do Visual Studio Code no Codespaces.

  1. Você poderá ver todos os codespaces disponíveis que criou na página "Seus codespaces". Para exibir essa página, no canto superior esquerdo do , selecione e clique em Codespaces. Isso leva você para .com/codespaces.

  2. Clique no nome do codespace em que você deseja desenvolver.

    Captura de tela de uma lista de três codespaces na página https://github.com/codespaces.

Como alternativa, você pode ver qualquer um dos codespaces de um repositório específico navegando até esse repositório, clicando no botão Código e selecionando a guia Codespaces. O menu suspenso exibirá todos os codespaces ativos do repositório.

As guias neste artigo permitem alternar entre informações para cada uma dessas maneiras de trabalhar. No momento, você está na guia para Visual Studio Code.

Os Codespaces oferecem a experiência completa de desenvolvimento do Visual Studio Code. Você pode editar código, depurar e usar comandos do Git ao mesmo tempo que faz o desenvolvimento em um codespace com VS Code. Para obter mais informações, confira a documentação do VS Code.

Captura de tela anotada dos cinco componentes principais da interface do usuário: barra lateral, barra de atividades, editor, painéis, barra de status.

Os componentes principais da interface do usuário são:

  1. Barra lateral - Por padrão, esta área mostra os arquivos do seu projeto no Explorador.
  2. Barra de atividades – Mostra as Exibições e oferece um modo de alternar entre elas. Você pode reordenar as Visualizações arrastando e soltando-as.
  3. Editor – É aqui que você edita os arquivos. Você pode clicar com o botão direito do mouse na guia de um arquivo para acessar opções, como o modo de localizar o arquivo no Gerenciador.
  4. Painéis – Aqui você encontra informações de saída e depuração, bem como o local padrão do terminal integrado.
  5. Barra de status – Esta área fornece informações úteis sobre o codespace e o projeto. Por exemplo, o nome da agência, portas configuradas e muito mais.

Para obter mais informações sobre como usar o VS Code, consulte o guia da Interface do Usuário na documentação do VS Code.

Você pode se conectar ao seu codespace diretamente do VS Code. Para saber mais, confira Como usar o Codespaces no Visual Studio Code.

Para obter informações sobre solução de problemas, confira Solução de problemas dos clientes dos Codespaces.

Você pode personalizar os codespaces criados para um repositório criando ou atualizando a configuração do contêiner de desenvolvimento do repositório. Você pode fazer isso de dentro de um codespace. Depois de alterar a configuração do contêiner de desenvolvimento, você pode aplicar as alterações ao codespace atual recriando o contêiner do Docker para o codespace. Para saber mais, confira Introdução aos contêineres de desenvolvimento.

Use um repositório dotfiles e a Sincronização de Configurações para personalizar os aspectos do ambiente de qualquer codespace criado. A personalização pode incluir preferências de shell e ferramentas adicionais. Para saber mais, confira Como personalizar o Codespaces para sua conta.

Você pode encaminhar portas no seu código para testar e depurar seu aplicativo. Você também pode gerenciar o protocolo de porta e compartilhar a porta em sua organização ou de modo público. Para saber mais, confira Encaminhar portas no seu código.

Quando fizer alterações em seu código, tanto código novo quanto de configuração, você deverá fazer commit delas. O commit das alterações de configuração no repositório garante que qualquer pessoa que crie um codespace desse repositório tenha a mesma configuração. Qualquer personalização que você fizer, como adicionar extensões do VS Code, ficará disponível para todos os usuários.

Para este tutorial, você criou um codespace com base em um repositório de modelos, de modo que o código em seu codespace ainda não seja armazenado em um repositório. Você pode criar um repositório publicando o branch atual no .

Para obter mais informações, confira Usando controle de origem no seu codespace.

A Visual Studio Code Command Palette permite que você acesse e gerencie vários recursos dos Codespaces e do Visual Studio Code. Para saber mais, confira Uso da paleta de comandos do Visual Studio Code no Codespaces.

  1. Você poderá ver todos os codespaces disponíveis que criou na página "Seus codespaces". Para exibir essa página, no canto superior esquerdo do , selecione e clique em Codespaces. Isso leva você para .com/codespaces.

  2. Clique no nome do codespace em que você deseja desenvolver.

    Captura de tela de uma lista de três codespaces na página https://github.com/codespaces.

Como alternativa, você pode ver qualquer um dos codespaces de um repositório específico navegando até esse repositório, clicando no botão Código e selecionando a guia Codespaces. O menu suspenso exibirá todos os codespaces ativos do repositório.

As guias neste artigo permitem alternar entre informações para cada uma dessas maneiras de trabalhar. No momento, você está na guia para CLI.

Observação

Para saber mais sobre CLI, confira Sobre o a CLI do .

Você pode usar CLI para criar um novo codespace ou iniciar um codespace existente e, em seguida, conectar-se a ele por SSH. Uma vez conectado, você pode trabalhar na linha de comando usando suas ferramentas de linha de comando preferidas.

Depois de instalar o CLI e autenticar com sua conta do , você pode usar o comando gh codespace [<SUBCOMMAND>...] --help para procurar as informações de ajuda. Como alternativa, você pode exibir as mesmas informações de referência em https://cli..com/manual/gh_codespace.

Para saber mais, confira Como usar o Codespaces com a CLI do .