Skip to main content

Guia de início rápido do GitHub Codespaces

Experimente o GitHub Codespaces em 5 minutos.

Note

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

Introdução

Neste guia, você vai criar um codespace por meio de um repositório de modelos e explorar alguns dos recursos essenciais disponíveis no codespace. Você trabalhará na versão do navegador do Visual Studio Code, que inicialmente é o editor padrão do GitHub Codespaces. Depois de experimentar este guia de início rápido, você poderá usar os Codespaces em outros editores e alterar o editor padrão. Os links são fornecidos no final deste guia.

Neste guia de início rápido, você aprenderá a criar um codespace, se conectar a uma porta encaminhada para ver o aplicativo em execução, publicar o codespace em um novo repositório e personalizar a configuração com extensões.

Para obter mais informações sobre como o GitHub Codespaces funciona exatamente, confira o guia complementar "Aprofundamento de GitHub Codespaces".

Criando seu codespace

  1. Navegue até o repositório de modelos github/haikus-for-codespaces.

  2. Clique em Usar este modelo e, em seguida, em Abrir em um codespace.

    Captura de tela do botão "Usar este modelo" e do menu suspenso expandido para mostrar a opção "Abrir em um codespace".

Executando o aplicativo

Após a criação do codespace, o repositório de modelos será clonado nele automaticamente. Agora você pode executar o aplicativo e iniciá-lo em um navegador.

  1. Quando o terminal ficar disponível, insira o comando npm run dev. Esse exemplo usa um projeto Node.js e esse comando executa o script rotulado como "dev" no arquivo package.json, que inicia o aplicativo Web definido no repositório de exemplo.

    Captura de tela do Terminal no VS Code com o comando "npm run dev" inserido.

    Se você estiver acompanhando com um tipo diferente de aplicativo, digite o comando inicial correspondente para esse projeto.

  2. Quando o aplicativo for iniciado, o codespace reconhecerá a porta em que o aplicativo está sendo executado e exibirá uma mensagem pop-up informando que a porta foi encaminhada.

    Captura de tela da mensagem pop-up: "seu aplicativo em execução na porta 3000 está disponível". Abaixo está um botão verde, rotulado como "Abrir no Navegador".

  3. Clique em Abrir no Navegador para ver seu aplicativo em execução em uma nova guia.

Edite o aplicativo e veja as alterações

  1. Volte ao codespace e abra o arquivo haikus.json clicando duas vezes nele no Gerenciador.

  2. Edite o campo text do primeiro haiku para personalizar o aplicativo com seu haiku.

  3. Volte à aba do aplicativo em execução no seu navegador e atualize para visualizar as suas alterações.

    Se você fechou a guia do navegador, clique na guia Portas em VS Code, passe o mouse sobre o valor Endereço local da porta em execução e clique no ícone Abrir no Navegador.

    Captura de tela do painel "Portas". A guia "Portas" e um ícone de globo, que abre a porta encaminhada em um navegador, são realçados com contornos laranjas.

Enviando e fazendo push das suas alterações

Agora que você fez algumas alterações, use o terminal integrado ou a exibição de origem para publicar o trabalho em um novo repositório.

  1. Na Barra de Atividades, clique na exibição Controle do Código-Fonte.

    Captura de tela da Barra de Atividades do VS Code com o botão Controle do Código-Fonte realçado com um contorno laranja.

  2. Para preparar as alterações, clique em ao lado do arquivo haikus.json que você alterou ou ao lado de Alterações se tiver alterado vários arquivos e quiser preparar todos eles.

    Captura de tela da barra lateral "Controle do código-fonte" com o botão de preparo (um sinal de adição), à direita de "Alterações", realçada com um contorno laranja escuro.

  3. Para fazer commit das alterações preparadas, digite uma mensagem de commit descrevendo a alteração que você fez e clique em Fazer commit.

    Captura de tela da barra lateral "Controle do código-fonte". Uma mensagem de confirmação, com "Alterar texto e estilos haiku" inserido, e o botão "Confirmar" realçados com um contorno laranja.

  4. Clique em Publicar Branch.

    Captura de tela da barra lateral "Controle do código-fonte" mostrando o botão "Publicar Branch".

  5. Na lista suspensa "Nome do Repositório", digite um nome para o novo repositório e selecione Publicar no repositório privado do GitHub ou Publicar no repositório público do GitHub .

    Captura de tela do menu suspenso do nome do repositório no VS Code. Duas opções são mostradas, para publicação em um repositório público ou privado.

    O proprietário do novo repositório será a conta do GitHub com a qual você criou o codespace.

  6. No item pop-up exibido no canto inferior direito do editor, clique em Abrir no GitHub para ver o novo repositório no GitHub. No novo repositório, veja o arquivo haikus.json e verifique se a alteração feita no codespace foi enviada com êxito para o repositório.

    Captura de tela de uma mensagem de confirmação para um repositório publicado com êxito, mostrando o botão "Abrir no GitHub".

Personalizando com uma extensão

Ao se conectar com um codespace usando o navegador ou o aplicativo da área de trabalho do Visual Studio Code, você pode acessar o Visual Studio Code Marketplace diretamente no editor. Neste exemplo, você instalará uma extensão do VS Code que altera o tema, mas você pode instalar qualquer extensão que seja útil para seu fluxo de trabalho.

  1. Na Barra de Atividades, clique no ícone Extensões.

    Captura de tela da Barra de Atividades. O ícone Extensões está realçado com um contorno laranja.

  2. Na barra de pesquisa, digite fairyfloss e clique em Instalar.

    Captura de tela da barra lateral "Extensões: Marketplace". "fairyfloss" é inserido na caixa de pesquisa e, abaixo dela, a extensão "fairyfloss" é exibida, com um botão "Instalar".

  3. Selecione o tema fairyfloss escolhendo-o na lista.

    Captura de tela da lista suspensa "Selecionar Tema de Cor", com o tema "fairyfloss" selecionado.

Sobre a Sincronização de Configurações

Você pode habilitar a Sincronização de Configurações para sincronizar extensões e outras configurações entre dispositivos e instâncias do VS Code. Suas configurações sincronizadas são armazenadas em cache na nuvem. Se a Sincronização de Configurações estiver ativada em um codespace, todas as atualizações que você fizer em suas configurações no codespace serão enviadas por push para a nuvem e todas as atualizações enviadas por push para a nuvem de outro lugar serão extraídas para o seu codespace. Para obter mais informações, confira "Como personalizar o GitHub Codespaces para sua conta".

Próximas etapas

Você criou com sucesso, personalizou e executou seu primeiro aplicativo em um codespace, mas há muito mais para explorar! Veja alguns recursos úteis para aprimorar o uso dos GitHub Codespaces.

Leitura adicional