O que você aprenderá

Ao final deste guia você será capaz de:

✔ instalar extensões Git e GitHub
✔ configurar seu usuário Git
✔ conectar o VS Code ao GitHub
✔ criar um repositório
✔ fazer commits
✔ enviar código para GitHub (push)
✔ clonar repositórios
✔ atualizar projetos (pull)

1. Instalando extensões Git e GitHub

As extensões adicionam novas funcionalidades ao VS Code.

Passo 1 — Abrir o Marketplace

No VS Code pressione:

CTRL + SHIFT + X

Ou clique no ícone Extensions na barra lateral esquerda.

Interface típica:

[Explorer]
[Search]
[Source Control]
[Extensions]  ← clicar aqui

Passo 2 — Instalar extensão do GitHub

No campo de busca digite:

GitHub Pull Requests and Issues

Extensão oficial da Microsoft.

Clique em:

Install

Essa extensão permite:

conectar conta do GitHub
gerenciar pull requests
visualizar issues
navegar repositórios

Passo 3 — Instalar GitLens

Busque por:

GitLens

Clique:

Install

O GitLens adiciona recursos muito úteis:

✔ histórico de alterações
✔ quem modificou cada linha
✔ comparação entre versões
✔ timeline do arquivo

2. Abrindo o Terminal do VS Code

Agora vamos usar o terminal integrado.

Abra:

Terminal → New Terminal

Atalho:

CTRL + `

O terminal aparecerá na parte inferior do VS Code.

Exemplo visual:

-----------------------------------
|           Editor                |
|                                 |
-----------------------------------
| Terminal                        |
| $                               |
-----------------------------------

3. Verificando se o Git está funcionando

Digite no terminal:

git --version

Resultado esperado:

git version 2.xx.x

Se aparecer isso, o Git está funcionando corretamente.

4. Configurando o usuário do Git

Agora precisamos configurar nome e email.

Essas informações aparecem nos commits.

Digite no terminal:

git config --global user.name "Seu Nome"

Depois:

git config --global user.email "seu@email.com"

Exemplo:

git config --global user.name "David Almeida"
git config --global user.email "david@email.com"

Para verificar:

git config --list

5. Conectando o VS Code ao GitHub

Agora vamos conectar o VS Code ao GitHub.

Passo 1 — abrir Command Palette

Pressione:

CTRL + SHIFT + P

Digite:

GitHub: Sign In

Passo 2 — login no navegador

O navegador abrirá automaticamente.

Faça login na sua conta do GitHub.

Autorize o acesso ao VS Code.

Passo 3 — confirmação

Depois do login, o VS Code mostrará sua conta conectada.

Agora o editor pode interagir diretamente com o GitHub.

6. Criando o primeiro repositório

Agora vamos criar um projeto.

Passo 1 — criar pasta do projeto

Crie uma pasta no computador:

meu-primeiro-projeto

Passo 2 — abrir a pasta no VS Code

Menu:

File → Open Folder

Selecione a pasta criada.

Passo 3 — inicializar Git

Abra o terminal e digite:

git init

Isso cria uma pasta oculta chamada:

.git

Essa pasta guarda todo o histórico do projeto.

7. Criando o primeiro arquivo

Crie um arquivo chamado:

index.html

Exemplo de conteúdo:

<h1>Meu primeiro projeto com Git</h1>

8. Usando o painel Source Control

No VS Code clique no ícone:

Source Control

Ele parece um ícone de ramificação Git.

Interface típica:

Changes
  index.html

Isso mostra arquivos modificados.

9. Fazendo o primeiro commit

Agora vamos salvar a primeira versão do projeto.

Passo 1 — adicionar arquivos

Clique no botão:

Ou use o terminal:

git add .

Passo 2 — escrever mensagem

Digite no campo de commit:

primeira versão do projeto

Passo 3 — confirmar commit

Clique em:

Commit

Ou via terminal:

git commit -m "primeira versão"

10. Criando repositório no GitHub

Agora precisamos criar o repositório online.

Acesse o site do GitHub.

Clique em:

New Repository

Defina:

Nome: meu-primeiro-projeto

Clique:

Create Repository

11. Conectando o projeto ao GitHub

Copie a URL do repositório criado.

Exemplo:

https://github.com/usuario/meu-primeiro-projeto.git

No terminal digite:

git remote add origin https://github.com/usuario/meu-primeiro-projeto.git

12. Fazendo o primeiro Push

Agora vamos enviar o código para o GitHub.

Execute:

git push -u origin main

Isso envia o código para o repositório remoto.

Se tudo estiver correto, o projeto aparecerá no GitHub.

13. Clonando um projeto do GitHub

Agora veremos o processo inverso.

Passo 1 — abrir Command Palette

Pressione:

CTRL + SHIFT + P

Digite:

Git: Clone

Passo 2 — colar URL do projeto

Exemplo:

https://github.com/usuario/projeto.git

Passo 3 — escolher pasta

Escolha onde o projeto será salvo no computador.

Passo 4 — abrir projeto

Clique em:

Open

O projeto será carregado no VS Code.

14. Atualizando o projeto (Pull)

Se alguém alterar o projeto no GitHub, você precisa atualizar.

Execute:

git pull

Esse comando baixa as mudanças do repositório remoto.

15. Fluxo de trabalho comum

O fluxo diário de uso é:

editar arquivos
      ↓
git add
      ↓
git commit
      ↓
git push

Para receber mudanças:

git pull

16. Estrutura típica de projeto

Exemplo de organização:

meu-projeto
│
├─ src
│   ├─ app.js
│
├─ index.html
│
├─ README.md
└─ .gitignore

Conclusão

Usar Git e GitHub dentro do VS Code permite:

✔ versionar código
✔ colaborar com equipes
✔ enviar projetos para GitHub
✔ baixar projetos existentes

Tudo isso sem sair do editor.