6 Handy Visual Code Plugins to Work with Git

6 Handy Visual Code Plugins to Work with Git

·

3 min read

Using Version Control in VS Code

Visual Studio Code ships with a Git source control manager (SCM) extension.

Most of the source control UI and workflows are common across other SCM extensions, so reading about the general Git support in VS Code will help you understand how to use another provider.

image.png

Read more: Version control in VS code

1. Git Graph

One of the most important benefits Git provides is the ability to describe and visualize the history of changes in a project.

Understanding how to interpret this information is key both to understanding the current state of the project and also in grasping how Git and its various commands work.

A key tool to achieve this is the Git graph view.

image.png

Git Graph has to be the most visually appealing way to interact with Git in VS Code, seeing the commit tree like this can help a lot when performing more complex git operations.

It is very customizable and offers you granular control over the UI such as the graph style and branch colors.

You can click on any commit to view details and file changes, and you can even perform code reviews without leaving your IDE!

Read more: Git Graph official page

2. GitLens

GitLens is a popular extension that supercharges the Git capabilities built into VS Code.

It lets you glimpse into whom, why, and when a line or code block was changed, then jump back through history to gain insights into the code’s evolution.

With over 10 million installs, GitLens is the most popular Git extension for Visual Studio Code.

GitLens lets you do almost everything with git that you could imagine, directly from your code editor with a friendly GUI.

I would go as far as to say that it even does stuff that I didn’t even know was possible with git.

So here are some of my favorite GitLens features that I use regularly. You can find the full list of the features here.

3. Current line blame

As soon as you hover over any line in the code (in a project using git and has some commits), you will be able to see this popover.

image.png

This popover gives you almost all the information that you might need for the current line like, what did the line looked like before the most recent commit that affected it, the commit hash that introduced the change, the PR that introduced the change (would need to connect to GitHub for this one), etc.

4. File blame

This is also a neat feature that allows you to view which lines were introduced by which commit and author for a particular file.

image.png

5. Commits view

It shows all the commits of the current branch and again allows you to do a bunch of stuff like exploring the changed files in the commit, the PR that introduced the commit, etc.

image.png

6. Interactive rebase editor

GitLens also comes with a user-friendly interactive rebase editor, which lets you easily drop, squash re-order commits.

image.png

Read more: Git-Lens

Final Thoughts

Visual studio code is a really amazing editor.

Heads up to Microsoft for building such an awesome piece of software for developers.

There’s so much this extension can do, that you’ll honestly just have to take a look for yourself, and choosing some of the best is not an easy task.

Everyone has their own workflow, and there are adjustments to be made when introducing these extensions into your own day-to-day.

VS Code and its cool new features have made using git super easy, and I believe it will replace CLI to some extent in the future.

It already takes very little effort to do things on Git using VS Code and these extensions are the cherry on the top.