If you're working with a team of developers,
you'll almost certainly encounter merge conflicts from time to time
as you try to integrate your code with other changes made at the
same time on a different branch.
I want to show you how to use tools built into VS Code to help
you quickly resolve those conflicts.
I'm going to start by making a couple of changes to the
index.htm file.
I've already made a couple of changes to this file that
currently only exist in the remote repository.
I'm going to make changes to the same lines here in my local repo
to force a merge conflict.
I'm first going to change the heading on Line 26. Instead
of explore California,
I'll change it to explore our beautiful state.
A little further down on Line 30,
I'll change
"Where do you want to explore?"
to
"What do you want to explore?"
On the source control panel, I'll click the plus sign
to stage those changes
and then add a commit message and click the commit button.
I'll now attempt to merge in changes from the remote
repository.
From the More Actions menu, I'll select "Fetch."
We can tell from the arrows on the sync changes button that there are
changes on the remote that I need to pull into my branch
and local changes that I need to push to the remote.
The sync button will attempt to perform both of those actions.
I just want to focus on merging the remote into my local
branch right now.
So on the source control menu, I'll select "Branch" and then merge.
At the top,
I'm now presented with a list of branches.
I'm going to choose to merge the remote main branch into
my local main branch.
I immediately get a message at the bottom of the window letting me
know there are merge conflicts I need to resolve before committing.
I'll close that
and then click on the file name under the Merge Changes section
of the source control panel.
If you've dealt with merge conflicts before,
this probably looks familiar.
Starting on Line 26 on the line beginning with the less than
symbols, are the changes that were made in my local branch.
The conflicting changes from the incoming branch appear below
the equal signs on Line 32 and extend to the greater
than symbols on Line 38.
If I wanted to, I could manually edit this file
to remove the conflicts.
That would include identifying exactly what's different,
changing it to what I really want, and removing the Git markers that
delineate the differences.
At that point, I could stage and commit the changes to
complete the merge.
There's nothing wrong with resolving conflicts like that.
However, you also have the option to click the "Resolve in Merge Editor"
button in the lower right corner of the screen.
That opens up a split editor that I think makes it a little easier
to spot the differences and decide how you want to resolve them.
The top half of the screen is split down the middle.
The left side contains the incoming changes from the
branch I'm merging from.
The right side contains the changes of my current
local branch.
The current conflict is surrounded by a small orange border,
and some additional background color helps me spot the
specific differences.
The bottom half of the screen shows the result of my
merged decisions
and a counter on the top right of that panel lets me know I have two
conflicts I need to resolve.
Let's review the first conflict. Just above each change, are links I
can click to resolve the merge.
I could choose to accept the incoming merge,
accept a combination of the two changes,
or ignore the change.
I have the same options above the current changes on the right.
For this first conflict, I'm going to choose to accept
the incoming change, so I'll click "Accept Incoming"
above it.
Notice that the text on Line 26, in the result preview
at the bottom
now shows the incoming change.
Also, notice that the conflict counter at the top of this pane
now lets me know I only have one conflict remaining.
I'll scroll down a little so I can see the remaining conflict.
For this one,
I think I just want to keep the original heading,
so I'm going to click the "Ignore" link above both the incoming
and current changes.
That left the original heading in the result preview at the bottom
and the conflict counter now reports I have zero conflicts
remaining.
Therefore, I can now click the "Complete Merge" button in the
bottom right corner of the screen.
That closes the merge editor and stages the changed file.
There's already a good default commit message in the
text box at the top,
so I'll just click the "Commit" button to complete the merge
and commit the changes.
The sync button now reports I have two commits ready to be
pushed to the remote, so I'll also go ahead and do that.
I'll confirm that's what I want to do.
And again, I have a clean working branch ready for my next
batch of changes.
Merge conflicts in Git, especially if you're using
the command line, can be confusing and
hard to interpret.
Using the visual tools built into VS code make it a little easier to
resolve those conflicts so you can get back to writing code.
Even though working with Git in a terminal can occasionally
be frustrating, the terminal is still an important
tool for every software developer.
Coming up, I'll show you how to save some time and take advantage
of the terminal built in to Visual Studio Code.