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 extension that provides quick information about CSS colours. Visualise and select colours using a popup colour editor.
Download Extension from MicrosoftTODO Highlight
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.
Download Extension from MicrosoftVSCode Spotify
Provides integration with Spotify Desktop client to control Spotify inside VS Code.
Download Extension from MicrosoftIndent Rainbow
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.
Download Extension from MicrosoftVSCode Icons
This extension replaces the default VS Code icons for a new flat style theme which is much easier to identify with.
Download Extension from MicrosoftTypeScript 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.
Download Extension from MicrosoftRegex 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.
Download Extension from MicrosoftAngular 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.
Download Extension from MicrosoftVue.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.
Download Extension from MicrosoftREST 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.
Download Extension from MicrosoftFira Code
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
Download from GitHubTrailing Spaces
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.
Download Extension from Microsoft