13 Essential VSCode Extensions You’ll Actually Use

Having great tooling can help developers write faster, cleaner, and more consistent code. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code's rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code.

Installing VS Code Extensions

Visual Studio Code has a lot of built-in support for many of the widely used plugins or packages found in other editors. Here's how to add additional functionality with extensions.

Browse for Extensions

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X). This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.

Once you have found an extension to use, click the Install button and after a successful install, you'll see a Reload button. Clicking on this will restart VS Code to enable the new extension.

Extension Marketplace

You can also install extensions from the Microsoft Extension Market Place. Once you have found an extension to use, click the install button on the web page, and in the dialogue that pops up, select "Open with Visual Studio Code". This will then install the extension and take you to the extensions dialogue within VS Code.

You'll need to restart VS Code when you install a new extension for it to take effect.

Essential VS Code Extensions for Developers

Without further ado, here is my list of 10 essential VS code extensions for developers.

Color Info

Visual Studio Code Colour Info Extension

Visual Studio Code extension that provides quick information about CSS colours. Visualise and select colours using a popup colour editor.

TODO Highlight

TODO Highlight VS Code Extension

Highlight TODO, FIXME and other annotations within your code. Sometimes you forget to review the TODOs you've added while coding before you publish the code to production. So I've been wanting an extension for a long time that highlights them and reminds me that there are notes or things not done yet.

VSCode Spotify

Provides integration with Spotify Desktop client to control Spotify inside VS Code.

Indent Rainbow

Indent Rainbow Visual Studio Extension

This extension colourizes the indentation in front of your text alternating four different colours on each step. Some may find it helpful in writing code for Nim or Python.

It uses the current editor window tab size and can handle mixed tab + spaces but that is not recommended. In addition, it visibly marks lines where the indentation is not a multiple of the tab size. This should help to find problems with the indentation in some situations.

VSCode Icons

This extension replaces the default VS Code icons for a new flat style theme which is much easier to identify with.

TypeScript Hero

TypeScript Hero is a VS Code extension that makes your life easier. When you are coding a lot of TypeScript you may want VC Code to organize your imports, outline view of your open TS / TSX document or add import to the document or add an import that is under the cursor to the document.

Regex Previewer

Regex Previewer

No matter how many times I use Regular Expressions, I still get confused by them. To put it frankly, I cannot write my own Regex properly. One of the reasons for this is that I cannot verify my regex on the fly. That is where Regex Preview comes to play. After installing Regex Preview, it will show the preview of your regex side-by-side. If you play with a lot of regular expressions then do give Regex Preview a try and see if it fits your needs.

Angular Language Service

Visual Studio Code Angular Language Service

This plugin to VS Code provides Angular language services for Angular.

This plugin will provide completions in template files and template strings and diagnostics for templates and Angular annotations.

Vue.js Extension Pack

Popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools.

Extensions Included in this pack

• vetur - Vue tooling for VSCode
• vue-peek - Allows peek and goto definition for Vue single-file components
• auto-rename-tag - Auto rename paired HTML/XML tag
• auto-close-tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
• npm - npm support for VS Code
• JavaScript (ES6) Snippets - Code snippets for JavaScript in ES6 syntax
• NPM IntelliSense - Visual Studio Code plugin that autocompletes npm modules in import statements
• Path IntelliSense - Visual Studio Code plugin that autocompletes filenames
• ESLint - Integrates ESLint into VS Code.
• Prettier - Code formatter - VS Code plugin for prettier/prettier
• Formatting toggle - A VS Code extension that allows you to toggle the formatter on and off with a simple click

Prettier - Code formatter

Prettier is a VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

REST Client

Visual Studio Code Rest Client

REST client might be one of the best extensions I have used in a while, as it allows you to send HTTP requests and view the responses directly in VS Code. I like Postman to death, but I also prefer keeping as much stuff as possible in one environment, so REST client was the perfect balance between having a functioning tool to test my APIs and not ever having to leave my code editor.

Fira Code

Fira Code for Visual Studio

Fira Code is one of the best programming fonts with ligatures that can help you scan code a lot faster once you get used to it. It takes a couple of steps more than installing an extension to set it up as your editor's font, but it's not hard at all. If you want to make your code look a bit better, impress a colleague or just make those comparison operators easier on the eyes, this is definitely worth checking out.

Installation isn't as straightforward as an extension however there are comprehensive instructions on the author's website. Installation for Visual Studio Code and Visual Studio 2017

Trailing Spaces

Highlight trailing spaces and delete them in a flash!

Highlight trailing spaces and delete them in a flash!

VS Code provides a way to automate the deletion of trailing spaces by using the Trim Trailing Whitespace command. Depending on your settings, it may be handier to just highlight them and/or delete them by hand, at any time. This plugin provides just that, and a lot of options to fine-tune the way you want to decimate trailing spaces.