Source control, version control, backing up whatever you choose to
call it. It's all about keeping track of code and
files overtime.
Git is a program for managing source code, while GitHub
hosts a copy of that code and repository online. Now,
Visual Studio code makes the process of using Git and
GitHub easy, and in this video I'll show you the
steps involved. But before we get started, do note that
this video assumes you have Git installed, which you can
find on this site here. With that out the way
the first step to use Visual Studio code with Git
is to initialize
a folder to reflect your repository. So, let me open
up an existing folder with some files in it and
then go to source control.
And click initialize repository. Now notice at the bottom left
hand corner that the branch is named Main. But if
you needed to rename it, you can simply open the
command palette: Shift+Command+P
And type rename and let's say we want to call
it test branch.
And just hit enter.
And now you'll see it reflected below.
But I'm going to rename it back just as easily.
to main.
Now after initialization, you'll see that in the source control
panel that my new file shows up with the letter 'U' beside it and 'U' stands for untracked file, meaning
a file that is new or changed but has not
been added to the repository. So to track it I
can just click the + sign next to the index .html
and now it is what's referred to as stage.
Now once added the letter next to the file will
change to a which represents a new file has been
added to the repository and the next step.
Would be too committed and all I need to do
is add a message such as first commit.
And in general it will just describe whatever changes that
you make. It's for informational purposes and to submit it
I'll just hit the check mark right above it, or
right now we're on our main branch, but if this
is a real application and we need to add new
code, new features, for example, we want to create a
separate branch to do that by going to the command
Palette, Shift command, P.
And I already have the option here to create branch,
but you could also just start typing in create branch.
I'll call this new features.
And the bottom left hand corner reflects that now.
And I'll add 2 lines of code that reflects my
new features.
One for warning and one for danger. Now you'll notice when
I add the code on the left hand side, there's
this area called 'gutter' for new lines of data, it's
reflected by a green line for change lines of data.
It's reflected by a shaded blue line, so let's say
if I added exclamation points on line 4, you'll see
a shaded blue line.
And if I deleted a line like line 10, it'll
be reflected by a red arrow, but I'm going to
put that line back.
Now, right under the word changes, you'll see I have
some icons here to open the file.
Discard changes that I've made.
I can stage my changes and this is all for
one file, but if I had multiple files then I
can go ahead and discard all my changes or stage
all my changes. Now Visual Studio code also has the
ability to perform a diff on files to compare files
side-by-side. Typically you would need to have a separate tool to
do this, but it's built in and to see our
changes side by side we just need to click on
our file. But this time I also want to show
you that...
you can see all the changes in one file so
if we go to the upper right hand corner here
and choose inline view, it consolidates them.
And within here we can also make changes so I
can add some exclamation points here if I wanted to.
Now if I want to stage my changes I can
come up here and click the + and add a
message called added features and commit it and remember now at
the bottom left hand corner it still says new features
and that's the only branch that's affected so I can
click here and switch to main branch.
And this is how the code was originally.
Now, if I want the new code to be reflected
in the main branch, I need to merge
by going to these three dots here, going to branch
merge branch, it'll ask me from where and I want
to select from our new features branch and now our
main branch has the reflected changes.
So now let's say we actually want to publish this
to GitHub. All we need to do is go to
publish branch.
It's going to prompt us that this extension GitHub wants
to sign in using GitHub. I'll hit allow and then
an authentication process will start. I'll hit continue at this
prompt.
And over here I'll give permission for GitHub to open
up Visual Studio Code.
That'll ask me for permission for this extension to open
the URL. I'll click open.
And now I can select whether I want a public
or private repository. We'll go ahead and choose public.
And it begins the publishing process to GitHub and then
prompts me to open up and there we go
I could see the file that we've been working on.
Now let's say I wanted to clone a repository and
I want it to clone my repo.
All I need to do is click on code.
Copy the URL, open up the command Palette, Shift+Command+P
and enter in clone, select Git clone. I'll paste
the URL and clone from this URL and now all
I need to do is specify where I wanted clone
and I'll select this location here, along with my other
projects as the repository location and when it asked me
would I like to open the clone repository, I'll say
yes and it's as simple as that and that's it
really for the most common
ways developers use Git. Creating a repository and branch staging
and committing changes, pushing code UI and merging branches and
cloning existing projects. And yes, there are some more involved
topics, but what we covered or what you'll likely be
doing most frequently. But to learn more about using Visual
Studio Code with Git along with other source control topics,
check out the links in the description below and subscribe
for future videos.