Guia Rápido para GitHub Codespaces - Documentos do GitHub

Guia Rápido para GitHub Codespaces

Comece a usar GitHub Codespaces rapidamente.

Neste artigo

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 no navegador de Visual Studio Code, que é inicialmente o editor padrão de GitHub Codespaces. Depois de experimentar este início rápido, você pode usar Codespaces em outros editores e pode 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 exatamente como GitHub Codespaces funciona, consulte o guia complementar AUTOTITLE.

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 Ports em VS Code, passe o mouse sobre o valor Local Address da porta em execução e clique no ícone Open in Browser.

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 adicionar suas alterações à área de preparação, clique em , ao lado do arquivo haikus.json, ou ao lado de Alterações, se você tiver alterado vários arquivos e quiser adicionar todos à área de preparação.

    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". A mensagem de confirmação, "Alterar texto e estilos do haiku", e o botão "Confirmar" estão destacados em 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 GitHub no repositório privado ou Publicar no GitHub repositório público.

    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.

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

  6. No pop-up exibido no canto inferior direito do editor, clique em GitHubAbrir para exibir o novo repositório.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 a um codespace usando o navegador ou o aplicativo da Visual Studio Code área de trabalho, você pode acessar o Visual Studio Code Marketplace diretamente do editor. Para este exemplo, você instalará uma VS Code extensão que altera o tema, mas pode instalar qualquer extensão ú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 "Extensões: Marketplace". A caixa de pesquisa mostra "fairyfloss". Os resultados mostram a extensão "fairyfloss" 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 de 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, consulte Personalizando 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! Aqui estão alguns recursos úteis para executar suas próximas etapas com GitHub Codespaces.

Leitura adicional