In this article we will learn using git with visual studio code. 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 article I’ll show you the steps involved.
But before we get started, do note that this article assumes you have Git installed, which you can find on this site here.
Initialize repository
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.
Rename branch
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.
Committing files
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.
Create new 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.
Gutter overview
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.
Comparing files / inline view
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. 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.
Merging branches
I need to merge by going to these three dots here, going to Branch the 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.
Publish to Github
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.
Clone repository
Now let’s say I wanted to clone a repository and I want it to clone my repository.
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.
This is really the most common ways developers use Git. Creating a repository, branch staging, committing changes, pushing code UI, merging branches, 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 blog link.
