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

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

Você aprenderá a abrir repositórios existentes, inicializar novos projetos, criar ramificações de recursos, confirmar alterações e enviar por push para o GitHub, tudo sem sair do VS Code. O guia abrange 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 o seu estilo de desenvolvimento.

Pré-requisitos

• Git instalado na sua máquina local
• Visual Studio Código instalado
• Uma conta do GitHub

Abra o repositório remoto

Abra o repositório remoto no computador local.

Barra de atividades

1. Instalar a extensão de repositório remoto
2. Selecione o indicador remoto no canto inferior esquerdo do Visual Studio Code.
3. Siga as instruções.

Barra de status

Esta ação não está disponível a partir desta funcionalidade. Selecione uma guia diferente.

Paleta de comandos

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

Terminal integrado

1. Abra um terminal integrado a partir do Terminal -> Novo Terminal.

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

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

3. Abrir no Visual Studio Code:

   code <REPOSITORY>
   

O Visual Studio Code usa a autenticação Git fornecida pelo sistema operacional (como macOS KeyChain ou Windows Credential Manager) com qualquer funcionalidade git. A saída é visível em Command Palette > Git: Show Git Output.

Conectar-se a domínios personalizados do GitHub

Por padrão, o Visual Studio Code assume que seus repositórios estão hospedados em github.com. Se você precisar se conectar a um repositório em um domínio diferente (por exemplo, um GitHub corporativo como o github.<company_name>.com), precisará configurar seu caminho do Git de acordo.

Para atualizar o caminho do Git no VS Code, abra Ficheiro → Preferências → Definições e procure por Git: Path. Essa configuração permite especificar o caminho absoluto para o executável do Git que funciona com seu domínio personalizado do GitHub.

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

Abra o 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 subpasta .git e exibe as informações relevantes.

Barra de atividades

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

Barra de status

Esta ação não está disponível a partir desta funcionalidade. Selecione uma guia diferente.

Paleta de comandos

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

Terminal integrado

1. Abra um terminal integrado a partir do 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 git.

Barra de atividades

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

2. Selecione Inicializar repositório.

   

Barra de status

Esta ação não está disponível a partir desta funcionalidade. Selecione uma guia diferente.

Paleta de comandos

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

Terminal integrado

1. Abra um terminal integrado a partir do Terminal -> Novo Terminal.

2. Inicialize sua pasta com o 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 remoto ao seu projeto local a partir da paleta de comandos: procure Git: Add remote.

Criar uma ramificação para alterações

Crie uma nova ramificação para capturar alterações e isolar da ramificação principal ou padrão.

Barra de atividades

1. Selecione o controle do código-fonte na barra de atividades.
2. Selecione as reticências (...) ao lado de Controlo de Código-fonte.
3. Selecione Branch ->Create Branch.

Barra de status

1. Selecione o nome da filial 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 uma nova ramificação.

3. Insira o nome da nova filial.

4. Insira um novo nome de filial. O nome da ramificação é visível na barra de status.

   

Paleta de comandos

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

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

   

3. Insira um novo nome de filial, como test.

4. O nome da ramificação é visível na barra de status.

   

Terminal integrado

1. Abra um terminal integrado a partir do Terminal -> Novo Terminal.

2. Crie uma nova ramificação nomeada MY-BRANCH com o seguinte comando git:

   git checkout -b MY-BRANCH
   

Efetuar alterações localmente

Depois de fazer alterações nos arquivos em sua ramificação, confirme as alterações.

Barra de atividades

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

2. Introduza a sua mensagem de confirmação e, em seguida, selecione Confirmar.

   

Barra de status

Esta ação não está disponível a partir desta funcionalidade. Selecione uma guia diferente.

Paleta de comandos

1. Abra a paleta de comandos com a combinação de teclas Ctrl + +
2. Na paleta de comandos, filtre com Git e selecione Commit.
3. Introduza a mensagem de confirmação e, em seguida, prima Enter.

Terminal integrado

1. Abra um terminal integrado a partir do Terminal -> Novo Terminal.

2. Crie uma nova ramificação nomeada MY-BRANCH com o seguinte comando git:

   git commit -m "YOUR COMMIT MESSAGE"
   

Envie uma filial local para o GitHub

Barra de atividades

1. Selecione o ícone Controle do código-fonte na barra de atividades.
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 push à direita do nome da ramificação.

   

2. Selecione o nome remoto na janela pop-up. Se tiver apenas um telecomando, não lhe será pedido que selecione o nome do telecomando.

Paleta de comandos

1. Abra a paleta de comandos com a combinação de teclas 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 a partir do Terminal -> Novo Terminal.

2. Crie uma nova ramificação nomeada MY-BRANCH com o seguinte comando git:

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

Ver a saída do Git

Você pode visualizar a saída dos comandos do Git ao usar a extensão de controle do código-fonte. Esta saída ajuda a debugar quando um comando falha.

1. Selecione o ícone Controle do código-fonte na barra de atividades.

2. Selecione as reticências (...) e, em seguida, selecione Mostrar saída do Git.

   

Ferramentas de código do Visual Studio para trabalhar com Git e GitHub

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

Ícone	Informação	Acesso a partir de
	Comandos Git na paleta de comandos	F1
	Extensão de controle do código-fonte	Barra de atividades
	Extensão de Pull Requests e Issues do GitHub	Barra de atividades
	Extensão de repositórios do GitHub	Você pode abrir um repositório GitHub de forma rápida e fácil, procurando por Repositórios GitHub: Open Repository... na Paleta de comandos, F1, ou escolhendo Abrir repositório GitHub... a partir do indicador remoto (o botão verde no canto inferior esquerdo da barra de estado).

Recursos relacionados

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