DEV Community

Cover image for How to Resolve Merge Conflicts Using the Merge Editor Feature on VS Code
Ayu Adiati
Ayu Adiati

Posted on • Originally published at adiati.com

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".

Git Merge Editor setting on VS Code

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.

Conflicted files on VS Code

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.

Resolve in Merge Editor button at VS Code

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.

Merge Editor feature at VS Code

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.

Acceptance options in Merge Editor

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.

Removal options in the Result box of Merge Editor in VS Code

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

Reset to base option in the Result box in Merge Editor

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.

Complete Merge button on Merge Editor at VS Code

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! 😊

Top comments (2)

Collapse
 
emmamegan profile image
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.

Collapse
 
adiatiayu profile image
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.