Como usar o VSCode com Git (como GitHub, BitBucket, entre outros)

Hoje vou demonstrar como usar o VSCode com Git para versionar códigos fontes.

Git basicamente é um tipo de versionamento de arquivos, bastante usado pela comunidade.

Já GitHub, BitBucket entre outros, são empresas ou ferramentas que fornecem a solução Git para usarmos online.

Desde que a Microsoft comprou a GitHub, vários recursos e novidades chegaram a plataforma como a possibilidade de usar Repositórios Privados sem precisar pagar (antes não existia essa possibilidade).

Então no artigo de hoje, vou mostrar como criar um repositório privado no GitHub (mas você pode fazer no BitBucket ou onde preferir), e como acessar pelo VSCode e fazer “download” das alterações de fontes e fazer “upload” das suas alterações.

Criando um Novo Repositório

  1. Acesse github.com
  2. Faça login, ou se não tiver conta, crie uma
  3. Na parte da esquerda, em Repositórios, clique no botão para criar um novo

Criando repositório

  1. Defina um nome para o repositório, uma descrição, e muito importante, se os fontes vão ter informações sigilosas de empresas, coloque como repositório privado

Definindo como privado

  1. A página que será exibida em seguida, terá opções variadas sobre o repositório, pode deixar essa página aberta

Configurando no VSCode para usar Git do GitHub

  1. Baixe o Git conforme a versão do seu S.O. nesse link – https://git-scm.com/downloads/
  2. Agora abra o VSCode, crie uma pasta que você vai usar como repositório, iremos chamar de Teste GitHub
  3. Aperte Ctrl + Shift + P e execute o comando git clone

Clonando o repositório

  1. Insira a URL que você quer clonar que foi criada no passo 5

Inserindo a url que terão os dados baixados

  1. Selecione a pasta criada para fazer a clonagem do repositório

Selecione a pasta que foi criada

  1. Será aberto um prompt para autenticar a operação, no meu caso eu cliquei para autenticar via navegador

Faça login na sua conta

  1. Clique em autorizar

Autorize a aplicação

  1. Por último, vá no VSCode e clique em Arquivo > Abrir Pasta e aponte para a pasta que foi criada internamente do passo 10

Fazendo “upload” de códigos fontes

  1. Dentro dessa pasta, o iremos criar algumas subpastas e arquivos dentro, abaixo um exemplo de como ficou

Crie pastas e arquivos

  1. Para fazer o commit dos fontes, podemos fazer via comando (pressionar Ctrl + Shift + P e digitar git commit), ou podemos fazer graficamente, clicando no ícone de controle de código fonte, marcando os fontes e digitando uma observação de teste

Realizando o commit

  1. Por último, para efetivarmos nosso commit no servidor do GitHub, iremos apertar Ctrl + Shift + P e executar o git push

Realizando o git push

  1. Ele irá carregar um pouco a sincronização
  2. Após carregar, caso queira confirmar, vá no GitHub, acesse o repositório e note que os fontes estão carregados lá

Fontes carregados

Fazendo “download” de códigos fontes

  1. Caso você use o repositório com mais alguém, ou faça alteração em outras IDEs, basta executar Ctrl + Shift + P e executar git pull ou se quiser fazer graficamente, basta clicar no ícone de Sincronizar as alterações

Realizando o git pull


Ressalto que existem outras extensões para VSCode, mas tentei deixar o tutorial usando os recursos mais padrões e nativos possíveis.

Bom pessoal, por hoje é só.

Abraços e até a próxima.

Dan Atilio (Daniel Atilio)
Especialista em Engenharia de Software pela FIB. Entusiasta de soluções Open Source. E blogueiro nas horas vagas.

6 Responses

  1. Antonio Andrade disse:

    bom dia Daniel… Parabéns pelo artigo, muito bom.!!!

    Tenho uma dica: utilizo a ferramenta gráfica GitKraken para administração do meu Git, facilita fazer Pull, Push, criar Branch, dentre outras funcionalidades…

  2. Eduardo de Souza disse:

    Ótimo artigo!! Se tiver tempo, gostaria muito de ver uma abordagem sobre SVN também

  3. rafa_achoa disse:

    Simples e intuitivo! Show de bola Atilião!! Obrigado e parabéns!

Deixe uma resposta