Trabalhando em Equipe no GitHub com o VS Code

Colaborar em um projeto de software com colegas exige mais do que apenas saber programar — é preciso organizar o trabalho de forma que as mudanças de cada pessoa não entrem em conflito com as dos outros. O GitHub é a plataforma mais usada para isso, e o Visual Studio Code (VS Code) ou Google Antigravity possui integração nativa com o Git e extensões que tornam trabalhando em equipe no github muito mais visual e intuitivo, sem precisar digitar todos os comandos no terminal.

Este guia apresenta, passo a passo, como configurar o acesso ao repositório e trabalhar em equipe de forma organizada.

Pré-requisitos

Antes de começar, cada membro da equipe precisa ter instalado em seu computador:

• Git
• Visual Studio Code
• A extensão GitHub Pull Requests and Issues (pesquise no painel de Extensões do VS Code: Ctrl+Shift+X)

Além disso, todos devem ter uma conta no GitHub e estar autenticados no VS Code. Para isso, clique no ícone de Contas (👤) no canto inferior esquerdo do VS Code e entre com sua conta GitHub.

1. Adicionando Colaboradores ao Repositório

O dono do repositório deve autorizar os demais membros antes que eles possam enviar alterações.

No site do GitHub:

1. Acesse o repositório.
2. Vá em Settings > Collaborators (ou Collaborators and teams).
3. Clique em Add people e busque pelo nome de usuário ou e-mail do colega.
4. O convidado receberá um e-mail ou notificação no GitHub e deverá aceitar o convite para ter acesso.

⚠️ Enquanto o convite não for aceito, o colega não conseguirá enviar alterações ao repositório.

2. Clonando o Repositório no VS Code

Clonar significa baixar uma cópia do projeto para o seu computador.

1. No GitHub, acesse o repositório e clique em Code > copie a URL (HTTPS).
2. No VS Code, abra a Paleta de Comandos com Ctrl+Shift+P (ou Cmd+Shift+P no Mac).
3. Digite Git: Clone e pressione Enter.
4. Cole a URL do repositório e escolha a pasta onde o projeto será salvo.
5. Quando solicitado, clique em Open Repository para abrir o projeto.

3. Fluxo de Trabalho Recomendado

Para manter o projeto organizado e evitar sobrescrever o trabalho dos colegas, nunca trabalhe diretamente na branch principal (main ou master). Sempre crie uma branch separada para cada tarefa.

3.1 Criando uma Branch

Uma branch (ou ramificação) é uma linha de desenvolvimento independente. Cada membro deve criar a sua para trabalhar.

1. No canto inferior esquerdo do VS Code, clique no nome da branch atual (ex: main).
2. Selecione Create new branch….
3. Digite um nome descritivo para sua tarefa, como feature/login ou correcao/bug-formulario.
4. O VS Code alternará automaticamente para a nova branch.

💡 Via terminal integrado (Ctrl+`): git checkout -b nome-da-sua-feature

3.2 Fazendo Alterações e Commit

Após editar os arquivos do projeto:

1. Clique no ícone de Controle do Código-Fonte na barra lateral (ou Ctrl+Shift+G).
2. Os arquivos modificados aparecerão em Changes. Clique no + ao lado de cada arquivo (ou no ícone de + geral) para adicioná-los ao stage — equivalente ao git add.
3. Digite uma mensagem de commit descritiva na caixa de texto (ex: Adiciona tela de login).
4. Clique em Commit (ícone de ✔️ ou Ctrl+Enter).

💡 Via terminal: git add . → git commit -m "sua mensagem"

3.3 Enviando as Alterações para o GitHub (Push)

Após o commit, envie sua branch para o GitHub:

1. Ainda no painel de Controle do Código-Fonte, clique nos três pontinhos (...) > Push.
2. Se for o primeiro push dessa branch, o VS Code pedirá confirmação para publicar a branch remota. Confirme.

💡 Via terminal: git push origin nome-da-sua-feature

3.4 Abrindo um Pull Request (PR)

O Pull Request é o mecanismo pelo qual você pede que suas alterações sejam revisadas e integradas à branch principal.

Com a extensão GitHub Pull Requests and Issues:

1. Após o push, um botão Create Pull Request aparecerá automaticamente no VS Code. Clique nele.
2. Preencha o título e a descrição do PR, explicando o que foi feito.
3. Clique em Create.

Ou pelo site do GitHub:

1. Acesse o repositório — um banner amarelo aparecerá sugerindo abrir um PR para sua branch recém-enviada. Clique em Compare & pull request.
2. Preencha as informações e clique em Create pull request.

🔍 O PR permite que a equipe revise e comente o código antes de aceitá-lo, garantindo a qualidade do projeto.

3.5 Revisão e Merge

Com a extensão instalada, você pode revisar e aprovar PRs diretamente no VS Code:

1. Clique no ícone do GitHub na barra lateral para ver os PRs abertos.
2. Clique em um PR para ver as alterações, deixar comentários ou aprová-lo.
3. Após a aprovação, clique em Merge Pull Request para integrar o código à main.

4. Evitando e Resolvendo Conflitos

Mantenha-se Atualizado

Antes de começar o dia ou criar uma nova branch, baixe as últimas alterações da branch principal:

1. No canto inferior esquerdo, certifique-se de estar na branch main.
2. Clique nos três pontinhos (...) > Pull (ou clique no ícone de sincronização 🔄 na barra de status).

💡 Via terminal: git pull origin main

Resolvendo Conflitos no VS Code

Se dois membros editaram a mesma parte do mesmo arquivo, o Git avisará sobre um conflito de merge. O VS Code tem um editor visual para isso:

1. Os arquivos com conflito aparecerão marcados com um ! no painel de Controle do Código-Fonte.
2. Abra o arquivo — o VS Code destacará as duas versões em conflito com botões de ação: Accept Current Change, Accept Incoming Change, Accept Both Changes ou Compare Changes.
3. Escolha qual versão manter (ou combine as duas manualmente).
4. Salve o arquivo, faça o stage da alteração e um novo commit para concluir o merge.

Resumo do Fluxo

main ──────────────────────────────────────────────── merge ──▶
         │                                               ▲
         └── (nova branch) ── commits ── push ── PR ────┘

Conclusão

Trabalhar em equipe com Git e GitHub pode parecer complexo no início, mas seguindo esse fluxo — criar branches, fazer commits, abrir Pull Requests e manter o código atualizado — o processo se torna natural e organizado. O VS Code facilita muito esse trabalho ao integrar visualmente todas essas etapas, reduzindo a necessidade de memorizar comandos e diminuindo o risco de erros.

Leia também

Configurar Ambiente React Native Expo