VSCode is an open-source, cross-platform editor that has become a favourite of programmers, particularly in the Web Development community. It’s fast, extensible, customisable, and has tons of features. You should check it out if you haven’t already done it.
Thousands of extensions have been made for VSCode. I am going to list a few extensions that I use on a day-to-day basis. Let’s begin!
Snippets are shorthands in an editor. So instead of writing
import React from 'react';, you can type
imr and press Tab to expand this snippet. Similarly,
It often happens that you code a function, and think that there is a probably better way to do the same thing. You leave a comment
// TODO: Needs Refactoring or something to that effect. But then you forget about the note and push your code to master/production. With Todo Highlighter, that won’t happen. Hopefully.
It highlights your TODOs/FIXMEs or any other annotation in your code in bright colours so it is always clearly visible. One nifty feature is
List Highlighted annotations. It lists all the TODOs in the output console.
This extension allows you to see the size of the imported module. It’s a huge help with bundlers such as Webpack. You can see whether you are importing the entire library or just a particular utility.
One problem that exists is that it doesn’t show the cost of custom files or modules.
As a web developer, we often need to work with REST APIs. For examining the URLs and checking the responses, tools like Postman are used. But why have a different app when your editor can easily do the same task. Welcome REST Client. It allows you to send HTTP request and view the response in Visual Studio Code directly.
- Auto Complete Tag — Combines the functionality of both Auto Rename and Auto Close Tag
- Close HTML/XML tag
As told by its author, GitLens supercharges the Git capabilities built into Visual Studio Code. It packs a surprising number of features such as code authorship shown via Code lens, commit search, history and GitLens explorer. You can read full explanations of these features here. Suffice it to say that you should install this plugin if you do any work with git.
There are other extensions that focus on a specific functionality. You can install those if GitLens feel bloated or you don’t use many of its features.
- Git History — Displays a beautiful graph of the commit history and much more. Recommend.
- Git Blame — It lets you see Git Blame information in the status bar for the currently selected line. A similar feature is also provided by GitLens.
- Git Indicators — It lets you see the affected files and how many lines have been added or deleted in the status bar.
- Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — It lets you open the repo in the browser with a single command.
Git Project Manager (GPM) allows you to open a new window targeting a git repository directly from VSCode window. Basically, you can now open another repository without having to leave VSCode.
After installing this extension, you will have to set
gitProjectManager.baseProjectsFolders to the list of URLs which contain the repos.
- Project Manager — Haven’t personally used it, but it has a million+ installs. So definitely check it out.
It visually highlights the current indent depth. So now you can easily distinguish between various blocks indented at different levels. Get it here.
Icons to make your editor more appealing!
Similar Extensions —
One theme that I like.
- Fira Code — A monospaced font with programming ligatures. Thanks to Rea Deimos.
- Live Server — A development local Server with live reload feature for static & dynamic pages. Thanks to Dani Vijay.
These were some of the VSCode extensions that I use regularly. What other extensions and themes do you like? Respond to this article and mention them. 😀