Sign In
Sign In

Git in Visual Studio Code

Git in Visual Studio Code
Hostman Team
Technical writer
Git
12.02.2024
Reading time: 7 min

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.

Image1

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.

Image3

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.

Image4

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.

Image5

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.

Image2

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.

Git
12.02.2024
Reading time: 7 min

Similar

Git

Working with Git Tags

Git has been around for almost 20 years, yet it remains the most popular distributed version control system. It is best known for GitHub, the largest remote Git repository where developers store their code, document changes, and save previous versions. To help manage versions efficiently, Git provides special markers called tags. This article will explore what Git tags are and how to use them. What Are Git Tags? To understand Git tags, let's first clarify some related concepts. Commit: A commit is a saved version of a project. Branch: A collection of commits that visually represents the history of changes in a project. Multiple branches can exist simultaneously. Now, let’s define tags. Git tags are markers used to highlight important commits. They help track version history, as responsible developers often tag each new version. Like branches, Git tags point to a specific commit, but unlike branches, they do not have a history of commits. Now, let's see how to work with Git tags—create, view, publish, replace, switch, and delete them. How to Create Git Tags Git has two main types of tags: annotated and lightweight. Each is created differently. Creating Annotated Tags Annotated tags store complete version information, including developer names, emails, and timestamps. They are created using special Git flags, -a and -m, as shown in the example below: git tag -a ver-2.5 -m "beta version 2.5" git tag Output: ver-0.1 ver-1.6 ver-2.5 git tag is the main command for working with tags. -a creates an annotated tag with a specified identifier. -m adds a message. If omitted, a text editor will open for message input. To view details of an annotated tag along with its commit, use: git show ver-2.5 Output: tag ver-2.5 Tagger: Marianne Smith <m.smith@company.com> Date: Fri Mar 28 11:02:35 2025 beta version 2.5 commit bf93b7eaa928fd77a55453118313701b04874051 Author: James Brown <j.brown@company.com> Date: Mon Jan 6 09:41:02 2025 This displays the tagger's information, the commit hash, the author, and the creation date. To verify that the tag was created successfully, use: git tag -n Creating Lightweight Tags Lightweight tags are simple pointers to commits, typically used for temporary markers. They store only the commit’s hash. Here’s how to create one: git tag ver-2.5a git tag Output: ver-0.1 ver-1.6 ver-2.5 ver-2.5a ver-2.6 To view a lightweight tag's commit information: git show ver-2.5a Output: commit bf93b7eaa928fd77a55453118313701b04874051 Author: James Brown <j.brown@company.com> Date: Mon Jan 6 09:41:02 2022 -0300 Unlike annotated tags, lightweight tags do not store additional metadata. Adding and Deleting Git Tags in Remote Repositories To push a tag to a remote repository: git push origin ver-2.5 Here, origin refers to the default remote repository. To push all tags at once: git push origin --tags To delete a tag from a remote repository: git push origin --delete ver-2.5 To delete a tag locally (not on the remote repository): git tag -d ver-2.5 Switching Between Tags To switch to a specific tag: git checkout ver-2.5 However, this detaches the HEAD pointer, meaning any subsequent changes will not be associated with any existing branch. If you make changes, create a new branch to keep them: git checkout -b new-branch Viewing a List of Git Tags To list all available tags: git tag Output: ver-0.1 ver-1.6 ver-2.5 ver-2.5a ver-2.6 To filter tags using a pattern: git tag -l *xyz* If you have tags like ver-1.6xyz, ver-2.5xyz, and ver-2.6xyz, this command will output: ver-1.6xyz ver-2.5xyz ver-2.6xyz Reassigning or Replacing Tags To update an existing tag, use the -f flag for forced replacement: git tag -a -f ver-2.5a bf93b7eaa928fd77a55453118313701b04874051 This reassigns the tag to a specific commit hash. However, this will delete the old tag information, so use it carefully. Summary Git tags make version control more flexible and manageable. The commands covered here are simple yet powerful, making them easy to learn even for beginners. 
03 April 2025 · 4 min to read
Git

How to Use GitHub Copilot with Python

GitHub Copilot is a tool that helps developers write code faster and more efficiently by providing suggestions and even entire blocks of code based on comments, variable names, function names, and more. GitHub Copilot saves time when writing standard code structures and algorithms. It is helpful for beginners just learning to develop in a new language and for experienced developers who want to avoid manually writing repetitive functions and structures. GitHub Copilot can be integrated into various development environments, including: Visual Studio Neovim VS Code JetBrains IDEs It also supports a wide range of programming languages, such as: Python JavaScript Go Java C# TypeScript C++ Ruby Rust Shell script Kotlin Swift GitHub Copilot is compatible with popular frameworks and libraries like React, AngularJS, VueJS, Spring, Django, Ruby on Rails, and more. In this tutorial, we’ll explain how to use GitHub Copilot when developing in Python and how it can help improve coding efficiency. Key Features of GitHub Copilot Autocomplete – Provides real-time code suggestions and autocompletion. Code Prediction – Predicts the next steps in your code and offers options to complete structures. Code Search – Helps find relevant code within a project using keywords or code snippets. Code Refactoring – Assists in optimizing and modifying existing code with refactoring features. GitHub Copilot is currently available as a subscription service for $10 monthly. How GitHub Copilot Works GitHub Copilot provides suggestions and autocomplete features based on user comments written in natural language and existing code. To achieve this, GitHub trained Copilot using publicly available repositories hosted on its platform. The effectiveness of Copilot depends on the availability of public repositories in a given programming language. It works well with popular languages like Python and offers reliable suggestions. However, for less common languages, its performance may be weaker, providing fewer and less accurate recommendations. Integrating GitHub Copilot with PyCharm PyCharm, a JetBrains IDE, supports GitHub Copilot. To integrate it into your project, follow these steps: Visit github.com/features/copilot and click Get started for free. Log in to GitHub or create an account.  Now, you can install the GitHub Copilot plugin in PyCharm: Open PyCharm. Go to File > Settings. Navigate to Plugins and search for GitHub Copilot. Click Install to add the plugin. After installation, open the Tools menu, find GitHub Copilot and click Login to GitHub. A window will appear with an authorization link and a special code. Follow the link, enter the code, and confirm authorization. Now, GitHub Copilot is fully integrated into your PyCharm project. How to Use GitHub Copilot Let's write a simple function to verify that we have successfully installed the GitHub Copilot plugin. For example, start typing a function to add two numbers, like: def add(a, b): As you begin typing, Copilot will suggest completing the function: Suggested code appears in gray and italicized text. To accept a suggestion, press Tab. To reject a suggestion, press Esc. Useful GitHub Copilot Shortcuts Action Windows Mac Activate inline suggestions Alt+\ Option+\ View next suggestion Alt+] Option+] View previous suggestion Alt+[ Option+[ Accept suggestion Tab Tab Reject suggestion Esc Esc Open all suggestions in a new window Ctrl+Enter Ctrl+Enter Using Copilot with Comments GitHub Copilot doesn’t just rely on function names—it also generates code based on comments. For example, if you write a function for matrix multiplication with a descriptive comment: def multiply_matrices(A, B): # Multiply matrix A and B and return the result Copilot may suggest the following: def multiply_matrices(A, B): # Multiply matrix A and B and return the result rows1 = len(A) cols1 = len(A[0]) rows2 = len(B) cols2 = len(B[0]) if cols1 != rows2: raise ValueError("The number of columns in the first matrix must be equal to the number of rows in the second matrix") result = [[0 for j in range(cols2)] for i in range(rows1)] for i in range(rows1): for j in range(cols2): for k in range(cols1): result[i][j] += A[i][k] * B[k][j] return result To verify that this function works correctly, let’s use the NumPy library: import numpy as np matrix1 = [[15,24],[12,44]] matrix2 = [[112, 22],[55,90]] m1 = np.array([[15,24],[12,44]]) m2 = np.array([[112, 22],[55,90]]) print(multiply_matrices(matrix1, matrix2),'\n') print(np.dot(m1, m2)) Output: [[3000, 2490], [3764, 4224]] [[3000 2490] [3764 4224]] As you can see, the function Copilot correctly performs matrix multiplication. Cons of Using GitHub Copilot GitHub Copilot is a very useful tool, but it has some drawbacks. Copilot Doesn't Test Its Code The code suggested by Copilot may contain errors. It does not perform self-checks, meaning developers must test the generated code themselves. Additionally, Copilot doesn’t always produce optimized code, both in terms of efficiency and structure. In summary, all Copilot-generated code must be reviewed and tested. Conflicts with IDEs Modern Integrated Development Environments (IDEs) do more than just provide a space for writing and debugging code—they also offer built-in suggestions. For example, when using a built-in function in PyCharm, the IDE provides information about its attributes. At the same time, Copilot might suggest something different, which can be confusing for the developer. Potential Copyright Issues This is a controversial aspect of using Copilot in commercial development. Since Copilot was trained on public repositories, it could theoretically suggest licensed code. This raises concerns about intellectual property rights when using Copilot-generated code in proprietary projects. Negative Impact on Developer Skills Copilot doesn’t teach developers how to write code—it writes it for them. For junior developers, it’s important to gain hands-on experience by implementing common functions and algorithms manually. Over-reliance on Copilot might slow down skill development. Conclusion GitHub Copilot is a useful tool for handling repetitive coding tasks. According to GitHub’s own research: 74% of developers reported focusing on more enjoyable aspects of their work, 88% felt more productive, 96% completed repetitive tasks faster. Copilot should be seen as an assistant—someone you can delegate tasks to while focusing on more important and complex problems. However, developers must carefully review all code generated by Copilot to ensure quality and correctness. 
24 March 2025 · 6 min to read
Git

Best Practices for Using the git stash Command

Git is a distributed version control system developed by Linus Torvalds. It has become the standard in software development due to its efficiency and flexibility. During the development process, there are situations when you need to urgently switch to another branch using the checkout command and make changes related to a different task. However, the current changes may not be ready for a commit yet, and you don’t want to lose them. In such situations, the git stash command comes to the rescue. This tool is indispensable, allowing you to safely store current changes for a while and then return to them without disrupting the integrity of the repository. Let’s explore how to use git stash in development. Basics of git stash Let's think about how we normally work with the codebase and Git. We create something (a function or a small module), then run git add, followed by git commit and git push. Great; we have finished the task and can move on to the next one. But what if the context changes, and you need to switch urgently? You may not have finished writing the module yet, but you must complete another task now. You don’t want to leave the commit unfinished. This is where git stash comes in. So, what does it do? The process of saving temporary changes consists of two stages: stash: We save the changes to a special storage. You can also add a comment for them. pop or apply: We bring the changes back into our working directory. Preparation The version control system must track changes you are going to stash. You can add files to the tracked list using the command: git add . Creating a Stash To create a stash, use the following command: git stash Output: Saved working directory and index state WIP on master: 099797d start By default, the stash name contains the abbreviation “WIP” (Work In Progress) and the branch name. If you want to specify a comment, you can use the following commands: git stash push or git stash save: git stash push -m "<your comment>" The result will be: Saved working directory and index state On master: <your comment> The same result will occur with this command: git stash save "<your comment>" However, this command is considered deprecated — you can check the documentation for more details. Retrieving Changes Now, let’s return to the original task. We need to bring back the hidden changes. Use the command: git stash pop The output will tell you that the changes have been applied to the current working area and can now be used. It will also indicate that all data has been removed from the special temporary storage. If you need to apply the changes without removing them from the stash, use the command: git stash apply Additional Commands and Parameters List All Stashes To view the list of changes that have been stashed in the repository, you can use the command: git stash list Example output: stash@{0}: On master: User Story #2010stash@{1}: WIP on master: 099797d start Applying Specific Changes by Index To apply a specific change, you can use the pop command with the stash index: git stash pop 'stash@{1}' Example output: no changes added to commit (use "git add" and/or "git commit -a")Dropped stash@{1} (563f9c20ab12525795911fbed0c4ebf4a1298b4e) Additional Parameters for the git stash Command If you need to stash changes while keeping them in the working directory, use the --keep-index flag. In this case, files added to the tracked list using the git add command will remain: git stash --keep-index Output: Saved working directory and index state WIP on master: 099797d start If you call git status after this, the modified files will still be there: On branch main Changes to be committed: (use "git restore --staged <file>..." to unstage) modified: GitStash/Program.cs modified: GitStash/SomeModule.cs If you need to add files that git does not track yet, use the --include-untracked flag: git stash --include-untracked When you retrieve changes using pop, you will see a message about the presence of untracked files: ... Untracked files: (use "git add <file>..." to include in what will be committed) GitStash/NewClass.cs ... Sometimes it may be convenient to split the uncommitted changes into separate stashes. In this case, the git stash -p command will help: git stash -p For each change, hiding will be done separately, with a prompt for confirmation. Here are the options for confirmation: ? — to show all options y — to stash the change n — to not stash this part of the change q — to stash all selected parts and finish Viewing Specific Changes in a Stash The show command displays information about the changes in a specific stash, for example: git stash show GitStash/Program.cs    | 3 ++- GitStash/SomeModule.cs | 7 +++++- 2 files changed, 8 insertions(+), 2 deletions(-) You can also specify the index of a specific stash: git stash show 'stash@{1}' Example output: GitStash/SomeModule.cs | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) Clearing Changes from a Stash To remove a specific stash, you can use the drop command. If you don't specify an index, it will remove the most recent set of stashed changes: git stash drop Or: git stash drop 'stash@{1}' Output: Dropped stash@{1} (bedb3c2add59a3f203e2367602328dca8b33b6e9) To completely clear the stash storage, you can use the command: git stash clear Creating a New Branch from a Stash To create a new branch based on stashed changes, use the following command: git stash branch <branch name> <stash index> Or simply: git stash branch <branch name> For example: git stash branch some-feature stash@{2} How It Works The set of changes we hide in the stash is actually a series of commits. Running this command creates two or three commits: The commit stash@{0} contains the stashed files. The parent commit is the HEAD commit in Git's current working directory. If we run the command with the --keep-untracked flag, a separate commit will be created for the untracked files. What happens when you run the pop command? The stashed changes are returned to the repository's working copy and indexed by Git. Other stashes are shifted. The extracted commits are deleted. The .git/refs/stash file contains a reference to the last commit for the stash. cat .\.git\refs\stash Output: 07ea0c456356e883610f43c20d9cb298ff2ebb8a Use Cases Let's look at some common use cases for this mechanism in practice: Backup Before Merge or Rebase The merge / rebase commands are necessary when working with multiple branches. However, conflicts often arise that can cause important changes in the current working directory to be lost. Before performing a merge, ensure that the current branch is up to date, i.e., it doesn't contain unsaved changes. If you have unsaved changes that should be preserved before merging, run this command: git stash push -m "Backup before branch merge" Proceed with the merge, running merge or rebase. Conflicts may arise between the changes in the current branch and the changes in the other branch when executing these commands. You can resolve conflicts using either IDE tools or Git. After successfully completing the merge or rebase, you can restore the changes to the current working directory using apply or pop. Non-Debugging Changes The stash mechanism can also be helpful for working with non-debugging changes, such as temporary fixes, comments, or code formatting. Instead of committing these changes to the current commit, you can use git stash to save them temporarily. This helps in creating clean commits and improves the structure of the Git history. Effective Project Configuration Management Another scenario for using git stash is effectively managing project configurations. Depending on the task or environment you are working in, you might need to modify configuration files, but permanently saving them might not be practical. Saving different configurations Suppose there is a configuration file that defines the parameters for your application (e.g., config.json). You need several versions of this file for different use cases (e.g., local development, testing, and production). You can use the stash to save these configurations. # Saving the configuration for local development git stash save "Local configuration" # Saving the configuration for testing git stash save "Testing configuration" # Saving the configuration for the production environment git stash save "Production configuration" Applying configurations as needed When you need to switch between different configurations, simply use git stash apply or git stash pop to apply the corresponding stash: # Applying the configuration for testinggit stash apply stash@{1} Tips for Effective Using git stash Use clear stash descriptions. The default messages created for stashes usually don’t convey the essence of the changes — they’re simply an abbreviation like WIP, a commit ID, and the branch name: WIP on master: 099797d start Use the push or save commands to add descriptive messages, for example: git stash save "test configuration" Or: git stash push -m "Started working on issue #11 - added contract for the module" Check and clean your stashes. During long-term project development, you may accumulate a large number of changes that are no longer relevant. Use the list and show commands to view the changes and git stash drop to remove obsolete stashes. This mechanism is not intended for long-term data or change storage. Use stash with other commands. You can combine git stash with other commands, such as git stash branch, to create new branches, or with the rebase and merge commands to back up local changes. Conclusion In this article, we’ve explored the git stash command and its use cases. git stash is a powerful tool that can significantly simplify managing changes in your repository and improve your workflow. We’ve examined both basic and advanced scenarios for using this tool, including creating, applying, extracting, and managing stash entries.
07 March 2025 · 8 min to read

Do you have questions,
comments, or concerns?

Our professionals are available to assist you at any moment,
whether you need help or are just unsure of where to start.
Email us
Hostman's Support