Resolve Merge Conflicts Like a Pro (using VSCode)

Merge conflicts are part of being a developer, so getting good at resolving them is time well spent. In this post, you'll learn how to resolve conflicts like a pro using built-in features in VSCode, exemplified using a concrete case.

Before we continue, I assume you already know what a three-way merge is and why conflicts occur in the first place. If not, take a breather and check out this post, The Magic of 3-Way Merge.

Now, through a typical case, let's see how VSCode can resolve those dreaded conflicts swiftly!

‌A typical case

The most common case of merge conflicts is when two developers in the same team make parallel changes to the same section of the same file but in different branches. Whoever finishes last is left with the joy of resolving conflicts as the branches are integrated. We've all been there!

To concretize, the two developers, Ada and Bob, have produced the following history: they've also touched the same section of a particular file, index.html, through their respective commits.

As you can see, Ada and Bob created and developed one branch each that both stemmed from the same commit f06dc (left side of the illustration above). Ada finished first and merged her branch into main (using the default fast-forward option) before deleting her branch (right-hand side of the illustration above). When Bob later decides to bring Ada's new changes from main into his branch (either using merge or rebase) he'll face resolving conflicting changes.

Let's take on Bob's role and see how to set yourself up for success when faced with a similar situation!

Setting yourself up for success

To efficiently resolve conflicts, you must first use a tool capable of displaying the three-way merge nodes combined with the final result in a single window. VSCode does that!

This is a members-only article. Sign up to get instant access to the rest of this post!