You are Fixing your Merge Conflicts The Wrong Way in VSCode

if you're tired from fixing your merge conflicts in vs code in this classic pretty bad way when you got like current change and you're going to figure out the incoming change and just like super cumbersome and it doesn't make a lot of sense for you well in this particular video we're gonna see how you can move from this classic old way of fixing merge conflicts into a really new awesome editor from vs code which offers a really awesome nicer features something like this where you can just like have three views you can easily fix your merge conflicts you can easily see what's going on in here it's super nice and in fact this new merge editor is going to allow you to fix your merge conflict like a pro so we've all been through the messiness of actually trying to resolve multiple merge conflicts and bunch of files when it should just actually merged like one branch into a different branch or maybe you're collaborating with another team member and you're just getting everything messed up and if we try to do this on the command line or using a terminal I mean yeah it's gonna be just super messy also if we try to use like vs code which is the old version of vs code or the old merge editor vs code you're not going to get the best out of it either but with the new vs code release on June 2022 on version 169 they have actually introduced a pretty awesome version or a pretty awesome tool that's going to allow you to resolve your merge conflict even faster and even easier so let's take a look on how we can actually use this new three-way merge editor thing and how could it be super beneficial for us and just like take a quick look and like on action how we can fix conflicts using this new and as conclusion here we got two branches we got our main branch in here and we got our new feature brush which is obviously want to take this new feature branch and we're gonna merge it right into the main brand but the problem in here obviously they are not compatible and they're gonna cause merge conflicts so if you quickly just take a look in here and try to compare the main brush which is you know the current head in here I go to this one I do compare with hand it screws he converts with the hand is going to give you the comparison so screws in here the main branch is the head with three commands from the new feature branch and is behind four commands from the new feature branch and before starting actually the merge of our new feature Branch I just want to look at what the application looks like before doing that so you can clearly see or compare it before and after so for this we like we have no navigation we only got a single page we can actually just we don't have a multi-piece sort of application we don't have a navigation bar and we got our button here like a green button and we are applying some price filters so any product that is below the hundred dollars it's not going to show up so it's only going to show up um 100 and up so all these products includes in here are plus hundred dollars so if you want to merge just get merge and I'm gonna do the new feature so I'm going to merge of the new feature into the main branch Okay click on this and excuse in here I already got a bunch of conflicts I think I got three conflicts for these files and if I look from the left side in here so let's say I wanna okay I want to actually fix my conflicts and I want to go ahead and see exactly what's happening so if I click on it on videos code this is how I usually see it in vs code and this is like the classic way to fix or handle merge conflicts so we are all like familiar with this way I mean this is fine for most cases if the file is actually small and it like it makes sense to do that but sometimes you find it super hard and super complicated to actually figure out which one to accept or maybe you want to accept both which sometimes it doesn't actually work it doesn't preview the changes like in a really good way and it doesn't show you like before and after in a really good way either and that's where the new awesome three-way merge editor actually comes into the place so if you look right down or the right hand corner in here as you can see this resolve in merge editor which is this is actually the like how you enable the new merge editor with the three-way merge editor like the new one if you click on it so actually show shows you three views which makes it super easy for us so the first one let's curiously like this this one from the left hand side on the top you're gonna see this is actually the new feature Branch so it shows you the changes that are coming from the new feature range particularly on this commit and this one is going to be the incoming stuff that's gonna you know come to our main brush in here the second one which is the current of obviously we are in the main branch that means we are in the current so this is it tells you exactly oh this is the main branch these are the changes that are currently in the main branch and the awesome part as well with this as you can see whenever you selects something it selects everything in here and as I scroll all the area structure you're going to scroll the same time it makes it super easy actually to follow and actually immerse the conflicts in here and seriously it's going to give us this whitish sort of Border or kind of like square or rectangular it tells you exactly like where we're going to need to focus on this so for example in here let's say oh I'm gonna accept the incoming I don't need the current so I click on accepting comment in here I was cruising it immediately shows up instead of the current warning like you know you have in here you can even accept the currency here it's gonna like accept both it's going to do incoming plus currents and as previously you see both changes but okay I don't want to like I don't want the currency here when I completely remove this one uh so if I move a little bit down here as you see I completely added these new ones so he tells you exactly oh which one you want to accept so I'm gonna you can accept combination and this kind of like figures out uh exactly what's going on so everything's not doing except the combination exclusive keeps one part from here and just keeps the other parts or you can remove both like a current in here and you only want to keep them coming so yeah this this actually is going to make it super cool and excuse in here from the top right hand corner you can clearly see that oh there's zero conflicts remaining so it tells you the progress if you're like fixing the conflicts and everything and you can easily track how many conflicts are left for you two things or if you're just done with all the conflicts and exclusion here if I click on this one exclusive it's going to take me exactly to like the classic old view in here not like the new one I've been seeing in here and that's exactly because this like the three-way merge editor isn't enabled by default for all files so to make sure you enable that you go to settings or user settings and you actually search for the merge editor on top here and this one's just going to give you like oh gits merge editor so you want to just make sure you select this one and this will make it actually by default gonna pop off for everything so if I close this one I'm just going to get back into it as you can see I'm gonna just have the chance to get like the merge editing here for all my conflicted files and screws in here for a different file let's say we got some filters in here we got like the incoming from new feature I'm now filtering by weight while before I was filtering by price so this is actually the conflicts in here and you can either accept one or the other uh you can exactly see like which one you want to do so you can accept combination of both uh so you can just like have both filters which you know obviously it doesn't make sense for that case either so for us in here I just want to accept the um okay I want to just go through accepting currency here so I'm going to like feel those products if I scroll a little bit down as can you see this filters products and filters products by Price okay I want to accept the currents because you know they have to work together in here and immediately shows you what you have accepted in here and it tells you exactly and the top in here tells you oh you've accepted current and you can easily remove Queens if you ever want to and Hallelujah so by just doing three of these files in here we're done with the merge compost and if you quickly look just take a look in the application after the merge and everything this is what it looks like now we got a pretty nice way because now we've been able to like uh we got all the features we need we got the routers from our new feature Branch we got like something like the price filter in here from the current branch which obviously like I want to only get up like a minimum a hundred dollars sorry filter by price in here and it's basically showing us everything we want so anyway guys thank you guys for watching I really hope you guys enjoy the new all of some vs code for you way merge editor and uh yeah so without you guys catch you hopefully in the next ones

Channel: CoderOne

Views: 66,346

Keywords: vscode, vscode merge, git conflicts, git merge conflicts, merge conflicts, vscode pro, vscode react, react vscode, master vscode, learn vscode, 3 way merge editor, merge editor, vscode merge editor, fix merge conflicts, vscode merge conflicts, merge conflicts vscode, vscode javascript, vscode beginners, vscode git, vscode source controls, git vscode

Id: KuB6hYoLozw

Length: 8min 11sec (491 seconds)

Published: Mon Dec 05 2022