Utilizando o GitHub dentro do VS Code

Olá, comunidade!

Muitos desenvolvedores, especialmente os que estão começando, buscam maneiras de otimizar o fluxo de trabalho com o Git. O Visual Studio Code oferece uma integração poderosa que permite gerenciar todo o ciclo de vida de um repositório de forma visual, sem a necessidade de recorrer ao terminal.

Este guia tem como objetivo demonstrar como utilizar exclusivamente os recursos visuais do painel Source Control do VS Code para executar as operações mais comuns do Git, desde a criação de um projeto até a colaboração em equipe.

Pré-requisitos

Para seguir este guia, certifique-se de que possui:

• Git instalado em seu sistema operacional.
• Visual Studio Code instalado.
• Uma conta no GitHub e estar logado nela através do VS Code.

Cenário 1: Iniciando um Novo Projeto e Conectando ao GitHub

Vamos começar com um projeto que ainda não está sob controle de versão.

1. Inicializando o Repositório

Com a pasta do seu projeto aberta no VS Code, navegue até a barra de atividades à esquerda e clique no ícone do Source Control (terceiro ícone de cima para baixo, representando uma bifurcação).

Como o projeto ainda não é um repositório Git, você verá uma tela com um único botão em destaque: "Initialize Repository". Clique neste botão para que o VS Code inicie o controle de versão na sua pasta.

2. Realizando o Primeiro Commit

Após a inicialização, todos os arquivos do seu projeto aparecerão listados na seção "Changes". Cada arquivo terá um status, como "U" (Untracked).

Para confirmar suas primeiras alterações, siga estes passos:

1. Preparar os Arquivos (Stage): Ao lado de cada arquivo, há um ícone de +. Clique nele para mover o arquivo para a área de "Staged Changes". Isso indica ao Git quais alterações você deseja incluir no próximo commit. Para preparar todos os arquivos de uma vez, clique no + ao lado do título "Changes".
2. Escrever a Mensagem de Commit: No topo do painel, há uma caixa de texto. Escreva uma mensagem clara e descritiva para o seu commit. Exemplo: "feat: Adiciona estrutura inicial do projeto".
3. Confirmar o Commit: Clique no ícone de checkmark (✓), localizado acima da caixa de mensagem, para finalizar o commit.

3. Publicando o Repositório no GitHub

Com seu primeiro commit local realizado, é hora de enviar o código para o GitHub. Existem dois caminhos principais.

• Opção A: Publicar em um Repositório Novo
• O painel do Source Control se adaptará, oferecendo agora o botão "Publish Branch". Ao clicar neste botão, o VS Code irá:
• Solicitar que você escolha um nome para o novo repositório que será criado no seu GitHub.
• Perguntar se o repositório deve ser Privado ou Público. Após suas escolhas, o VS Code criará o repositório remoto, o conectará ao seu projeto local e enviará seu commit inicial.

Opção B: Conectar a um Repositório Existente e Vazio

Se você já criou um repositório vazio no GitHub, precisa conectar seu projeto local a ele.

1. Copie a URL do repositório no site do GitHub.
2. No painel Source Control do VS Code, clique no menu de três pontos (...).
3. Vá em Remote > Add Remote....
4. Cole a URL do repositório que você copiou.
5. Dê um nome para o seu repositório remoto (o padrão origin é recomendado).
6. Após adicionar o remoto, o botão "Publish Branch" (ou um ícone de nuvem para publicar) aparecerá. Clique nele para enviar seus commits para o repositório no GitHub.

Resultado Final:

Cenário 2: Clonando um Repositório Existente

Para trabalhar em um projeto que já existe no GitHub, o processo é ainda mais direto.

1. Abra o VS Code (sem nenhuma pasta aberta, de preferência).
2. Navegue até o painel Source Control. Você verá o botão "Clone Repository".
3. Clique nele e cole a URL do repositório que você deseja clonar (copiada do GitHub).
4. O VS Code solicitará que você escolha uma pasta em seu computador para salvar os arquivos do projeto.
5. Após a conclusão do download, o VS Code abrirá o projeto automaticamente, já configurado e conectado ao repositório remoto.

Fluxo de Trabalho Essencial no Dia a Dia

Uma vez que o repositório está configurado, o fluxo de trabalho se concentra em criar branches, fazer commits e sincronizar com a equipe.

1. Criando e Gerenciando Branches

É uma boa prática isolar novas funcionalidades ou correções em branches separadas.

1. No canto inferior esquerdo da janela do VS Code, você verá o nome da branch atual (ex: main). Clique nele.
2. Um menu aparecerá na parte superior da tela. Selecione a opção + Create new branch....
3. Digite um nome para sua nova branch (ex: feature/login-screen) e pressione Enter.

O VS Code criará e mudará para a nova branch automaticamente. O nome no canto inferior esquerdo será atualizado.

2. Comitando Novas Alterações

O processo para fazer novos commits em sua branch é o mesmo descrito anteriormente:

1. Modifique seus arquivos.
2. Acesse o painel Source Control.
3. Prepare as alterações clicando no ícone +.
4. Escreva uma mensagem de commit.
5. Confirme clicando no ícone ✓.

3. Publicando e Sincronizando Alterações

• Publicar uma Nova Branch: Após fazer commits em uma branch recém-criada localmente, o botão "Publish Branch" aparecerá no painel Source Control. Clique nele para enviar sua branch ao GitHub, tornando-a visível para outros colaboradores.
• Sincronizar com o Repositório Remoto: Para o trabalho diário, o botão mais importante está na barra de status, no canto inferior esquerdo. É o botão "Synchronize Changes", que possui um ícone de setas circulares. Clicar neste botão executa duas ações:
• Puxa (Pull): Baixa quaisquer alterações que foram enviadas para a branch remota por outros membros da equipe.
• Empurra (Push): Envia quaisquer commits que você tenha feito localmente para a branch remota.

Usar o botão "Synchronize Changes" regularmente garante que seu trabalho esteja sempre atualizado e seguro no repositório remoto.

Resultado final: