Resolving Merge Conflicts in Visual Studio Code - The Easy Way

In this post, you will learn about resolving merge conflicts in VSCode.

In every project, we use Git and commit our files to a remote repository. This is totally fine, but sometimes you may find yourself in a situation where you are merging your feature branch and encounter some conflicts. These conflicts can arise from changes in your code or from changes another developer made that Git cannot resolve on its own.

At this moment, we get a merge conflict, and VSCode has an interface to resolve conflicts quite easily. Now, I want to try merging a branch to generate a merge conflict.

We get a message that the merging failed and we need to resolve the conflict ourselves. Resolving conflicts in the console can be uncomfortable, which is why we can do it in VSCode. When we have a merge conflict, a "Resolve in Merge Editor" button appears in the bottom right corner of VSCode.

First, let's open the Git tab.

We are in a merge state because there is a "Merge Changes" section in the left sidebar. When we click on the file, we see the merge conflict. It's a notation with arrows, the word HEAD, and equal signs.

This is typical Git notation and is not specific to VSCode.

These signs help VSCode understand where the conflict is. "HEAD" represents our current branch, and "459-react-debugging-in-vscode-feature" represents the incoming change. VSCode shows this grey text (current branch and incoming change) to make it clear where the changes are coming from.

At the top of the conflict, we have four options: "Accept Current Change," "Accept Incoming Change," "Accept Both Changes," and "Compare Changes."

You must understand that there is no magic inside Git. When accepting the current change, it simply takes the changes from the current branch. When clicking "Accept Incoming Change," it takes the changes from the incoming branch. By accepting both changes, we get all the code together, and VSCode will just remove the Git merge signs.

Let's try clicking "Compare Changes."

This shows the differences between the incoming changes and the current changes. It is really nice to use this view if you don't fully understand what has changed.

When you have a conflict, you can simply select what you need, and you are golden. Then, you scroll down to the next conflict and do it again.

Merge Editor

This is what we had in VSCode previously, but now it is even better. At the bottom right, there is a "Resolve in Merge Editor" button. This special tool allows us to resolve conflicts even more easily.

As you can see, our file BadTable.jsx is activated on the left. On the right, we are resolving conflicts in this file. Here, we have three different sections: Incoming window, Current window, and Result window.

The only interesting window for us is the Result window because this is what we get after merging.

In our conflict, the Result window shows "No Changes Accepted." This happens because we need to click either "Accept Incoming" or "Accept Current" at the top. After selecting the needed change, it will appear in the Result window.

Even after selecting one change, we can additionally select another change, which will bring both of them to the Result window.

After this, we can click "2 conflicts remaining" that we see on the right in the Result window, and we will jump to the next conflict. We select the changes that we need again, and just like that, we merge our conflicts.

When we finish resolving our conflicts, we can commit our changes as always, and we are done.

Want to master Git and version control from the ground up? I highly recommend checking out my Git Training: Step-by-Step Guide to Git Version Control. This course covers all the essential features of Git, helping you build a strong foundation from scratch.