Programação e outras coisas pseudoaleatórias.

Resolvendo conflitos de merge do Git através do Visual Studio Code

O VSCode tem uma interface própria para manipular o git, e pode nos ajudar a simplificar o processo de merge.

02/11/2020
artigos

Sumário

Introdução

Fazer merges de códigos no Git é algo que faz parte da nossa rotina e temos que fazer isso diariamente.

Faz parte da nossa rotina, mas quando já trabalhamos na área, trabalhamos em equipe e merges são necessários. Mas e quem está estudando e ainda não entrou na área? Como aprender a fazer merges em um projeto que você está fazendo sozinho?

Isso é o que normalmente acontece com a galera que está estudando Git, a parte sobre merges fica só no teórico, pois não sabem como praticar. Pretendo ensinar aqui uma forma simples para gerarmos um conflito, e como podemos resolver ele através da interface do VS Code. Além disso também quero pontuar alguns erros comuns, e como resolver eles.

Vou dividir este material em duas sessões, na primeira parte vou apresentar como gerar conflitos de merge usando o GitHub, e na segunda como resolver os conflitos usando a interface do VS Code.

Também é possível gerar conflitos através de merge de duas branchs do Git, mas aqui quero apresentar uma alternativa simples para quem está começando a estudar Git.

Não precisa gerar o conflito? Só quer resolver ele? Então vá direto para a segunda parte.

Aviso: o projeto que estou usando como exemplo é feito em HTML, CSS e JS, mas vai funcionar para qualquer linguagem que você estiver usando.

Gerando conflitos de merge no Github

Para começar você precisa:

  1. Ter uma conta no GitHub.
  2. Seu projeto deve estar em um repositório no GitHub.
  3. Deve ter o projeto configurado localmente, com a última versão do código.
  4. O passo 3 é muito importante mesmo, você precisa ter o código antes da sua alteração manual ser adiciona no git.

Acesse o seu projeto através da interface gráfica do GitHub, e clique em um arquivo do projeto que você gostaria de editar. Na página do arquivo observe duas coisas importantes, a branch que está selecionada, e o botão de editar.

Página de um arquivo no github, com destaque para a seleção de branchs, e o botão de editar
Página de um arquivo no github, com destaque para a seleção de branchs, e o botão de editar

Clique no botão de editar (é o ícone de um lápis), para abrir a página de edição.

Página de edição de um arquivo no github
Página de edição de um arquivo no github

Agora você pode fazer as alterações que você quiser no arquivo, é importante lembrar as linhas que você alterou, pois posteriormente deve alterar as mesmas para gerar o conflito. Quando finalizar vá para o final da página, para gerar um novo commit com suas alterações.

Bloco para realizar o commit das edições
Bloco para realizar o commit das edições, no final da página

Terminou a edição no GitHub? Certo agora vamos para a próxima parte.

Faça outras alterações em seu ambiente local, lembre-se de alterar o mesmo arquivo, e as mesmas linhas, mas com alterações diferentes, commit suas alterações locais, e faça um pull, e pronto seu conflito foi gerado!

Resolvendo Merges

Antes de começarmos a parte do merge, quero destacar aqui 2 problemas que sempre vejo acontecendo.

Estou tentando fazer um push, E DA PAU, SOCORRO!

Normalmente existe uma mensagem do Git assim:

error: failed to push some refs to 'https://Url completa do repositório remoto'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

O Git está avisando que você não pode fazer um git push no momento, pois existem commits novos no repositório remoto, faça um git pull antes.

Estou tentando fazer um pull e está dando ERRO, ME AJUDA!

Normalmente existe uma mensagem do Git assim:

error: Your local changes to the following files would be overwritten by merge
...
Please commit your changes or stash them before you merge.
Aborting
...

O Git só está avisando que você tem alterações locais que não foram commitadas, faça o commit de suas alterações, e depois faça o git pull novamente.

Fazendo o Merge

Quando você executar um git pull, será indicado ser aconteceu um conflito ou não, com uma mensagem assim:

Auto-merging NomeDoArquivoAQUI
CONFLICT (content): Merge conflict in NomeDoArquivoAQUI
Automatic merge failed; fix conflicts and then commit the result.

A mensagem indica que o merge falhou, e quais arquivos estão em conflito.

No VS Code, você vai ter esta informação no ícone lateral do git, clique no ícone para abrir o menu lateral com detalhes do git. Uma informação adicional o número no ícone indica a quantidade de arquivos alterados.

Menu lateral do git dentro do VS Code
Menu lateral do git dentro do VS Code

Na aba existem dois agrupadores de arquivos Merge Changes e Changes, nós queremos os arquivos que estão em Merge Changes, estes são os arquivos que precisamos resolver os conflitos. Clique em um destes arquivos para abrir no editor.

Para cada bloco de conflito você irá ver as mesmas estruturas comuns, uma linha de opções, um bloco de código verde (Current Change) e um bloco de código azul (Incoming Change).

Bloco de resolução de conflito no VS Code
Bloco de resolução de conflito no VS Code

Primeiro vamos entender o que são os dois códigos que estamos vendo, o bloco verde, com o rótulo Current Change, são os seus códigos locais, é a versão do código que estava em seu repositório local. O bloco azul, com o rótulo Incoming Change (que está no final do bloco), representa a última versão do código que estava do repositório remoto, o que representa a alteração de outras pessoas.

Agora vamos as nossas opções de ação, na linha acima dos blocos de código termos algumas opções:

  • Accept Current Change: Indicar que o código “correto” é o Current Change, ou seja, o bloco de código em verde. Escolher esta opção, vai selecionar só esta parte no código. Dica: se só você estava trabalhando exatamente nesta parte do código, esta deve ser a forma correta.

  • Accept Incoming Change: Indicar que o código “correto” é o Incoming Change, ou seja, o bloco de código em azul. Escolher esta opção, vai selecionar só esta parte no código. Dica: se você não estava trabalhando nisso, e não tem ideia do que este código faz, melhor escolher esta opção.

  • Accept Both Changes: Esta opção vai selecionar ambos os códigos, e cabe a você alterar manualmente, para deixar o código na versão “correta”. Dica: quando múltiplas pessoas estão mexendo neste código, pode ser necessário manter ambos os códigos, para manter a funcionalidade correta.

  • Compare Changes: Abre uma janela de comparação, e deixas as diferenças lado a lado.

Para utilizar qualquer uma destas opções basta clicar sobre ela, e caso tenha feito uma escolha errada, basta executar um ctrl + z, para desfazer a ação e ver as opções novamente.

Você vai precisar fazer isso em todos os blocos de conflito, e em todos os arquivos na lista do Merge Changes, e somente após isso, você terá terminado de resolver os conflitos do seu código.

Importante, sempre garanta que o seu projeto está funcionando após suas alterações, faça as validações necessárias antes de finalizar o merge. Não adianta nada “terminar” o merge e o projeto parar de funcionar, pense nisso.

Outra coisa importante, sempre que você não valida se o projeto está funcionando após resolver conflitos, o Git mata gatinhos fofinhos, salve os gatinhos, sempre valide o que você fez!

Proteja os gatinhos, valide o seu código!
Proteja os gatinhos, valide o seu código!

Conflitos resolvidos, projeto funcionando como deveria, agora você precisa adicionar os arquivos do merge, para indicar que eles foram concluídos, faça isso pela interface do VS Code, ou use o git add. Após isso é só gerar um novo commit com as alterações, e enviar para o repositório remoto.

Caso tente fazer um commit, e veja esta mensagem de erro:

fatal: cannot do a partial commit during a merge.

Use o comando:

git merge --continue

Conclusão

E pronto! Espero que isso te ajude a entender como funciona a interface do VS Code para resolver conflitos do Git, e também te apresente uma forma de conseguir gerar conflitos, permitindo que você possa praticar.

Para mais informações você pode ver a documentação oficial.

Obrigado por ler, e até o próximo artigo!

artigos

Veja mais


Comentários:

Carregando...