Git in Visual Studio Code Tutorial

The Visual Studio Code (VS Code) code editor is one of the most popular platforms for web developers, with wide built-in functionality, including integration with source code management tools. Using Git with Visual Studio Code significantly simplifies the code editing process and increases the efficiency of the development process.

System requirements

All you need for the platform to function is an up-to-date release of Visual Studio Code and the Git package. You can choose a local computer with Linux, macOS, or Windows of any version as a test base. Theoretically, you can also use a VPS/VDS virtual machine with Windows, but working through the Windows Server GUI will be less convenient.

Step 1: First look at the Source Control tab

Before you start working with Git and studying its advantages in source code control, you must initialize your project as a repository. This procedure requires launching the VS Code editor itself beforehand. After that, you need to launch the terminal that's already integrated with it. The key combination <CTRL and +> will help.

In the terminal, we will create a folder for the new task and go to it:

mkdir git_test

cd git_test

Now, initialize the Git repository:

git init

The same Git settings are available in the Visual Studio Code interface. Open the Source Control window on the left side of the panel (the fork icon) and click Open Folder.

It will open the file manager with the current folder open by default. If you prefer a different folder, you can select it by clicking Open followed by Initialize Repository.

Once initialized, the .git directory will appear in the drive's file system. To view it, enter in the terminal:

ls -la

The result will look like this:

..
.git

The screen's contents indicate that the repository has been initialized, and now you need to add the index.html file. After you create it, you will see a U next to its name in the Source Control panel. It shows the untracked files, which include all newly created or edited files that have not been moved to the repository archive.

To add an object, just click the "plus" icon next to the created index.html.

The appearance of the letter A tracks the status change: it indicates that Visual Studio and Git have started "working together". All that remains is to click the checkbox at the top of the Source Control panel and make sure there are no unsaved changes.

To see how the system works, let's edit the index.html file. For example, create a <body> section and a <h1> level header inside it with any content. After saving the file, the letter M will appear next to the file name.

This indicates the difference between the copy stored in Git vs stored locally. If our adjustments are correct, we can send them to the repository using the same checkmark icon.

We have briefly familiarized ourselves with how to work with Git in the Visual Studio Code. Now, let's look at the options for interpreting Gutter metrics.

Step 2: Interpreting Gutter metrics

Let's begin by defining what the Gutter is. Formally, it is just a certain area located to the right of the line number. It contains the "Collapse" and "Expand" icons necessary to collapse and expand the code when editing. It also has other functionality.

Thus, when making changes, for example, inside the <h1> tag, you can see that the line with new data is marked with a blue vertical line in the Gutter area. This will happen to all previously created lines where you enter a new code.

The program marks the deletion of lines or their parts in a similar way. To check this, let's delete any content of the <body> section, and as a result, we will see a red triangle appearing in the same Gutter area. A group of lines will also be marked with the same sign, for example, if you cut a piece of code consisting of several lines.

When adding a brand new line rather than editing an existing line, the program displays a vertical green bar, and this indicator is again located in the Gutter area. With this approach, the developer sees visually separated parts of the former code where no changes have been made. It is easy to double-check the code adjustments before saving the file to ensure no errors.

Step 3: Viewing file differences

The VS Code tool helps to quickly compare two versions of a file. Suppose you edit the index.html file and want to see all changes at a glance. Of course, you can use the diff file comparison utility, but working with the VS Code built-in functionality is more convenient.

All you need to do is open the code control panel and double-click on the edited object. The system will automatically open a window for comparison and display the latest version of the code on the left, with the version previously moved to the repository on the right. The differences will be marked green if there is code in the line and gray if there is none.

Step 4: Working with branching

VS Code software supports editing with code branching. The name of the current branch is displayed at the bottom left of the editor window, next to the source code control icon (the fork icon). By default, the program shows the main branch. To make a branch from it, click on its name and select Create new branch in the opened menu.

For example, let's create a test branch called test. After saving, make any changes to the index.html file. You'll be able to go to the master branch and back to the test branch (on the bottom left of the editing screen). If you go to the master branch, you will see that the edits you made in the branch is not in the code, as it should be. To save the changes, upload the object to the repository and check its current status (the letter A should be displayed).

Step 5: Support for remote repositories

The functionality of the Source Control panel includes support for remote repositories. We will not go into this topic in this article as here we just learn how to apply working with Git for Visual Studio Code, but this feature is definitely worth mentioning.

Step 6: Installing extension modules

You can expand Virtual Studio Code's built-in functionality further with downloadable extensions. It turns the product into a versatile, flexible tool for creating almost any web solution. Here are examples of several popular modules.

Git Blame

The extension is intended to save and display information about the author of the edits. It is convenient when several people edit one code, for example, at different stages of project development or simply when employees change. In the Git Blame panel, you can see the ID of the "culprit" for each of the selected lines. It also shows the date and time of all corrections made to a particular code section.

Git History

This module supplements the built-in version comparison and branching control functionality by introducing the Git history view right into Visual Code. It shows the list of authors, individual branches, etc. To open the history, right-click on an object and go to the Git: View File History section in the drop-down menu.

Git Lens

The Git Lens extension is designed to visualize the code sections' authorship by annotating them. A developer can view the information attached to files in the Git repository directly in the Visual Studio Code environment. It is very convenient when there's a whole team working on the project, including third-party specialists.

The Git Lens module can easily replace the previous two modules mentioned above. It displays the data about the latest changes and their author to the right of the line being edited. It also indicates whether these adjustments have been saved in the repository. When you hover over it, the system will display a pop-up window with more detailed information.

Conclusions

In this article, we talked about how to use Git in Visual Studio Code to make developing more efficient.

Visual Studio Code Editor is a powerful web tool for developing websites and other online products. Even the built-in functionality is enough to easily create new projects, finalize old ones, and involve additional people in the work. If that is not enough, the system supports downloading extensions that introduce new functions, either replacing standard ones or adding new features to them.