Gerenciar repositórios do GitHub para desenvolvimento em JavaScript no Visual Studio Code

O Visual Studio Code fornece integração abrangente do Git e do GitHub para desenvolvedores JavaScript. Este guia mostra como gerenciar repositórios do GitHub diretamente do seu ambiente de desenvolvimento, simplificando seu fluxo de trabalho da criação de código para a implantação.

Você aprenderá a abrir repositórios existentes, inicializar novos projetos, criar branches de recursos, confirmar alterações e enviar por push para o GitHub , tudo isso sem sair do VS Code. O guia aborda várias abordagens para cada tarefa, incluindo a barra de atividades, a paleta de comandos, a barra de status e o terminal integrado, para que você possa escolher os métodos que funcionam melhor para seu estilo de desenvolvimento.

Pré-requisitos

• Git instalado em seu computador local
• Visual Studio Código instalado
• Uma conta do GitHub

Abra seu repositório remoto

Abra o repositório remoto no computador local.

Barra de atividades

1. Instalar a extensão do repositório remoto
2. Selecione o indicador remoto no canto inferior esquerdo do Visual Studio Code.
3. Siga os prompts.

Barra de status

Essa ação não está disponível nesse recurso. Selecione uma guia diferente.

Paleta de comandos

1. Abra a paleta de comandos com a combinação de teclas de Ctrl + +
2. No prompt da paleta de comandos, insira gitcl, selecione o comando Git: Clone , selecione Clonar do GitHub e pressione Enter.
3. Quando for solicitada a URL do Repositório, selecione Clonar do GitHub e pressione Enter.
4. Se você for solicitado a entrar no GitHub, conclua o processo de entrada.
5. Insira azure-samples/js-e2e-express-server no campo URL do Repositório.
6. Selecione (ou crie) o diretório local no qual você deseja clonar o projeto e selecione Selecionar como destino do repositório.
7. Quando você receber a notificação perguntando se você deseja abrir o repositório clonado, selecione Abrir.

Terminal integrado

1. Abra um terminal integrado em Terminal -> Novo terminal.

2. Clone seu repositório com o seguinte comando git:

   git clone https://github.com/<ACCOUNT>/<REPOSITORY>
   

3. Abra no Visual Studio Code:

   code <REPOSITORY>
   

O Visual Studio Code usa a autenticação Git fornecida pelo sistema operacional (como o macOS KeyChain ou o gerenciador de credenciais do Windows) com qualquer funcionalidade do Git. A saída é visível no Git da Paleta de Comandos > : Mostrar Saída do Git.

Conectar-se a domínios personalizados do GitHub

Por padrão, o Visual Studio Code pressupõe que seus repositórios estejam hospedados em github.com. Se você precisar se conectar a um repositório em um domínio diferente (por exemplo, um GitHub corporativo como github.<company_name>.com), será necessário configurar o caminho do Git adequadamente.

Para atualizar o caminho do Git no VS Code, abra As Preferências → de Arquivo → Configurações e pesquise Git: Path. Essa configuração permite que você especifique o caminho absoluto para o executável Git que funciona com seu domínio personalizado do GitHub.

Como alternativa, você pode adicionar ou atualizar a git.path configuração diretamente em seu settings.json arquivo para garantir que o VS Code use o binário Git correto para todas as operações de repositório.

Abra seu repositório local

Se você tiver um repositório existente em seu computador local e quiser abri-lo no Visual Studio Code, basta abrir a pasta. O Visual Studio Code reconhece a .git subpasta e exibe as informações relevantes.

Barra de atividades

1. Selecione Ctrl + +
2. Selecione a pasta .

Barra de status

Essa ação não está disponível nesse recurso. Selecione uma guia diferente.

Paleta de comandos

1. Abra a paleta de comandos com a combinação de teclas de Ctrl + +
2. Filtre com Gite selecione Open repository.
3. Selecione a pasta a ser selecionada como a raiz do repositório.

Terminal integrado

1. Abra um terminal integrado em Terminal -> Novo terminal.

2. Abra uma nova instância do Visual Studio Code para o diretório do repositório:

   code ../dir1/dir2/my-repo
   

Inicializar novo repositório

Use o procedimento a seguir para criar um repositório de código-fonte local com gito .

Barra de atividades

1. Selecione o controle do código-fonte na barra de atividades ou use a combinação de teclas de Ctrl + +

2. Selecione Inicializar repositório.

   

Barra de status

Essa ação não está disponível nesse recurso. Selecione uma guia diferente.

Paleta de comandos

1. Abra a paleta de comandos com a combinação de teclas de Ctrl + +
2. Filtre com Gite selecione Initialize repository.
3. Selecione a pasta a ser selecionada como a raiz do repositório.

Terminal integrado

1. Abra um terminal integrado em Terminal -> Novo terminal.

2. Inicialize sua pasta com git com o seguinte comando git:

   git init
   

Depois que o repositório for inicializado, crie o repositório no GitHub. Em seguida, adicione esse repositório como um repositório remoto ao seu projeto local na Paleta de comandos: procure por Git: Add remote.

Criar um branch para alterações

Crie um novo branch para capturar alterações e isolar do branch principal ou padrão.

Barra de atividades

1. Selecione o controle do código-fonte na barra de atividades.
2. Selecione reticências (...) ao lado de Controle do Código-Fonte.
3. Selecione Ramificação ->Criar Ramificação.

Barra de status

1. Selecione o nome do branch na barra de status. Isso abre a paleta de comandos.

   A barra de status é encontrada na parte inferior do Visual Studio Code.

2. Na paleta de comandos, selecione + Criar um branch.

3. Insira o nome do novo branch.

4. Insira um nome para o novo branch. O nome do branch fica visível na barra de status.

   

Paleta de comandos

1. Abra a paleta de comandos com a combinação de teclas de Ctrl + +

2. Pesquise git branch e selecione Git: Create Branch.

   

3. Insira um novo nome de ramificação, como test.

4. O nome do branch fica visível na barra de status.

   

Terminal integrado

1. Abra um terminal integrado em Terminal -> Novo terminal.

2. Crie um novo branch nomeado MY-BRANCH com o seguinte comando git:

   git checkout -b MY-BRANCH
   

Confirmar alterações localmente

Depois de fazer alterações nos arquivos em seu branch, confirme as alterações.

Barra de atividades

1. Selecione o controle do código-fonte na barra de atividades.

2. Insira sua mensagem de confirmação e selecione Confirmar.

   

Barra de status

Essa ação não está disponível nesse recurso. Selecione uma guia diferente.

Paleta de comandos

1. Abra a paleta de comandos com a combinação de teclas de Ctrl + +
2. Na paleta de comandos, filtre com Git e selecione Commit.
3. Digite sua mensagem de confirmação e pressione Enter.

Terminal integrado

1. Abra um terminal integrado em Terminal -> Novo terminal.

2. Crie um novo branch nomeado MY-BRANCH com o seguinte comando git:

   git commit -m "YOUR COMMIT MESSAGE"
   

Enviar um branch local para o GitHub

Barra de atividades

1. Selecione o ícone Controle do Código-Fonte na barra de atividade.
2. Selecione Publicar Ramificação. Se o repositório não existir no GitHub, ele criará o repositório para você.

Barra de status

1. Na barra de status do Visual Studio Code, selecione o ícone de push à direita do nome do branch.

   

2. Selecione o nome do repositório remoto na caixa pop-up. Se você tiver apenas um repositório remoto, não será solicitado a selecionar o nome dele.

Paleta de comandos

1. Abra a paleta de comandos com a combinação de teclas de Ctrl + +
2. Na paleta de comandos, filtre com Git e selecione Push.
3. Se você tiver vários controles remotos upstream, selecione um nome remoto e pressione Enter.

Terminal integrado

1. Abra um terminal integrado em Terminal -> Novo terminal.

2. Crie um novo branch nomeado MY-BRANCH com o seguinte comando git:

   git push <remote-name> <branch-name>
   

Exibir saída do Git

Você pode exibir a saída de comandos do Git ao usar a extensão de controle de origem. Essa saída ajuda a depurar quando um comando falha.

1. Selecione o ícone Controle do Código-Fonte na barra de atividade.

2. Selecione as reticências (...) e Mostrar Saída do Git.

   

Ferramentas do Visual Studio Code para trabalhar com Git e GitHub

O trabalho no Visual Studio Code com um repositório usa ferramentas separadas.

Ícone	Informações	Acesso de
	Comandos Git na paleta de comandos	F1
	Extensão de controle do código-fonte	Barra de atividades
	Extensão de Solicitações de pull e Problemas do GitHub	Barra de atividades
	Extensão de Repositórios do GitHub	Você pode abrir um repositório do GitHub de maneira rápida e fácil pesquisando Repositórios GitHub: Abrir Repositório... na Paleta de comandos, F1 ou escolhendo Abrir Repositório GitHub... no indicador remoto (o botão verde no canto inferior esquerdo da barra de status).

Recursos relacionados

• Como implantar um aplicativo Web
• Trabalhar com o GitHub no Visual Studio Code
• Usar o Visual Studio Code com outros provedores de controle de versão