Extensions that every developer should install on their machine
BG Image — Unsplash
Visual Studio Code, or VS Code as most people call it, is the most used code editor among developers, being used by more than 34.9% of the developers in the world.
Being a free, open-source cross-platform code editor backed by one of the biggest names (Microsoft) only adds to it its popularity. Every month, the open-source community adds extensions to the marketplace. Here’s a list of eight extensions for VS Code that can come in handy during your development. There’s no rocket science here — just a few simple tools to ease your work.
Bracket Pair Colorizer
Have you ever gotten stuck trying to figure out where a bracket starts and where the block ends ? Or have you ever wanted to delete a bracket and not been able to find its pair?
Then, this is the extension for you. The user can define which characters to match and which colors to use. This cool extension, with 2.2 million downloads, was developed by CoenraadS and is a must-have for everyone who writes code.
Version 2 was also released with greater speed and accuracy.
Color-paired brackets
Beautify
This is one of the most popular extensions out there to help you reformat your code. If you believe in the Clean Code principle, then this extension can definitely help you make your code look neater.
You can customize almost all of your settings — like indent size, new lines, etc. And you can also customize language-specific settings. It was developed by HookyQR and has over 4 million downloads. Install this on your VS Code, and beautify your code with a simple keyboard shortcut.
Code Spell Checker
This might sound a little too basic, but spell checking is something we often ignore while writing code.
Of course, almost everyone knows the spelling of everything we write, but when different coders use different styles, it’s hard to check for each and every word. Especially when you’re using naming conventions like camelCase or snake_case, the default spell checker might not be able to catch your mistakes every now and then. And there’s nothing more embarrassing than finding a spelling mistake in a code review or even when you transfer the code to the client. So it’s always better to be safe than sorry.
This one also has over 1 million downloads.
Spell checker highlighting typos in each file
TypeLens
TypeLens is a very cool extension that gives you the power to check how many references of a function are present in a project and shows the usages without you having to actually go to the particular file where it’s being used.
In the below example, you can see that on top of test(), it highlights it’s being used in two places. And when you click on it, it actually shows the places where it’s used in a pop-over. Currently, it works in TypeScript, JavaScript, SCSS, and less files.
References to a function
Material Icon Theme
Now this one may not be a must-have, but it’s definitely one of the coolest VS code extensions out there, with 3.2 million downloads.
It provides icons for your files and folders based on the latest Material Design themes. It may not add any value to your code, but it helps you identify files and adds customization to how your editor looks.
File and folder icons from material design
npm Intellisense
If you’re a JS developer like me and half of the developers in the world, you’ll be using npm on a daily basis. And what’s better than an extension that shows you suggestions and automatically completes your npm module names when you’re trying to import them.
This extension, with over 1.5 million downloads. may look really simple, but it really comes in handy when you’re trying to import a new or unknown npm package.
Image — Christian Kohler
GitLens
GitLens is “Git supercharged” for VS Code, as the creator likes to say. It integrates almost all Git capabilities — like pull, push, revert, etc. — into an easy-to-use interface and provides many useful features, like current-line blame, changes (diff) hover, a repositories view, etc.
With over 4 million downloads, it’s one of the best Git integrations for VS Code.
Current-line blame
Changes (diff) hover
Repositories view
Code::Stats
Code::Stats is a free status-tracking tool for programmers to track the amount of code you write. It gives a simple-yet-comprehensive analysis of all the code you wrote on all of your machines.
Snapshot of the Code::Stats dashboard