How to Resolve Merge Conflicts Using the Merge Editor Feature on VS Code

Hi friends 👋,

When you encounter merge conflicts, where do you resolve them? Directly on GitHub or in your code editor? If you use VS Code, do you know that it has a built-in feature called "Merge Editor" that you can use to resolve conflicts?

In this article, I will walk you through how to resolve merge conflicts in VS Code using this feature.

Prerequisite

• You can download and install VS Code on your local machine if you haven't.

• This tutorial assumes that you have updated your local working branch with the latest changes from the main branch of the upstream repository.

  If you need help updating your branch, read the "How to Keep the Branches Up to Date" section of my article on freeCodeCamp.

Enable the Feature

Before using the Merge Editor, you need to ensure that the feature is enabled in your VS Code.

Follow these steps to enable it:

• Click the gear icon "Manage" at the bottom on the sidebar, then click "Settings". Alternatively, press Ctrl + , for the shortcut.

• Type "git merge editor" in the search bar.

• Check the "Open the merge editor for files that are currently under conflict" checkbox under the "Git: Merge Editor".

Resolving the Merge Conflicts with the Merge Editor

After updating your working branch, open the file(s) with conflicts. The conflicted file(s) has an exclamation mark (!) beside the file(s) name, as shown in the image below.

Then, follow these steps to resolve the merge conflicts in the Merge Editor:

Step #1 - Click the "Resolve in Merge Editor" Button

You will see a blue "Resolve in Merge Editor" button at the bottom right.

After clicking the button, you will see the Merge Editor with three parts:

• Left: The incoming changes from the remote main branch.

• Right: Your (current) changes.

• Bottom: The result.

Understanding the Merge Editor

The left (incoming change) and right (current change) parts in the Merge Editor are read-only. And the bottom one (result) is where you can modify the changes.

The conflicted line(s) of code are shown in the yellow box(es) in the Merge Editor. You can see the number of conflicts in the file at the top right (shown in a red circle in the image) of the "Result".

Before resolving the conflicts, the "Result" reflects the base. The base is the state before the changes were made, either at the remote main branch or your branch.

Step #2 - Decide How to Resolve the Conflicts

Now, you need to decide how you want to resolve the conflicts. You can do it manually or by clicking the options:

• Accept Incoming: if you're going to keep the incoming changes.

• Accept Current: if you wish to keep your changes.

• Accept Incoming and Accept Current: if you want to keep both changes.

  Be noted that the order of acceptance matters. Whichever you click first will be on the top.

In some cases, you might as well get these options:

• Accept Combination (Incoming First): if you want to keep both changes but prefer to have the incoming ones at the top first.

• Accept Combination (Current First): if you want to keep both changes but prefer to have your changes come first at the top.

The changes you accept will be reflected in the "Result". You can still remove the incoming and current changes if you need to. You can also modify the changes manually here if necessary.

If you make the changes manually and want to redo resolving the conflicts, you can click "Reset to base".

You can always check the actual file(s) to see the result while resolving the conflicts when you are confused.

If you wish to undo the merge, now is the best time to do it before you complete the merge. You can run the git merge --abort command. This command will abort the merge and return your file to the state before the conflicts.

Step #3 - Complete Merge

After resolving the conflicts, click the blue "Complete Merge" button that you can find at the bottom right.

If you still have conflicts in another file(s), repeat the steps to resolve them.

And that's it! Now, you can commit and push your changes to your remote branch.

Final Words

Whichever ways you are using to resolve the conflicts, you want to always recheck your changes before committing.

You can read my article on freeCodecamp, "How to Keep Branches Up-to-Date and Resolve Merge Conflicts in GitHub and VS Code, " to learn more about keeping branches up-to-date and resolving conflicts on GitHub and VS Code.

---

🖼️ Credit cover image: unDraw

Thank you for reading! Last, you can find me on X, Mastodon, and BlueSky. Let's connect! 😊

Comments

[Emma Megan]

This tutorial on resolving merge conflicts using the Merge Editor Feature on VS Code is an absolute lifesaver! The step-by-step guidance provided here is clear and concise, making what could be a daunting process seem surprisingly manageable. I love how the article delves into the specifics of the VS Code Merge Editor, offering practical insights that are incredibly helpful for someone like me who is navigating through merge conflicts.

[Ayu Adiati]

Thank you for reading and for the feedback @emmamegan! 😄

You can check my latest post on freeCodeCamp, How to Keep Branches Up-to-Date and Resolve Merge Conflicts in GitHub and VS Code, if you need help on that too.