Skip to main content

How to Use VS Code to Resolve Conflicts

Omer RosenbaumApril 28, 2023About 2 minGitArticle(s)blogfreecodecamp.orggit

How to Use VS Code to Resolve Conflicts κ΄€λ ¨

The Git Merge Handbook – Definitive Guide to Merging in Git

By reading this post, you are going to really understand git merge, one of the most common operations you'll perform in your Git repositories. Notes before we start I also created two videos covering the contents of this post. If you wish to watch a...

The Git Merge Handbook – Definitive Guide to Merging in Git
By reading this post, you are going to really understand git merge, one of the most common operations you'll perform in your Git repositories. Notes before we start I also created two videos covering the contents of this post. If you wish to watch a...

I will show you now how to resolve the same conflict using a graphical tool. For this example, I will use VS Code, which is free and very common. There are many other tools, yet the process is similar, so I will just show VS Code as an example.

First, get back to the state before the merge:

git reset --hard HEAD~

And try to merge again:

git merge paul_branch_4

You should be back at the same status:

Back at the conflicting status<br/><Source: <FontIcon icon="fa-brands fa-youtube"/>Brief>
Back at the conflicting status
<Source: Brief>

Let's see how this appears on VS Code:

Conflict resolution with VS Code<br/><Source: <FontIcon icon="fa-brands fa-youtube"/>Brief>
Conflict resolution with VS Code
<Source: Brief>

VS Code marks the different versions with "Current Change" – which is the "ours" version, the current HEAD, and "Incoming Change" for the branch we are merging into the active branch. You can accept one of the changes (or both) by clicking on one of the options.

If you clicked on Resolve in Merge editor, you would get a more visual view of the state. VS Code shows the status of each line:

VS Code's Merge Editor<br/><Source: <FontIcon icon="fa-brands fa-youtube"/>Brief>
VS Code's Merge Editor
<Source: Brief>

If you look closely, you will see that VS Code shows changes within words – for example, showing that "Everyone" was changed to "Everybody", marking the changed parts.

You can accept either version, or you can accept a combination. In this case, if you click on "Accept Combination", you get this result:

VS Code's Merge Editor after clicking on "Accept Combination"<br/><Source: <FontIcon icon="fa-brands fa-youtube"/>Brief>
VS Code's Merge Editor after clicking on "Accept Combination"
<Source: Brief>

VS Code did a really good job! The same three way merge algorithm was implemented here and used on the word level rather than the line level. So VS Code was able to actually resolve this conflict in a rather impressive way. Of course, you can modify VS Code's suggestion, but it provided a very good start.