Topic 3

Version Control

Let's learn how to manage versions using Git Graph.

Add extension

Git Graph on Visual Studio Marketplace

Git Graph extension

Git Graph

You can access the Git Graph by clicking on the button with a graph icon in the Source Control panel or by clicking on ‘Git Graph’ at the bottom of the window.

VS Code Source Control panel with Git Graph access
Git Graph view in VS Code
Git Graph history view in VS Code

When accessing the Git Graph, you will see the following screen.

Git Graph screen in VS Code

Interface

Here is an explanation of each section:

Section Explanation
1 It visualizes the commits that have been pushed so far.
2 It represents the current commit being discussed along with its message. It is referred to as the current branch. You can use Check out to move to a different commit, but we will not cover that in this tutorial.
3 It displays the date and author of each pushed commit, along with a unique identifier for each commit.
Git Graph interface sections

Review of changes

When you click on a commit to review the changes, you will see the following screen. The colors of the file names have the following meanings:

Color Meaning
Green The file is newly created.
Yellow The existing file has been modified.
Red The file has been deleted.
Git Graph commit change review screen

If you want to examine the changes in more detail, you can click on a commit, and you will see the following screen. The left side shows the content before the changes, and the right side shows the content after the changes.

For example, if you click on ‘revised file.txt’, you will see that the sentence ‘Also, I like dogs’ has been added, indicating the specific change made.

Git Graph detailed file change showing added text

To reset to an old version

Moving between commits can be sensitive and complex. Therefore, before reverting to an old version, it is recommended to proceed from a clean state in Source Control, as shown on the right-hand side of the screen, with no pending changes.

If you are sharing your code with others, it is recommended to use ‘revert’ instead of ‘reset’. Alternatively, using ‘branch’ is also recommended. However, we won’t cover these topics in this tutorial.

Clean Source Control state before resetting to an old version
  1. Right-click on the commit of the version you want to revert to, and click on “Reset current branch to this commit.”
Reset current branch to this commit menu in Git Graph
  1. You will then see the right-hand side screen. You can choose one of the three options, and here are the explanations for each option:
Option Meaning
Soft All commit history will be removed, but both the selected past commit and the current changes will be kept.
Mixed All commit history will be removed, but the changes will be kept, accepting the selected past commit.
Hard All changes will be discarded, and only the selected past commit will be accepted.
Git Graph reset options
  1. It is recommended to prioritize successful pushes based on the chosen option before continuing with your work.

Since Version Control can be complex, it is advisable to start with cautious use of the “Hard” option. For more detailed information, please refer to the resources available at the links below.

Git Tools - Reset Demystified

Git Graph and reset are useful when you need to inspect or manage version history. Before changing history, check that your Source Control state is clean and make sure you understand which changes will be kept.