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.

Download Git
Head over to git-scm.com/downloads and download Git.

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.

    Open a project folder
    Open a current project on your local computer.
  2. From the sidebar, click on the Source Control tab. Then, select the Initialize Repository button.

    Initialize Repository
    Next, click on the Initialize Repository button.
  3. You can see that I have two changes in the Source Control view.
Changes
Changes icon on 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
Click on the tick icon on the Source Control view to commit changes.

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.

Github Website
Log in to your GitHub 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.

    New Repository
    From the + icon on the top-right corner, click on New Repository.
  2. Enter a name to the repository and click on the Create Repository button.

    Create a new repository
    Give a name to the repository and then click on the Create Repository button.
  3. Click on the Code button and copy the path.

    Copy the url
    Select the Code button and then Copy the URL.

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

    Command Palette
    Open the Command Palette from the View menu.
  2. Choose the Add Remote option.

    Add Remote
    Click on the Add Remote option.
  3. Paste the copied URL and press Enter.

    Paste URL
    Paste the URL copied from GitHub.
  4. Enter a remote name and press Enter.

    Add Remote Name
    Enter a Remote Name.

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.

    Push to
    From the “Pull, Push” menu option, select the Push to option.
  2. On the top center, a palette will appear. Select the GitHub repository URL.

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

    Pushed Files
    Refresh 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.

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

    Select a repo
    Choose the repository that you want to clone to the local computer.
  3. Click on the code button and copy the path. That’s the path to clone your repository directly to the VS Code.

    Copy URL
    Select the Code button and then Copy the URL.

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.

    Clone Repository
    From the Source Control tab, select the Clone Repository option.
  2. Paste the copied URL and press Enter.

    Paste URL
    Paste the URL copied from GitHub.
  3. Select the directory where you want to place the clone. I’m cloning it on the desktop.

    Choose Directory
    Choose your preferred directory.
  4. A message will appear to open the cloned repository. Click on Open.

    Open cloned repository
    Click on the Open button.
  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.

    Cloned files
    Cloned 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.

    Command Palette
    Open the Command Palette from the View menu.
  2. Select the Git Create Branch option.

    Git Create Branch
    Click on the Git Create Branch option.
  3. Enter a name for the branch.

    Branch name
    Give a name to the branch.

Switch a branch

If you want to switch branches, do the following:

  1. Open the Command Palette.

    Command Palette
    Open the Command Palette from the View menu.
  2. Select the Git Checkout to option.

    Git Checkout to
    Click on the Git Checkout to option.
  3. Select the branch you want to switch to.

    Switch branch
    Choose 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.

Timeline View
From the Explorer view, click on the Timeline View.

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.

    Extensions Tab
    Click on the Extensions tab from the sidebar.
  2. Type @category:”scm providers”. You’ll see all the available version control providers.

    Version Control Providers
    Type @category:”scm providers”.
  3. Choose the version control provider and click on the Install button.

Was this article helpful?

Leave a Comment