The EXTREMELY helpful guide to merge conflicts

I've been using git for about 15 years and I thought I knew what a merge conflict was then I tried to make this video explaining merge conflicts and I realized I have no idea what I'm doing which is great because merge conflicts have always been confusing for me and now I understand why so in this video we're going to use the new merge editor experience in Visual Studio code and I'm going to show you why you might not fully understand what emerged conflict is and together we're going to become masters of the merge you've seen this before you've got the current change which is your commit and you've got the incoming change which is the other person's commit and that's the merge conflict right well yes but that's actually only part of the bigger picture there's actually a third commit in the mix here that's called the base and it is the common ancestor of both your change and the change that you have a conflict with now this made zero sense to me the first time I heard so let's look at a little demonstration let's say you have a main branch each time you change the main branch you make a commit now let's say at this point you decide to make a feature Branch to do some other work that branch is Created from the main branch at this commit right here commit number two while you are working on your feature Branch let's assume that other people make changes to the main branch with commits three and four and some of those changes are on the same lines that you changed in your feature branch the common ancestor or base between your branch and the current commit on the main branch is commit number two now why does this matter when you try and merge your feature Branch back into main git Compares your commit with the base that's how it knows that you've changed something it also compares the current commit on Main which is the incoming change with the base and it sees that your feature branch and the current commit both change the same line and that's how you end up with a merge conflict okay let's see how this plays out in real life using visual studio code by default vs code displays a merge conflict as two sets of changes in the same file you can use the buttons to accept your change except the incoming change or just take both changes and resolve it yourself in this experience you don't actually see the base that git is using for the comparison it hides all that from you so all you see are your changes and the incoming changes this experience works very well when you know exactly what you want for instance in this case we can see that in one change they're single quotes and then the other chains there's backticks we can easily discern that we want either single quotes or backticks and accept that change in this second change it's not that simple there's a lot of changes here and they look very similar and it's very hard to reason about which change we want to keep which change we don't want to keep and which change we want to combine and maybe we don't want any of these changes but we don't know because we can't actually see the base we only have part of the picture we only know what the changes are not what the actual state was that we changed from and this is why merged conflicts are so frustrating so vs code has introduced a brand new merge editor experience where you can actually see the base you can toggle into the new merge editor experience by clicking the resolve in merge editor button when you click this button you'll see that you now have three views here your changes which are also called current the changes that you're in conflict with also called incoming and a preview panel down at the bottom with the new merge editor you use the top two panes to resolve conflicts building up a result that you can preview and edit before you accept the merge the result pane here is what actually gets staged on your disk after the merge is completed okay but what about the base the base can be toggled on and off from the Ellipsis menu here you can either display it at the top or in the middle of the current and incoming changes if you put your mouse on the right hand side you can see how the current changes differ from the base in this case I added a log statement I changed the numbering on the parameters I change the log statement at the bottom and I deleted One log statement and if we put the cursor on the incoming changes we can see how those differ from the base the params are the same here but a log statement was added one was changed and one was deleted down below here now if this is too busy for you you can also just compare the incoming and base by selecting compare with base and you'll see just your changes in the base the base appears on the left and your changes appear on the right you can do the same thing with the incoming changes so what do we actually want here well this is a contrived example but if we look at this first conflict let's say that yes we do want this log statement and although the way we're setting the parameters here is ultimately the same outcome we like the way we're doing it in the current change so in this case it's pretty simple we just select accept current but then let's say we decide actually we do want this extra log statement from the incoming change in that case we can revert this and say remove current in the preview and since we want both log statements we can click accept combination on either the left or the right when we do this vs code will smartly combine the changes for us if you don't see the accept combination that's because vs code cannot automatically combine your changes and this preview area here is editable so let's say we accept the combination and then we decide that we do not want this extra logging statement well we can just remove it right here in the preview now notice the second conflict here in this case we might decide that the way that the base is doing this is actually what we want neither my changes or the incoming changes are better than what's in the base because our preview shows the base by default we can just ignore both the current and incoming changes which just gives us what's in the base already when we do that our conflicts remaining counter goes to zero so we know that we've handled all of the conflicts in the case that you want to just accept all of the changes from either the left or the right you can click the Ellipsis at the top and select accept all changes from left or accept all changes from right when you've handled all the conflicts click the complete merge button to Stage the file and if you want to go back to the inline experience it's in the original file so you can just close this and reopen that file note that if you save as you go or if you have auto save on you'll need to undo that in order to get back to the original merge state which is the command or control Z and as a final tip if you just want to cancel a merge all together at any point you can choose abort merge from the command palette I hope this video has given you greater insight into what a merge conflict actually is because if you can understand the concept of the base you'll find that merge conflicts are much less frustrating and they make a whole lot more sense in the new merch editor experience in Visual Studio code by the way this interface where you have the current base and incoming changes it's also called a three-way merge and now you know what that is and you can brag about it at parties if that's the kind of thing that you talk about at the parties that you go to hey if you liked this video like this video And subscribe and check out some of these other videos you'll love them guaranteed

Channel: Visual Studio Code

Views: 40,021

Keywords: vscode, visual studio code, vs code

Id: HosPml1qkrg

Length: 8min 21sec (501 seconds)

Published: Tue Dec 06 2022