Visual Studio Code provides integration with the Git source
control system right out of the box.
However, it's important to know that it does not include
Git itself.
You'll still need to install that yourself if it wasn't
pre-installed on your operating system.
Once you have Git installed and you have a project open,
you can access the source control features by clicking the source
control icon on the activity bar.
This project doesn't currently have an associated Git repository,
but I can easily create one by just clicking the
"Initialize Repository" button.
That created a new repository and added all of the files in this
project as untracked files.
That's what the little green U next to each file means.
Clicking on a file in the source control panel will open a
diff view of the file, showing how it's changed since the
last time it was committed to the repository.
Since I just created the repository and this file hasn't
been committed yet,
all of the contents are effectively new and shown on the
right side of the diff view.
Hovering over file names on the source control panel reveals some
additional actions you can take.
The first icon beside the file name is the open file icon.
Clicking it will open the file in a normal editor window.
The next icon lets you discard any changes you've made to that file.
The plus sign to the right of that lets you stage the changes
for the file.
I want to go ahead and perform an initial commit of all the
files in the project.
I can add a commit message to the text box to the top.
I'll just add the text, "initial commit."
I'll then click the big blue commit button.
I then get a warning letting me know I haven't staged any
changes to be committed.
However, it's helpfully offering to stage all of my changes
and commit them directly.
That's what I'll choose to do.
After a couple of seconds, all of those changes are committed
and with no more pending changes, no files are shown on the
source control panel.
My newly created repository contains a single branch
named main.
The current branch is displayed on the status bar at the bottom
of the screen.
Clicking on it opens the command palette with options for me to
switch to another branch or create a new one.
Since I only have one branch right now,
I'll create a new one named site_updates.
I'll just make a quick change to some of the text on the
home page. On Line 30,
I'll change this heading
from
"Where do you want to go?" to say, "Where do you want to explore?"
As soon as the file is auto-saved, it appears on the source control
panel with the letter M next to it to let us know it's been modified.
I'll click the plus icon beside it to stage it.
I'll then type a new commit message and click the
commit button.
Let's now merge the changes from this branch back into
the main branch.
I'll again click on the current branch name in the status bar.
On the pop-up at the top,
I'll click on "Main" to switch back to it.
As with most commands in VS Code, there are several ways to find
and run Git commands.
You can search for them in the command palette,
but another handy option is to click the three dots at the top
of the source control panel.
That opens a source control menu with lots of commands that should
look familiar to you
if you use Git to manage the source code for your projects.
I'll go to the branch option and then click on "Merge."
That opens a pop-up at the top where I can select the branch
I want to merge from.
I'll select the "site_updates" branch.
The changes were merged with no conflicts,
and you can see the updated heading now appears on Line 30
here in the main branch.
So far, I've covered a few of the most common Git task,
but everything I've done has only applied to my local repository.
Up next, I'll show you how to configure and work with remote
repositories inside VS Code.