Início rápido para codespaces

Introdução

Neste guia, você irá criar um codespace a partir de um repositório modelo e explorar algumas das funcionalidades essenciais disponíveis para você dentro do codespace.

Neste início rápido, você aprenderá a criar um codespace, conectar-se a uma porta encaminhada para ver seu aplicativo em execução, usar o controle de versões em um codespace e personalizar a sua configuração com extensões.

Para obter mais informações sobre exatamente como Codespaces funciona, consulte o guia "Aprofundamento em Codespaces."

Criando seu codespace

Acesse o rrepositório do modelo e selecione Usar este modelo.
Nomeie seu repositório, selecione sua configuração de privacidade preferida e clique em Criar repositório a partir do modelo.
Acesse a página principal do repositório recém-criado. No nome do repositório, use o menu suspenso Código de e na guia Codespaces, clique em Criar codespace no principal.

Executando o aplicativo

Uma vez criado o seu codespace, seu repositório será automaticamente clonado. Agora você pode executar o aplicativo e iniciá-lo em um navegador.

Como esse exemplo usa um projeto Node.js, inicie o aplicativo digitando npm run dev no terminal. Este comando executa o script dev no arquivo package.json e inicia o aplicativo web definido no repositório de exemplo.

Se você estiver acompanhando com um tipo diferente de aplicativo, digite o comando inicial correspondente para esse projeto.
Quando o aplicativo for iniciado, o codespace irá reconhecer a porta na qual o aplicativo está sendo executado e irá exibir uma instrução para informar que ele foi encaminhado.
Clique em Abrir no navegador para visualizar seu aplicativo em execução em uma nova aba.

Edite o aplicativo e veja as alterações

Volte para o seu codespace e abra o arquivo haikus.json clicando duas vezes no botão no Explorador de Arquivos.
Edite o campo de do primeiro haiku para personalizar o aplicativo com o seu próprio haiku.
Volte à aba do aplicativo em execução no seu navegador e atualize para visualizar as suas alterações.

Se você fechou a aba, abra o painel de portas e clique no ícone Abrir no navegador para a porta em execução.

Enviando e fazendo push das suas alterações

Agora que você fez algumas alterações, você poderá usar o terminal integrado ou a visão de origem para commit e fazer push das alterações de volta para remoto.

Na barra de atividade, clique na vista Controle de Origem.
Para testar suas alterações, clique + ao lado do arquivo que você alterou, ou ao lado de Alterações se você mudou vários arquivos e quiser testar todos.
Digite uma mensagem do commit que descreve a alteração que você fez.
Para fazer commit das alterações em fase de preparação, clique na marca de seleção na parte superior da barra lateral de controle de origem.
Você pode fazer push das alterações realizadas. Isso aplica essas alterações ao branch upstream no repositório remoto. Você pode querer fazer isso se ainda não estiver pronto para criar um pull request, ou se você preferir criar um pull request em GitHub.
Na parte superior da barra lateral, clique na elipse (...).
No menu suspenso, clique em Push.

Personalizando com uma extensão

Dentro de um codespace, você tem acesso ao Marketplace do Visual Studio Code. Para este exemplo, você instalará uma extensão que altera o tema, mas você pode instalar qualquer extensão que seja útil para o seu fluxo de trabalho.

Na barra lateral esquerda, clique no ícone Extensões.
Na barra de pesquisa, digite fairyfloss e instale a extensão fairyfloss.
Selecione o tema fairyfloss selecionando-o na lista.
As alterações feitas na configuração do seu ditor editor no codespace atual, como ligações de tema e teclado, são sincronizadas automaticamente por meio da Sincronização das Configurações para qualquer outro codespace que você abrir e quaisquer instâncias do Visual Studio Code que estiverem conectadas à sua conta do GitHub.

Próximos passos

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 dar seus próximos passos com Codespaces.

Aprofundamento: Este início rápido apresentou algumas das funcionalidades de Codespaces. O guia de aprofundamento analisa estas áreas a partir de um ponto de vista técnico.
Configurando seu projeto para Codespaces: Estes guias fornecem informações sobre a configuração do seu projeto para usar Codespaces com linguagens específicas.
Configurar Codespaces para o seu projeto: Este guia fornece informações sobre a criação de uma configuração personalizada para Codespaces para o seu projeto.