[Introdução à Integração Git] Guia de Operações Básicas para Usar Git e GitHub no VSCode

Sobre Mim: Construí Dois Sites do Zero e Serei Seu Guia

Olá! Apenas alguns meses atrás, eu era um completo iniciante com zero conhecimento de programação, assim como muitos de vocês.

Impulsionado pelo desejo de "criar meu próprio serviço", mergulhei em um mundo de tentativa e erro com a IA como minha companheira. Em apenas um mês e meio, consegui lançar sozinho dois sites: buyonjapan.com e copicode.com.

O maior obstáculo inicial nesse processo foi "Git" e "GitHub". Senti-me desencorajado toda vez que um erro aparecia, mas ao resolvê-los um por um, eles agora se tornaram meus maiores aliados. Neste artigo, compartilharei uma versão condensada do "que os iniciantes realmente precisam saber", com base na minha experiência pessoal.

[Passo 0] Vamos Aquecer! Prepare Suas Ferramentas

A preparação é fundamental. Antes de mergulharmos no trabalho real, certifique-se de ter estas três ferramentas instaladas no seu PC. Se não, basta ir aos seus sites oficiais e instalá-las rapidamente!

• VSCode (Visual Studio Code): Este é o nosso castelo, um poderoso editor de código.
  ➡️ Ir para o site oficial do VSCode
• Git: Uma máquina do tempo que registra e gerencia o histórico de alterações de seus arquivos.
  ➡️ Ir para o site oficial do Git
• Conta no GitHub: Um cofre online para armazenar o histórico registrado pelo Git.
  ➡️ Ir para o site oficial do GitHub

💡 Problema Comum de Iniciantes: "Instalei o Git, mas o VSCode não o reconhece!"
Na maioria dos casos, uma simples reinicialização do PC resolverá isso. Tente reiniciar o computador após a instalação. Se isso não funcionar, certifique-se de selecionar a opção "(Recommended)" durante a instalação do Git, e tudo deverá funcionar bem.

[Passo 1] Apresente-se ao Git (Apenas na Primeira Vez)

Apenas uma vez, você precisa se apresentar ao Git dizendo: "Sou eu que estou usando este PC". Isso é para registrar seu nome nos dados de salvamento (commits) que você criará.

Primeiro, abra o VSCode, vá para o menu "Terminal" no topo e selecione "Novo Terminal" para abrir o terminal (a tela preta) na parte inferior.

Quando o terminal aparecer, copie e cole os dois comandos a seguir, um por um, e pressione Enter após cada um.

Primeiro, defina seu nome de usuário. Substitua "Your Name" pelo seu nome de usuário do GitHub ou similar.

git config --global user.name "Your Name"

Em seguida, seu endereço de e-mail. Substitua "your.email@example.com" pelo endereço de e-mail que você registrou no GitHub.

git config --global user.email "your.email@example.com"

Se nenhuma mensagem aparecer, você teve sucesso. O Git agora se lembra de você! Você não precisará fazer isso novamente, a menos que compre um novo PC.

[Passo 2] Comece a Monitorar Seu Projeto (git init)

Agora, vamos realmente colocar seu projeto sob o gerenciamento do Git. Isso é chamado de "inicializar um repositório". Parece complicado, mas com o VSCode, é apenas um clique.

1. No VSCode, abra a pasta do projeto que você deseja controlar a versão (por exemplo, a pasta `my-project`).
2. Na Barra de Atividades à esquerda, clique no terceiro ícone de cima, que parece caminhos se ramificando (Controle de Código-Fonte).
3. Você verá um botão azul que diz "Inicializar Repositório". Clique nele sem hesitar!

É isso! Uma pasta oculta chamada .git será criada na pasta do seu projeto, e o Git começará a monitorar as alterações de seus arquivos. É tão fácil que é incrível, não é?

Já que Estamos Nisso, Crie um Arquivo .gitignore

No seu projeto, você terá arquivos que não deseja que o Git monitore (ou envie para o GitHub), como informações pessoais como senhas ou arquivos gerados automaticamente. O arquivo .gitignore é onde você especifica esses arquivos.

Crie um novo arquivo chamado .gitignore na raiz (nível superior) do seu projeto e liste os nomes de arquivos ou pastas que você deseja ignorar. Por exemplo:

# Arquivos gerados automaticamente pelo SO
.DS_Store

# Arquivo de configuração para senhas, etc.
.env

# Pasta onde um grande número de pacotes é instalado
node_modules

💡 Dica: É normal não saber o que ignorar no início. Uma busca rápida por "[nome da tecnologia] .gitignore" (por exemplo, Next.js .gitignore) lhe dará muitos ótimos modelos.

[Passo 3] Registre Suas Alterações (Staging e Commit)

Agora, o verdadeiro poder do Git. Vamos registrar as alterações de arquivos como "pontos de salvamento". Este processo é dividido em duas etapas:

1. Staging (Preparação): Selecionar as alterações a serem incluídas neste salvamento.
2. Commit (Confirmação): Finalizar o ponto de salvamento adicionando uma mensagem às alterações selecionadas.

Pense nisso como se estivesse se mudando: você "coloca os itens em uma caixa (staging)" e depois "rotula a caixa como 'Utensílios de Cozinha' e a fecha (commit)".

Vamos tentar. Primeiro, faça uma alteração no seu projeto. Por exemplo, vamos criar um arquivo chamado index.html.

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Teste de Git</title>
</head>
<body>
  <h1>Olá, Git!</h1>
</body>
</html>

Ao criar e salvar um arquivo, um emblema como "1" aparecerá no ícone de Controle de Código-Fonte do VSCode. Esta é uma notificação do Git de que há uma alteração.

Se você abrir a guia Controle de Código-Fonte, verá index.html listado em "Alterações".

1. Staging (git add)

Passe o mouse sobre o arquivo alterado e clique no ícone "+" (Preparar Alterações) que aparece. A preparação está concluída. Isso é o mesmo que digitar git add . no terminal.

2. Commit (git commit)

Uma vez preparado, o arquivo é movido para a seção "Alterações Preparadas". Em seguida, na caixa de mensagem no topo, insira uma mensagem que descreva o que você alterou (por exemplo, Commit inicial, Criar index.html).

Após inserir a mensagem, clique no botão "Confirmar" (ou no ícone de visto). Seu ponto de salvamento foi criado! Isso é o mesmo que digitar git commit -m "mensagem" no terminal.

💡 Uma mensagem de commit é uma carta para o seu eu futuro!
Pode parecer um incômodo agora, mas quando você estiver se perguntando mais tarde, "Do que se tratava essa alteração?", uma mensagem clara será um salva-vidas. Adquira o hábito de escrever mensagens específicas como "Adicionar recurso X" ou "Corrigir bug Y".

[Passo 4] Envie para o GitHub (git push)

Agora que você salvou suas alterações em seu PC local, é hora de armazená-las em seu cofre online, o GitHub. Isso é chamado de "pushing".

1. Crie um repositório vazio no GitHub

Primeiro, crie um novo repositório (local de armazenamento) no site do GitHub. Insira um nome de projeto no campo "Nome do repositório" (por exemplo, my-project) e clique no botão "Criar repositório". É isso. Se você escolher "Privado", apenas você poderá ver o repositório.

2. Conecte-se ao GitHub a partir do VSCode e faça o push

Este é o clímax! Vamos enviar seus dados de salvamento locais para o repositório do GitHub que você acabou de criar.

Após o commit, você deverá ver um botão "Publicar Branch" na guia Controle de Código-Fonte. Clique nele.

Uma opção para "Publicar no GitHub" aparecerá. Selecione-a. O VSCode encontrará automaticamente o repositório do GitHub que você acabou de criar. Selecione-o e... pronto!

Na primeira vez, será solicitado que você se autentique com sua conta do GitHub. Seu navegador será aberto e você só precisa clicar no botão para autorizar.

🚨 O Ponto de Tropeço Mais Importante! Erros de Autenticação
No passado, você podia se autenticar com uma senha, mas para maior segurança, agora é comum usar uma senha especial chamada **PAT (Personal Access Token)**. Se você receber um erro como "senha incorreta", é quase certo que você precisa de um PAT.

A criação de um PAT envolve algumas etapas, então a maneira mais confiável é verificar a documentação oficial do GitHub. Use o link abaixo para criar um token com permissões de `repo` e `workflow` e, em seguida, cole esse token em vez de sua senha.

➡️ Gerenciando seus tokens de acesso pessoal - GitHub Docs

Depois de se autenticar com sucesso, o VSCode se lembrará disso, e você poderá fazer o push com um único clique a partir de então.

[Avançado] Trabalhe com Segurança Criando Branches

Quando estiver confortável com o Git, você definitivamente deve tentar usar "branches". Em resumo, um branch é um **"mundo paralelo para o seu trabalho".**

Fazer alterações diretamente nos dados de salvamento principais (o branch main) é arriscado e pode levar a bugs. Em vez disso, ao adicionar novos recursos ou experimentar designs, você cria um novo branch e trabalha livremente nele. Quando seu trabalho estiver concluído e você confirmar que não há problemas, você mescla essas alterações no branch principal. Este é um fluxo de trabalho de desenvolvimento seguro.

Criar um branch também é fácil no VSCode.

1. Clique no nome do branch atual (inicialmente main) na barra de status no canto inferior esquerdo.
2. Selecione "+ Criar novo branch..." nas opções que aparecem na parte superior da tela.
3. Digite um novo nome de branch (por exemplo, feature/add-new-page) e pressione Enter.

Assim, você mudou para um novo branch. A partir daqui, você apenas edita arquivos → prepara → confirma → faz o push (publica o branch) como de costume. Se você conseguir dominar este fluxo, já é um usuário competente do Git!

Conclusão: O Git Não é Assustador, é a Sua Máquina do Tempo Definitiva!

Ótimo trabalho! Se você seguiu os passos deste artigo, seu código do seu PC agora deve estar armazenado com segurança no GitHub.

As operações que cobrimos são o fluxo de trabalho mais básico e crucial para usar Git e GitHub.

• git init na sua pasta de trabalho (inicializar repositório)
• Alterar um arquivo e git add (preparar)
• Adicionar uma mensagem e git commit (confirmar)
• git push para o GitHub (enviar)

Pode parecer difícil no início, mas com o uso diário, se tornará tão natural quanto escovar os dentes. O Git é sua máquina do tempo definitiva, protegendo seu código e permitindo que você reverta para qualquer estado anterior. Não tenha medo de erros; pergunte à IA, procure pelas mensagens de erro e, gradualmente, torne-se amigo dele!