Using Git with VS Code

One of the awesome things about VS Code is that the Git commands are built in. So you are ready to use version control with VS Code straight out the box!

Today, I will be showing you how to use Git in VS Code with the popular version control service: GitHub.

Prerequisites

VS Code and Git are already installed on your machine.

Setup our project

Start up your VS Code and open the command palette. If you’ve read my other articles on VS Code you’ll know that to do so you can hit Ctrl/Cmd + Shift + P to accomplish this.

Type and select Git Clonevscode-git11.png

Followed by your selection, you’ll be prompted to enter your repository URL. vscode-git2.pngOnce you enter the repo to clone, you will be asked where you’d like to save it.

You’ll notice in the status bar, VS Code lets you know it is processing the cloning action.vscode-git2.png

One it has completed the cloning process, you can click the branch icon and a list of the branches available in the repo you just cloned.

vscode-git5.png

List of branches:vscode-git4

To switch to a branch, simply select it from the list of branches. I’ll switch to my feature one branch to show you.

vscode-git5.png

You can setup VS Code to periodically run the git fetch command.

Committing 

We can make some changes and as we do the Version Control tab will update. We can select the files for staging and run the git commit command from the command palette. We will see we have two changes made and will be prompted to give a meaningful commit message.

vscode-git5.png

Check out the status bar. vscode-git5.png

You will notice that we have zero changes to pull, but 1 change to be pushed to our remote repository. We will hit the push and pull option here and see our repo on GitHub get updated.

vscode-git-github.png

So that concludes working the basic git commands with a version control system in VS Code!

Leave a comment below if there is anything you’d like to do but wasn’t addressed in this tutorial! Cheers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s