1 00:00:00,390 --> 00:00:02,769 If you're working with a team of developers, 2 00:00:02,769 --> 00:00:06,770 you'll almost certainly encounter merge conflicts from time to time 3 00:00:06,770 --> 00:00:10,589 as you try to integrate your code with other changes made at the 4 00:00:10,589 --> 00:00:12,529 same time on a different branch. 5 00:00:12,529 --> 00:00:16,516 I want to show you how to use tools built into VS Code to help 6 00:00:16,516 --> 00:00:18,803 you quickly resolve those conflicts. 7 00:00:18,803 --> 00:00:23,683 I'm going to start by making a couple of changes to the 8 00:00:23,683 --> 00:00:25,129 index.htm file. 9 00:00:25,129 --> 00:00:29,235 I've already made a couple of changes to this file that 10 00:00:29,235 --> 00:00:32,656 currently only exist in the remote repository. 11 00:00:32,656 --> 00:00:37,244 I'm going to make changes to the same lines here in my local repo 12 00:00:37,244 --> 00:00:39,108 to force a merge conflict. 13 00:00:39,108 --> 00:00:43,598 I'm first going to change the heading on Line 26. Instead 14 00:00:43,598 --> 00:00:45,394 of explore California, 15 00:00:45,394 --> 00:00:55,249 I'll change it to explore our beautiful state. 16 00:00:55,249 --> 00:00:58,413 A little further down on Line 30, 17 00:00:58,413 --> 00:00:59,503 I'll change 18 00:00:59,503 --> 00:01:01,382 "Where do you want to explore?" 19 00:01:01,382 --> 00:01:01,595 to 20 00:01:01,595 --> 00:01:05,386 "What do you want to explore?" 21 00:01:05,386 --> 00:01:10,135 On the source control panel, I'll click the plus sign 22 00:01:10,135 --> 00:01:12,236 to stage those changes 23 00:01:12,236 --> 00:01:19,625 and then add a commit message and click the commit button. 24 00:01:19,625 --> 00:01:24,537 I'll now attempt to merge in changes from the remote 25 00:01:24,537 --> 00:01:25,596 repository. 26 00:01:25,596 --> 00:01:32,915 From the More Actions menu, I'll select "Fetch." 27 00:01:32,915 --> 00:01:37,488 We can tell from the arrows on the sync changes button that there are 28 00:01:37,488 --> 00:01:41,254 changes on the remote that I need to pull into my branch 29 00:01:41,254 --> 00:01:44,734 and local changes that I need to push to the remote. 30 00:01:44,734 --> 00:01:48,753 The sync button will attempt to perform both of those actions. 31 00:01:48,753 --> 00:01:52,288 I just want to focus on merging the remote into my local 32 00:01:52,288 --> 00:01:53,380 branch right now. 33 00:01:53,380 --> 00:02:02,972 So on the source control menu, I'll select "Branch" and then merge. 34 00:02:02,972 --> 00:02:05,366 At the top, 35 00:02:05,366 --> 00:02:08,17 I'm now presented with a list of branches. 36 00:02:08,17 --> 00:02:13,874 I'm going to choose to merge the remote main branch into 37 00:02:13,874 --> 00:02:16,111 my local main branch. 38 00:02:16,111 --> 00:02:19,930 I immediately get a message at the bottom of the window letting me 39 00:02:19,930 --> 00:02:23,808 know there are merge conflicts I need to resolve before committing. 40 00:02:23,808 --> 00:02:26,55 I'll close that 41 00:02:26,55 --> 00:02:31,331 and then click on the file name under the Merge Changes section 42 00:02:31,331 --> 00:02:33,713 of the source control panel. 43 00:02:33,713 --> 00:02:36,751 If you've dealt with merge conflicts before, 44 00:02:36,751 --> 00:02:38,690 this probably looks familiar. 45 00:02:38,690 --> 00:02:42,976 Starting on Line 26 on the line beginning with the less than 46 00:02:42,976 --> 00:02:47,48 symbols, are the changes that were made in my local branch. 47 00:02:47,48 --> 00:02:51,784 The conflicting changes from the incoming branch appear below 48 00:02:51,784 --> 00:02:55,888 the equal signs on Line 32 and extend to the greater 49 00:02:55,888 --> 00:02:57,782 than symbols on Line 38. 50 00:02:57,782 --> 00:03:00,934 If I wanted to, I could manually edit this file 51 00:03:00,934 --> 00:03:02,579 to remove the conflicts. 52 00:03:02,579 --> 00:03:06,03 That would include identifying exactly what's different, 53 00:03:06,03 --> 00:03:10,474 changing it to what I really want, and removing the Git markers that 54 00:03:10,474 --> 00:03:12,209 delineate the differences. 55 00:03:12,209 --> 00:03:15,368 At that point, I could stage and commit the changes to 56 00:03:15,368 --> 00:03:16,522 complete the merge. 57 00:03:16,522 --> 00:03:20,267 There's nothing wrong with resolving conflicts like that. 58 00:03:20,267 --> 00:03:24,994 However, you also have the option to click the "Resolve in Merge Editor" 59 00:03:24,994 --> 00:03:29,35 button in the lower right corner of the screen. 60 00:03:29,35 --> 00:03:33,721 That opens up a split editor that I think makes it a little easier 61 00:03:33,721 --> 00:03:38,262 to spot the differences and decide how you want to resolve them. 62 00:03:38,262 --> 00:03:41,420 The top half of the screen is split down the middle. 63 00:03:41,420 --> 00:03:44,944 The left side contains the incoming changes from the 64 00:03:44,944 --> 00:03:46,603 branch I'm merging from. 65 00:03:46,603 --> 00:03:50,168 The right side contains the changes of my current 66 00:03:50,168 --> 00:03:51,134 local branch. 67 00:03:51,134 --> 00:03:55,133 The current conflict is surrounded by a small orange border, 68 00:03:55,133 --> 00:03:58,500 and some additional background color helps me spot the 69 00:03:58,500 --> 00:03:59,834 specific differences. 70 00:03:59,834 --> 00:04:03,192 The bottom half of the screen shows the result of my 71 00:04:03,192 --> 00:04:04,312 merged decisions 72 00:04:04,312 --> 00:04:08,625 and a counter on the top right of that panel lets me know I have two 73 00:04:08,625 --> 00:04:10,428 conflicts I need to resolve. 74 00:04:10,428 --> 00:04:15,69 Let's review the first conflict. Just above each change, are links I 75 00:04:15,69 --> 00:04:17,283 can click to resolve the merge. 76 00:04:17,283 --> 00:04:21,90 I could choose to accept the incoming merge, 77 00:04:21,90 --> 00:04:25,586 accept a combination of the two changes, 78 00:04:25,586 --> 00:04:28,921 or ignore the change. 79 00:04:28,921 --> 00:04:32,800 I have the same options above the current changes on the right. 80 00:04:32,800 --> 00:04:36,461 For this first conflict, I'm going to choose to accept 81 00:04:36,461 --> 00:04:39,224 the incoming change, so I'll click "Accept Incoming" 82 00:04:39,224 --> 00:04:40,467 above it. 83 00:04:40,467 --> 00:04:45,190 Notice that the text on Line 26, in the result preview 84 00:04:45,190 --> 00:04:46,437 at the bottom 85 00:04:46,437 --> 00:04:48,903 now shows the incoming change. 86 00:04:48,903 --> 00:04:52,968 Also, notice that the conflict counter at the top of this pane 87 00:04:52,968 --> 00:04:56,366 now lets me know I only have one conflict remaining. 88 00:04:56,366 --> 00:05:00,772 I'll scroll down a little so I can see the remaining conflict. 89 00:05:00,772 --> 00:05:01,966 For this one, 90 00:05:01,966 --> 00:05:04,666 I think I just want to keep the original heading, 91 00:05:04,666 --> 00:05:09,776 so I'm going to click the "Ignore" link above both the incoming 92 00:05:09,776 --> 00:05:11,480 and current changes. 93 00:05:11,480 --> 00:05:16,166 That left the original heading in the result preview at the bottom 94 00:05:16,166 --> 00:05:20,275 and the conflict counter now reports I have zero conflicts 95 00:05:20,275 --> 00:05:20,996 remaining. 96 00:05:20,996 --> 00:05:25,313 Therefore, I can now click the "Complete Merge" button in the 97 00:05:25,313 --> 00:05:27,844 bottom right corner of the screen. 98 00:05:27,844 --> 00:05:32,438 That closes the merge editor and stages the changed file. 99 00:05:32,438 --> 00:05:35,823 There's already a good default commit message in the 100 00:05:35,823 --> 00:05:37,150 text box at the top, 101 00:05:37,150 --> 00:05:41,436 so I'll just click the "Commit" button to complete the merge 102 00:05:41,436 --> 00:05:43,165 and commit the changes. 103 00:05:43,165 --> 00:05:47,449 The sync button now reports I have two commits ready to be 104 00:05:47,449 --> 00:05:51,582 pushed to the remote, so I'll also go ahead and do that. 105 00:05:51,582 --> 00:05:54,850 I'll confirm that's what I want to do. 106 00:05:54,850 --> 00:05:59,86 And again, I have a clean working branch ready for my next 107 00:05:59,86 --> 00:06:00,349 batch of changes. 108 00:06:00,349 --> 00:06:03,864 Merge conflicts in Git, especially if you're using 109 00:06:03,864 --> 00:06:06,519 the command line, can be confusing and 110 00:06:06,519 --> 00:06:07,810 hard to interpret. 111 00:06:07,810 --> 00:06:12,87 Using the visual tools built into VS code make it a little easier to 112 00:06:12,87 --> 00:06:15,853 resolve those conflicts so you can get back to writing code. 113 00:06:15,853 --> 00:06:19,648 Even though working with Git in a terminal can occasionally 114 00:06:19,648 --> 00:06:22,854 be frustrating, the terminal is still an important 115 00:06:22,854 --> 00:06:25,79 tool for every software developer. 116 00:06:25,79 --> 00:06:29,65 Coming up, I'll show you how to save some time and take advantage 117 00:06:29,65 --> 00:06:32,00 of the terminal built in to Visual Studio Code.