Kauê Cavalcante

Posted on Mar 5, 2022

[Tutorial] Git + VS Code: como trabalhar com branches utilizando sua IDE

#git #vscode #beginners

Você faz parte da galera que não é muito chegada com o terminal? Ou simplesmente prefere ferramentas gráficas pois acha mais produtivo?

Se sua resposta for sim, então essa leitura é para você, pois hoje vamos aprender a utilizar as funcionalidades do git no Visual Studio Code. E mais: aprenderemos sobre branches.

Branches

Antes de começarmos, vamos responder o que são branches. Imagine que um branch seja uma linha do tempo dos seus commits, como na imagem a seguir:

Observe que no começo, temos um bloco com a palavra "Main" (Pode ser master em versões anteriores do git). Ela representa o nome dessa branch, que é a branch inicial dos projetos quando inicializamos o git em um projeto.

Agora, vamos supor que queremos adicionar uma nova funcionalidade no projeto, mas que por segurança, devemos fazer isso sem afetar o código principal? É para isso que usamos as branches. Elas servem para isolarmos nosso código criando ramificações a partir de um ponto, permitindo criamos códigos e testar diferentes cenários sem afetar o código da ramificação principal (main/master).

Operações git no Visual Studio Code

Vamos então criar um novo projeto e iniciar o versionamento com o git.

Ok! Se tentarmos o comando git status, veremos que ele nos informa em qual branch estamos.

Certo, mas chega de linha de comando e vamos abrir o VS Code. Aproveitemos e criemos também um arquivo de texto.

Como podemos ver, o git já reconheceu o arquivo e o classificou como untracked. Vamos aprender a mover este arquivo para nossa Staging Area. Basta clicar na aba Source Control (ou ctrl+shift+g) para ir para a parte de versionamento, e clicar no botão para fazer o stage (representando por um +). Veja a seguir:

Agora, vamos confirmar nossas alterações fazendo um commit. Primeiramente, vamos escrever uma mensagem para nosso commit e então clicar no botão para fazer o commit, como no GIF a seguir:

E pronto! Aprendemos a adicionar nossos arquivos na Staging Area e fazer commits usando somente o VSCode.

Criando uma nova branch

Ok, mas o assunto principal aqui são as branches, certo? Então vamos começar criando uma nova branch. No menu de ações da aba do git, podemos visualizar várias outras operações que podemos realizar no nosso repositório, porém iremos focar nas opções de 'Branch'.

Se passarmos o mouse em cima, veremos que o menu expande nos mostrando outras ações. Escolheremos a "Create branch" ou "Criar branch".

Agora, nosso esquema de branch ficará assim:

Perceba que além de criar a nova branch, o VS Code já nos moveu para a nova branch (na parte inferior esquerda do VS Code é possível ver o nome da branch atual). Agora, qualquer código produzido aqui não irá afetar a branch master.

O comando no terminal equivalente a esta operação seria:
git branch <nome da branch> seguido do comando git checkout <nome da branch>, ou simplesmente git checkout -b <nome da branch.

Assim como os commits precisam de uma mensagem, as branches precisam ser nomeadas.

Commit na nova branch

Vamos aproveitar que já estamos na nova branch e alterar o nosso arquivo, para então adicioná-lo na staging area e fazer o commit.

Com isso, nosso esquema se parecerá com isso:

Pronto. Agora, vamos voltar para a branch master e veremos o que acontece com o nosso arquivo. Observe:

O comando no terminal equivalente para esta operação é git checkout <nome da branch>.

Voltamos para a branch master e o nosso arquivo não está com as últimas alterações que fizemos agora a pouco. Isso acontece porque fizemos a alteração em outra branch e como dissemos anteriormente, as alterações feitas em uma branch não afetam as outras.

Merge entre branches

Vamos supor que aquela outra branch que criamos era uma branch com o propósito de implementarmos uma nova feature para o projeto ou uma correção de algum erro. Implementamos, testamos e concluímos que ela está pronta para ser adicionada na branch master, para fazer parte do projeto. Para isso, utilizamos a operação de merge.

Vamos fazer o merge da nossa branch criada com a branch merge:

Na linha de comando, primeiro precisaríamos fazer o git checkout para a branch que iríamos receber a outra branch com o merge (nesse caso, a master) e então usaríamos o comando git merge <nome da branch para mergear>.

Agora podemos ver que a alterações que tínhamos na outra branch, agora estão também na master.

Com isso, o nosso esquema ficará assim:

Conflitos de merge

Até aqui, mil maravilhas, certo? Mas nem tudo são apenas rosas, principalmente quando se trabalha em time. Vamos supor que você e algum colega alteraram o mesmo arquivo e fizeram o commit em branches diferentes. Como ficaria na hora do merge?

Nesse caso, teremos um conflito. Mas sem pânico, pois podemos resolvê-los. Vamos alterar o mesmo file.txt na master e na outra branch.

Beleza! Agora vamos voltar para a branch master e tentar fazer o merge para ver o que acontece:

E voalá! Temos um conflito. A parte boa disso é que podemos facilmente resolver estes conflitos já que o próprio VS Code nos diz onde está o conflito, o porquê de estar ocorrendo e de onde vem cada parte de código.

Ele também nos fornece algumas opções, como: