Rajendra Gupta
Git Blame

Visual Studio Code (VS Code) integration with Git Source Control

July 22, 2020 by

This article explores Visual Studio Code integration with Git Source Control.

Introduction

Visual Studio Code is a well-liked editor to support various development activities, programming languages. You can start exploring it by referring to the Getting started with Visual Studio Code (VS Code) article.

Git is a source control platform, and it helps you in managing the development activities. It takes snapshots of your filesystem and saves the state of the project in a snapshot. It maintains the stream of snapshots as the file changes over time.

In the articles below, we explored the useful functionality of Git in the Azure Data Studio.

Source Control using Git in Azure Data Studio (ADS)

  • It gives an overview of Git along with its installation, configuration in Azure Data Studio
  • It also explores a repositor’s initialization, commits, and timeline of the changes

Integrating Azure Data Studio with Git and GitHub

  • Integration of Git and GitHub web repository
  • It covers synchronization between Git and GitHub in bidirectional mode

Working with Git components in Azure Data Studio

  • It explains the data flow between the Staging area, working tree and repository
  • Explain a few useful Git commands in a terminal

In this article, we will explore Git integration in the Visual Studio Code and its useful features

Visual Studio Code and Git Source Control

VS code contains integrated Git source control. It also supports various other source control such as Azure Repos, Perforce, TFS, and SCM using extensions.

Launch VS code, and in the left-hand menu, click on the Source Control icon for Git. It gives two options – Open Folder and Clone Repository.

Visual Studio Code and Git Source Control

We can open a git repository folder or clone from a GitHub URL. We already set up a GitHub repository in the previous article. Therefore, instead of creating a new repository, let’s clone the repository from GitHub in the VS Code.

First, log in to your GitHub profile, view the files in it, and copy the repository URL.

GitHub profile

In the VS Code, click on the Clone Repository. It asks for the GitHub URL, pastes the URL, and clicks on the Clone from URL.

Clone Repository

Next, it asks for the folder in your local system. VS Code will copy the scripts from the GitHub repository into the VS Code Git repository.

Local directory for Git

Click on the Select Repository Location. You get a prompt while it clones the repository from the GitHub URL you specified.

Select Repository Location

Once the cloning process is completed, it asks you – Would you like to open the cloned repository?

Open repository

Click on Open to view all the files in VS code repository. You can compare both the VS Code repository and the GitHub Repository.

View scripts in the VS code

Git Status Bar actions

In the Git status bar, you get the following indicators.

  • Branch: It shows the Git Branch. By default, it uses a master branch for all scripts and changes
  • Synchronize: You can click on the Synchronize Changes indicator to synchronize the VS code repository with the upstream branch. It pulls the remote changes to the Visual Studio Code local repository. Similarly, if you have performed any changes in the local repository, it pushes changes back to the GitHub branch
  • Errors and Warning: If your code contains any errors, warnings in the script, these indicators highlight it

For example, I made a syntax error in the SQL script on purpose. It highlights the same in the indicator. You can click on the indicator to view the errors in a separate window, as shown below.

Git Status Bar actions

Gutter indicators

Once we make the changes in the Git repository scripts, VS Code adds annotations in the gutter and the overview ruler.

  • A red triangle is for the deleted lines
  • A green bar for the newly added files
  • A blue bar is for the modified lines

Gutter indicators

Similarly, it also shows the indicators in the overview ruler.

Overview ruler

The gutter helps you to identify the code that was modified, deleted, or inserted. For example, click on the red triangle, and it shows the deleted line from the code. Suppose you realized that someone deleted the row by mistake, you can revert the changes as well.

View details from Gutter

Click on the Revert Change icon, as shown in the following image.

Revert Change icon

Similarly, you can click on the green or blue bar to see the changes done in the script.

View the changes

Viewing diffs

VS Code also provides the functionality to perform a diff on query files. Usually, you download a separate third party tool for the comparison of the two different versions of a script. It compares the script changes with the last commit file in a Git repository and gives comparison visually. It saves your efforts to copy the code in a separate tool, then make the comparisons, and come back to the VS Code for further changes in the script.

To view the demo for this feature, open any script in the Git repository, and make the changes. In the following screenshot, note the following things:

  • Few code lines are removed after the last commit. It shows those rows in the red background
  • Few code lines are unchanged. It does not put any background color for those lines
  • Few code lines are inserted recently after the last commit. You can see a green background for those rows

Viewing diffs

Git output window

You might be interested to learn the Git commands that are performing the tasks for you once you click on any option in the Git source control in the Visual Studio Code. VS Code provides a git output window and shows you commands that it is using. It helps learn the Git language and commands.

In the VS Code, navigate to Command Palette -> Git: Show Git Output.

Git output window

It opens another window for Git output, and you can see all commands in real-time.

View commands in the git output

Git Extensions

VS Code provides several extensions to extend the functionality of the Git Source control. You can install these git extensions from the VS Code market place.

Click on the Extensions icon in the menu and search for the Git keyword. It shows all related extensions in the list.

Git Extensions

Few useful extensions for Git source control are as below.

Git Blame

Git blame gives information about the person who modified the code in the status bar. Suppose someone changed the code intentionally, and you want to know about the person and when it was changed. Git blame shows the information, as shown below. Its purpose is to keep you aware of the changes, and you can ask the questions for the developer in case of any issues.

Git Blame

Git History

You can explore the history of a file, author, branch in a GUI mode using Git history extension. You can search for a term as well. It provides additional information, commit history, branch actions, compare branches, and compares commits.

You can install the Git History extension and launch it from the VS Code Command Palette. You get the following options in the command palette.

  • View Git history
  • View file history
  • View line history

Git History

Let’s say we require information about a particular line from history.

Git History details

The highlighted line is for adding the additional script. Click on the file name, and you get additional options such as view file contents, compare files against workspace, compare against previous versions, or view file history.

View script options

If you click on compare the file against the previous version, it opens the current script and its comparison with the previous version.

Compare the file

Conclusion

In this article, we explored the Git source control integration in the Visual Studio Code. It provides useful editor features for Git extension. We will continue exploring Git in the upcoming articles.

Rajendra Gupta
892 Views