Desenvolver em um codespace

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.

Como trabalhar em um codespace no VS Code

Os GitHub 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.

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 GitHub Codespaces no Visual Studio Code.

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

Como personalizar os codespaces de um repositório

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.

Personalizando seu codespace

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 GitHub Codespaces para sua conta.

Executando seu aplicativo a partir de um codespace

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.

Fazendo commit das suas alterações

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

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

Usando o Visual Studio Code Command Palette

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 GitHub Codespaces.

Acessar um codespace existente

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 GitHub, selecione e clique em Codespaces. Isso leva você para github.com/codespaces.

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

   

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.