How to Use Version Control in Visual Studio Code

Version control (or source control) is the practice of tracking and managing changes to the code. Different version control tools are available like Git, CVS, GitLab, Team Foundation Server, Subversion, Perforce, etc. This guide will look at using Version Control in Visual Studio Code.

Note: VS Code only has built-in support for Git.

Using Version Control with Git

Git support

VS Code has built-in integration for Git. You are not required to install any extension if you’re using Git as a version control provider. This guide will walk you through the Git support in VS Code.

Download and Install Git

You’ll need to have Git installed on your computer. You can visit git-scm.com/downloads. Download the executable for your operating system. Then, run it with default settings.

Project Folder

Now that Git is installed, it’s time to add Git to a project. You’ll need a project folder on your local computer. This folder will contain all of your repository files. In my case, I have created a project folder named “Test” on the desktop. Head over to this article to learn how to create a new project.

Initializing a repository

To add Git to an existing project folder, you’ll have to initialize a new Git repository. A Git repository is a virtual storage of your project. Do the following:

1. Open an existing project folder in VS Code.

   

2. From the sidebar, click on the Source Control tab. Then, select the Initialize Repository button.

   

3. You can see that I have two changes in the Source Control view.

Commit

Commit will record the changes that you have made on your local computer. It also allows you to include any comment for that particular change. To commit the changes, do the following:

Commit will save your changes to the local repository. It won’t save changes to the remote repository like GitHub. Therefore, other users will not be able to pull/see your changes. You’ll need to push the changes to a remote repository like GitHub. Keep reading the article; you will find the solution below.

GitHub

You’ll need to connect to A remote repository, such as GitHub. Go to github.com, and sign in to your account.

Push

Pushing code to a remote repository means moving your committed changes from a local repository to a remote repository, i.e., GitHub. Pushing a code is a 3 step process. Do the following:

Step 1: Creating a repository

To create a repository, follow the below steps:

1. Click on the + icon in the upper-right corner and select New repository.

   

2. Enter a name to the repository and click on the Create Repository button.

   

3. Click on the Code button and copy the path.

   

Step 2: Adding a remote repository

To add a remote repository in the VS Code, do the following:

1. From the top-level View menu, select the Command Palette. Alternatively, use the following shortcuts on your system:
   Ctrl + Shift + P on Windows and Linux
   Cmd + Shift + P on Mac

   

2. Choose the Add Remote option.

   

3. Paste the copied URL and press Enter.

   

4. Enter a remote name and press Enter.

   

Step 3: Pushing Code

To Push the code from VS Code to GitHub, do the following:

1. Click on the Overflow button with the ellipsis icon inside the Source Control panel. Then, from the Pull, Push menu option, select Push to.

   

2. On the top center, a palette will appear. Select the GitHub repository URL.

   

3. Finally, refresh your GitHub repository URL, and you’ll notice the files pushed from the local repository to your remote repository.

   

Cloning a repository

Cloning a repository means downloading the entire repository from a remote repository, i.e., from GitHub, to the local repository. Do the following:

Step 1: Get the Repository URL

To clone a repository, you’ll first need the repository URL. Follow the below steps:

1. From the “profile” icon in the upper-right corner, select Your Repositories. It will show all the repositories in your GitHub account.

   

2. Select the repository that you wish to clone to your computer. You’ll see your repository and the files within it.

   

3. Click on the code button and copy the path. That’s the path to clone your repository directly to the VS Code.

   

Step 2: Clone the GitHub Repository in VS Code

1. Select the Source Control icon from the sidebar and choose the Clone Repository option. It will open a command palette.

   

2. Paste the copied URL and press Enter.

   

3. Select the directory where you want to place the clone. I’m cloning it on the desktop.

   

4. A message will appear to open the cloned repository. Click on Open.

   

5. When done, Visual Studio Code will switch views, and in the top-left corner, you can see the repository folder and the files inside it.

   

Create a branch

In the bottom-left corner, you can see in which branch you are. By default, you’ll be in the main branch. If you successfully create a new branch, you will notice the name of the newly created branch here.

To create a new branch, follow the below steps:

1. From the top-level View menu, select the Command Palette option. Alternatively, press Ctrl + Shift + P.

   

2. Select the Git Create Branch option.

   

3. Enter a name for the branch.

   

Switch a branch

If you want to switch branches, do the following:

1. Open the Command Palette.

   

2. Select the Git Checkout to option.

   

3. Select the branch you want to switch to.

   

Timeline View

Timeline View shows the history of events that occurred in your file. These events can be Git commits or file saves. You can access the timeline view from the bottom of the Explorer tab.

Using Version Control with Extensions

If you would like to use a Version Control other than Git, you require the particular version provider’s extension. Do the following:

1. Click on the Extensions tab or press Ctrl + Shift + X.

   

2. Type @category:”scm providers”. You’ll see all the available version control providers.

   

3. Choose the version control provider and click on the Install button.