Home DataGyan VS Code Extensions to boost your productivity!

VS Code Extensions to boost your productivity!

DataGyan By DataGyan Team · August 5, 2022 · 407 Comments

If you are a developer by profession or code as a hobby, you must have heard of the popular IDE VS Code. There are other popular IDEs as well but VS Code is one Microsoft product that is extremely popular among developers and analysts. The PROs of VS Code are in its extensions among other features and the boost in productivity can be seen as you start using them in your daily tasks. We will look at 5 VS Code extensions that can help you become a super-developer. These extensions can be used by anyone, a data engineer, analyst or web developer or even someone who just does basic scripting. Let’s dive in!

Better Comments

Most developers have been in a situation where they don’t recall why they wrote a piece of code when they take a look at it several months after, which is why comments are always recommended. But Better comments takes it a notch higher with several other features. The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorise your annotations into:

Queries
TODOs
Highlights

How to configure it?

This extension can be configured in User Settings or Workspace settings. In VSCode, click File -> Preference -> Settings -> Settings.json and paste the following lines in the .json file

"better-comments.multilineComments": true,
"better-comments.highlightPlainText": false,
"better-comments.tags": [
        {
          "tag": "!!",
          "color": "#F6FF33",
          "strikethrough": false,
          "backgroundColor": "transparent"
        },
        {
          "tag": "?",
          "color": "#3498DB",
          "strikethrough": false,
          "backgroundColor": "transparent"
        },
        {
          "tag": "TODO",
          "color": "#FF8C00",
          "strikethrough": false,
          "backgroundColor": "transparent"
        },
        {
          "tag": "//",
          "color": "#68FF33",
          "strikethrough": false,
          "backgroundColor": "transparent"
        }
        {
          "tag": "**",
          "color": "#FF33EC",
          "strikethrough": false,
          "backgroundColor": "transparent"
        }
      ]
}

This setting will control whether multiline comments are styled using the annotation tags. When false, multiline comments will be presented without decoration. This setting also will control whether comments in a plain text file are styled using the annotation tags. When true, the tags (defaults: ! * ? //) will be detected if they’re the first character on a line. The tags are the characters or sequences used to mark a comment for decoration. The default 5 can be modified to change the colours, and more can be added. The output of the above change in settings.json is as below and this is for python. The Extension supports several languages including Java, JavaScript, Python, C, SQL, Scala, Go etc… The tricky thing with python is that the comments should be avoided in line number 1 as for some reason the colours don’t work. Weird indeed!

Better comments code — Better Comments Extension

Peacock

This extension is a blessing in disguise for developers who work for long hours. Peacock provides you with a colourful identifier and assistance that aids you in identifying your coding window.

Peacock vscode extension — Peacock VSCode Extension

How to set up the extension?

Search under the extensions plugin for peacock and install it.
Post installation, press F1, and search for peacock. You should find a dropdown peacock: Change to a favorite color.
Select an option from the dropdown and that color becomes the default color for that specific workspace/window.

This is much useful if you are working on multiple projects simultaneously and if you are on a coding streak.

Git Graph

The Git Graph extension for Visual Studio Code is an in-place repository management window that can help you view a git graph of your repository, and easily perform Git actions from the graph. It can also be configurable to look the way you want.

To start with, open VS Code and open the git repo branch. Press F1 and search for git graph, It should populate several options, and click on View graph. In our repository as shown below, we have 2 branches (main also called the master branch (Github renamed all master branch to main branch) and the feature branch. Initially, both branches only had readme.txt file but later a main_test.txt file was pushed to the main branch through VSCode and the same can be viewed on Git Graph directly instead of the repository in the browser. Not only that, there are other actions that can be done using Git Graph and they are listed underneath the image below.

Some of the features of Git Graph include,

Display:
- Local & Remote Branches.
- Local Refs: Heads, Tags & Remotes.
- Uncommitted Changes.

Perform Git Actions (available by right-clicking on a commit/branch/tag):
- Create, Checkout, Delete, Fetch, Merge, Pull, Push, Rebase, Rename & Reset Branches.
- Add, Delete & Push Tags.
- Checkout, Cherry Pick, Drop, Merge & Revert Commits.

Here is another example. Notice in the image below that the feature branch only has a readme file.

Git graph feature branch — Git Graph Feature Branch

Now, after doing a git pull into the feature branch from the main branch, we can see the main_repo file in the feature branch and we can see the commit history and other details in the same window. Super cool isn’t it?

Git graph feature repo — Git feature repo

Bookmarks

Another much useful VS Code extension is Bookmarks. What it does is mark lines and jump to that line. So let’s say you have a particular code snippet or a function to refer to at a later point, you can bookmark that line and use it for later reference. It also helps you to navigate your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It’s really useful for log file analysis. Personally, I find this useful because I have sometimes scrolled for so long only to realize that I scrolled the wrong way.

Here are some of the features that Bookmarks extension provides:

Mark/unmark positions in your code.
Mark positions in your code and give them the name.
Jump forward and backward between bookmarks.
See a list of all Bookmarks in one file and the project.
Select lines and regions with bookmarks.
A dedicated Side Bar.

The available commands include,

Bookmarks: Toggle Mark/unmark positions with bookmarks
Bookmarks: Toggle Labeled Mark labeled bookmarks
Bookmarks: Jump to Next Move the cursor forward, to the bookmark below
Bookmarks: Jump to Previous Move the cursor backward, to the bookmark above
Bookmarks: List List all bookmarks in the current file
Bookmarks: List from All Files List all bookmarks from all files
Bookmarks: Clear and remove all bookmarks in the current file
Bookmarks: Clear from All Files remove all bookmarks from all files
Bookmarks (Selection): Select Lines Select all lines that contains bookmarks
Bookmarks (Selection): Expand Selection to Next Expand the selected text to the next bookmark
Bookmarks (Selection): Expand Selection to Previous Expand the selected text to the previous bookmark
Bookmarks (Selection): Shrink Selection Shrink the select text to the Previous/Next bookmark

Here is an example image of a labelled line.

Booksmarks extension — Bookmarks Extension

First, install the extension. After installing, press F1 and Type Bookmark and choose Bookmarks:Toggle option from the dropdown. Wherever the cursor is placed, that line gets bookmarked. As shown in the image above, lines 24 & 35 are bookmarked. Now to look at all bookmarked lines, choose Bookmarks:List option. The features are plenty and you can browse through the extension’s page to learn more about it.

Tabnine

It is the age of Artificial Intelligence. Tabnine is your all-in-one AI assistant that will help you code faster. With over 2 million installations to date, this plugin, driven by machine learning, works with the existing patterns of your projects. In its predictive code autocompletion, Tabnine employs the combined knowledge of everyone else that has also downloaded and used the plugin. Just install the plugin through the extension and restart VSCode.

Tabnine also has a PRO and Enterprise version that provides you with full function completions and code-quality assistance among several other features. Details of it can be referred to here.

VS Code Extensions are powerful tools to improve your productivity if used rightly and we are sure you will see that improvement in your projects as well. Until next time, Happy coding & Reading!

Share the Gyan!