1 00:00:00,410 --> 00:00:04,187 Visual Studio Code provides integration with the Git source 2 00:00:04,187 --> 00:00:06,467 control system right out of the box. 3 00:00:06,467 --> 00:00:10,525 However, it's important to know that it does not include 4 00:00:10,525 --> 00:00:11,337 Git itself. 5 00:00:11,337 --> 00:00:14,852 You'll still need to install that yourself if it wasn't 6 00:00:14,852 --> 00:00:17,325 pre-installed on your operating system. 7 00:00:17,325 --> 00:00:20,997 Once you have Git installed and you have a project open, 8 00:00:20,997 --> 00:00:25,281 you can access the source control features by clicking the source 9 00:00:25,281 --> 00:00:27,490 control icon on the activity bar. 10 00:00:27,490 --> 00:00:31,893 This project doesn't currently have an associated Git repository, 11 00:00:31,893 --> 00:00:37,186 but I can easily create one by just clicking the 12 00:00:37,186 --> 00:00:38,828 "Initialize Repository" button. 13 00:00:38,828 --> 00:00:43,831 That created a new repository and added all of the files in this 14 00:00:43,831 --> 00:00:45,975 project as untracked files. 15 00:00:45,975 --> 00:00:49,581 That's what the little green U next to each file means. 16 00:00:49,581 --> 00:00:53,898 Clicking on a file in the source control panel will open a 17 00:00:53,898 --> 00:00:58,139 diff view of the file, showing how it's changed since the 18 00:00:58,139 --> 00:01:01,472 last time it was committed to the repository. 19 00:01:01,472 --> 00:01:05,411 Since I just created the repository and this file hasn't 20 00:01:05,411 --> 00:01:06,797 been committed yet, 21 00:01:06,797 --> 00:01:10,412 all of the contents are effectively new and shown on the 22 00:01:10,412 --> 00:01:12,252 right side of the diff view. 23 00:01:12,252 --> 00:01:17,296 Hovering over file names on the source control panel reveals some 24 00:01:17,296 --> 00:01:19,818 additional actions you can take. 25 00:01:19,818 --> 00:01:24,594 The first icon beside the file name is the open file icon. 26 00:01:24,594 --> 00:01:29,604 Clicking it will open the file in a normal editor window. 27 00:01:29,604 --> 00:01:34,789 The next icon lets you discard any changes you've made to that file. 28 00:01:34,789 --> 00:01:39,619 The plus sign to the right of that lets you stage the changes 29 00:01:39,619 --> 00:01:40,665 for the file. 30 00:01:40,665 --> 00:01:44,415 I want to go ahead and perform an initial commit of all the 31 00:01:44,415 --> 00:01:45,773 files in the project. 32 00:01:45,773 --> 00:01:49,335 I can add a commit message to the text box to the top. 33 00:01:49,335 --> 00:01:54,353 I'll just add the text, "initial commit." 34 00:01:54,353 --> 00:02:00,471 I'll then click the big blue commit button. 35 00:02:00,471 --> 00:02:04,180 I then get a warning letting me know I haven't staged any 36 00:02:04,180 --> 00:02:05,770 changes to be committed. 37 00:02:05,770 --> 00:02:09,514 However, it's helpfully offering to stage all of my changes 38 00:02:09,514 --> 00:02:11,128 and commit them directly. 39 00:02:11,128 --> 00:02:13,608 That's what I'll choose to do. 40 00:02:13,608 --> 00:02:18,35 After a couple of seconds, all of those changes are committed 41 00:02:18,35 --> 00:02:22,315 and with no more pending changes, no files are shown on the 42 00:02:22,315 --> 00:02:23,865 source control panel. 43 00:02:23,865 --> 00:02:27,875 My newly created repository contains a single branch 44 00:02:27,875 --> 00:02:28,740 named main. 45 00:02:28,740 --> 00:02:32,706 The current branch is displayed on the status bar at the bottom 46 00:02:32,706 --> 00:02:33,602 of the screen. 47 00:02:33,602 --> 00:02:37,990 Clicking on it opens the command palette with options for me to 48 00:02:37,990 --> 00:02:41,104 switch to another branch or create a new one. 49 00:02:41,104 --> 00:02:44,425 Since I only have one branch right now, 50 00:02:44,425 --> 00:02:51,410 I'll create a new one named site_updates. 51 00:02:51,410 --> 00:02:57,215 I'll just make a quick change to some of the text on the 52 00:02:57,215 --> 00:02:59,431 home page. On Line 30, 53 00:02:59,431 --> 00:03:02,140 I'll change this heading 54 00:03:02,140 --> 00:03:02,665 from 55 00:03:02,665 --> 00:03:10,678 "Where do you want to go?" to say, "Where do you want to explore?" 56 00:03:10,678 --> 00:03:15,28 As soon as the file is auto-saved, it appears on the source control 57 00:03:15,28 --> 00:03:19,510 panel with the letter M next to it to let us know it's been modified. 58 00:03:19,510 --> 00:03:23,436 I'll click the plus icon beside it to stage it. 59 00:03:23,436 --> 00:03:30,473 I'll then type a new commit message and click the 60 00:03:30,473 --> 00:03:32,525 commit button. 61 00:03:32,525 --> 00:03:38,956 Let's now merge the changes from this branch back into 62 00:03:38,956 --> 00:03:40,898 the main branch. 63 00:03:40,898 --> 00:03:45,377 I'll again click on the current branch name in the status bar. 64 00:03:45,377 --> 00:03:47,140 On the pop-up at the top, 65 00:03:47,140 --> 00:03:50,818 I'll click on "Main" to switch back to it. 66 00:03:50,818 --> 00:03:55,782 As with most commands in VS Code, there are several ways to find 67 00:03:55,782 --> 00:03:57,437 and run Git commands. 68 00:03:57,437 --> 00:03:59,958 You can search for them in the command palette, 69 00:03:59,958 --> 00:04:04,822 but another handy option is to click the three dots at the top 70 00:04:04,822 --> 00:04:07,54 of the source control panel. 71 00:04:07,54 --> 00:04:11,692 That opens a source control menu with lots of commands that should 72 00:04:11,692 --> 00:04:13,190 look familiar to you 73 00:04:13,190 --> 00:04:16,933 if you use Git to manage the source code for your projects. 74 00:04:16,933 --> 00:04:23,34 I'll go to the branch option and then click on "Merge." 75 00:04:23,34 --> 00:04:28,11 That opens a pop-up at the top where I can select the branch 76 00:04:28,11 --> 00:04:29,783 I want to merge from. 77 00:04:29,783 --> 00:04:34,205 I'll select the "site_updates" branch. 78 00:04:34,205 --> 00:04:37,612 The changes were merged with no conflicts, 79 00:04:37,612 --> 00:04:41,760 and you can see the updated heading now appears on Line 30 80 00:04:41,760 --> 00:04:43,507 here in the main branch. 81 00:04:43,507 --> 00:04:47,206 So far, I've covered a few of the most common Git task, 82 00:04:47,206 --> 00:04:51,936 but everything I've done has only applied to my local repository. 83 00:04:51,936 --> 00:04:55,892 Up next, I'll show you how to configure and work with remote 84 00:04:55,892 --> 00:04:58,00 repositories inside VS Code.