Best VS Code Extensions

Top Visual Studio Code Extensions: 50 Powerful Tools to Make Visual Studio Even More Useful

Angela Stringfellow Developer Tips, Tricks & Resources Leave a Comment

Microsoft’s Visual Studio Code provides developers with a robust marketplace packed with useful tools and extensions that make VS Code even more functional and customizable to meet every developer’s needs. New extensions are added regularly, and you can find tools, libraries of snippets, and just about anything else you could want to streamline the development process. In fact, Stackify Prefix has its own code extension in the Marketplace — the easiest and most powerful .NET profiler you’ll find.

No worries, no SPAM. Opt-out anytime.

Extensions are a vital part of the Visual Studio Code experience.  We decided to take a little tour of the other offerings in the Marketplace to come up with a list of 50 most helpful, must-try extensions (in addition to Stackify Prefix, which we, of course, consider a must-have) for any Visual Studio Code enthusiast. All of the following 50 extensions are free, although some require you to have other programs or services installed. We hope you’ll find some great ideas in this list of tools.

  1. TSLint

TSLint

If you’re doubtful about your TypeScript quality, verify it with this Visual Studio code extension, which integrates the tslint linter for TypeScript language into VS Code.

Key Features:

  • Checks the quality of your static TypeScript code
  • Analyzes the whole project or a particular section of your code
  • Allows you to auto fix errors when scanning lines of code
  • Supports automated fixing of warnings
  • Requires tslint (installed globally or locally)
  1. Auto Import

Auto Import

A Visual Studio code extension that automatically finds parses and provides you with code actions and code completions for every import you have, Auto Import works with TypeScript and TSX.

Key Features:

  • Easily scans code in large projects
  • Import status bar show you the number of imports available
  • Merge imports from the same location
  1. Docker Support

Docker Support

Docker is one of the hottest trends in development today, and if you use Visual Studio Code, you don’t want to miss out. This is the official Docker extension to help you create dockerfiles and add syntax highlights, commands, and snippets to them.

Key Features:

  • Makes creating and launching containerized applications easy
  • Automatically generates dockerfile and docker-compose.yml
  • Dockerfile and docker-compose commands are built into the command palette
  • Syntax highlighting and hover tips
  • Snippets and linting for dockerfile files
  1. Visual Studio Keymap

Visual Studio Keymap

Keyboard shortcuts don’t just save time but enable you to maintain your flow as you code. They’re very popular with Visual Studio users, and this extension makes it possible to use your favorite VS keyboard shortcuts in VS Code.

Key Features:

  • Provides the traditional Visual Studio keyboard shortcuts
  • Easy to add your custom shortcuts
  • Brings shortcuts of Windows, Linux, and Mac to Visual Studio code
  • Find all keyboard shortcuts in the extension’s contribution list
  1. EditorConfig for VS Code

EditorConfig

Maintain a consistent coding style with this Visual Studio code extension. Even if your teams use multiple IDEs and editors, consistency is achievable with EditorConfig for VS Code. Internally, EditorConfig uses the editorconfig npm package, one of the few EditorConfig cores available. Check out the main EditorConfig site here.

Key Features:

  • Official release by EditorConfig for Visual Studio
  • Define styles for indenting, tabs, and where lines begin and end
  • Text editor plugins for editors to read and follow defined style rules
  • Uses editorconfig npm package
  1. Evermonkey

Evermonkey

Evernote is one of the most popular note taking apps. It can be used to improve the quality and efficiency of your coding with the Evermonkey extension. This handy Visual Studio Code extension enables Markdown support for Evernote, following the same principles as Sublime Text but with a faster experience.

Key Features:

  • Provides support for Evernote in Visual Studio Code
  • It caches data locally to avoid repetitive net requests for a faster experience
  • UI design updates to be added to improve viewing
  1. React Redux ES6 Snippets

React Redux

Get React and Redux snippets using ES6 for JavaScript to help you structure components with this simple, yet helpful VS Code extension.

Key Features:

  • Provides snippets using JavaScript
  • Quick access to snippets by pressing Ctrl+Space
  • Assists with boilerplate as well
  1. Debugger for Chrome

Debugger for Chrome

Chrome maintains the most market share among browsers, and it’s widely used by developers thanks to its robust marketplace of tools and tricks for simplifying developers’ lives. This VS Code extension assists you in debugging your JavaScript in Chrome, offering several helpful, time-saving features.

Key Features:

  • Works with other targets that support Chrome debugging protocol
  • Sets breakpoints even on source files when source maps are enabled
  • Debugs script tags and eval scripts as they add added
  • Locals pane, watches, and console
  1. JSHint

JSHint

JSHint is a great tool to quickly spot errors with your JavaScript code. If you’re used to JSHint, you’ll also want to use it in Visual Studio Code, and this extension makes it simple and easy. You can check out the JSHint website here.

Key Features:

  • Uses the default JSHint configuration as described on their site
  • All files are included in this extension by default
  • Allows you to exclude specific files and folders from the review
  • Option to disable JSHint for specified workspaces
  1. C#

C#

Write great C# code for .NET Core with this extension, powered by OmniSharp. It even debugs your code and supports a variety of operating systems. VS Code aims to be a useful tool for cross-platform C# development, and in fact, many Unity game developers use VS Code rather than the MonoDevelop IDE, making this C# extension a particularly useful tool for many developers.

Key Features:

  • Supports debugging and lightweight development tools for .NET Core
  • Editing support for C# including syntax highlighting, IntelliSense, Go to Definition, Find All References, and more
  • C# debugger available on Windows, Mac, and many Linux operating systems
  1. TODO Parser

TODO Parser

If you have trouble parsing TODOs in the working files of your project, this Visual Studio code extension can help. It lets you parse multi-line TODOs and makes your workflow a lot more actionable.

Key Features:

  • TODO counter is available in the status bar of your current document
  • The counter provides list of all available TODOs
  • Option to parse single and multiple TODOs at once
  • Supports any programming language
  1. PowerShell

PowerShell

PowerShell is a great object-oriented programming language. If you use this programming language, this is a must-use extension offering PowerShell language support for Visual Studio Code.

Key Features:

  • Write and debug PowerShell scripts in VS Code’s IDE-like interface
  • Works on platforms like Windows, Linux, and iOS
  • Provides tools to find variables and cmdlets references
  1. Angular 4 and TypeScript/HTML VS Code Snippets

Angular 4 and TypeScript Snippets

Use this Visual Studio code extension to add code snippets of Angular (v2 or higher), TypeScript or HTML to your editor. It’s an incredibly easy-to-use extension that streamlines coding productivity.

Key Features:

  • Adds Angular version 2 and up, TypeScript or HTML code snippets
  • Multiple snippets provided in the description for both TypeScript and HTML
  • Instantly improve productivity in Angular 2 and up with these snippets
  1. Sublime Text Keymap

Sublime Text Keymap

Sublime Text is an excellent text editor for coding. If you are used to Sublime Text keyboard shortcuts and want to use them in VS, this extension brings the most popular Sublime Text keyboard shortcuts to Visual Studio code.

Key Features:

  • Extension officially released by Microsoft to import keyboard shortcuts
  • Imports the popular Sublime Text keyboards shortcuts used in programming
  • Brings keyboard shortcuts used on Windows, Linux and Mac
  1. HTML CSS Class Completion

HTML CSS Class Completion

As awesome as CSS is, it’s hard to remember all CSS classes. This extension auto-completes CSS class names as you type, based on the CSS files in your workspace.

Key Features:

  • Customize the directories where the extension will search for files
  • Provides manual re-caching for class definition auto completion
  • Provides support for PHP, Razor, and Jade
  1. View in Browser

View in Browser

If you like viewing your HTML in a browser frequently for feedback as you code, this Visual Studio code extension will help you do it. It renders HTML files in your system’s default browser.

Key Features:

  • Provides two options to edit, one from context menu and another from command
  • Set your default browser according to your preference
  • Supports Mozilla, Chrome, Internet Explorer and Safari
  1. NgBootstrap Snippets

NgBootstrap Snippets

Get NgBootstrap snippets, which consist of Angular and Bootstrap 4 snippets, with this helpful extension.

Key Features:

  • Typing ngb gives a quick list of the snippets available
  • Unfolds snippets as soon as you press enter
  • Provides alerts, dropdown, progressbar and many other snippets
  1. jQuery Code Snippets

jQuery Code Snippets

jQuery is a powerful JavaScript library. You won’t remember every single function, and with this extension, you don’t need to. jQuery Code Snippets brings a vast library of over 130 jQuery Code snippets to Visual Studio code.

Key Features:

  • Provides a quick list of all the snippets after typing ‘jq’
  • Sets single or multiple attributes from the matched elements
  • Snippets have been added from the 2015 Visual Studio jQuery Snippets
  1. Bower

Bower

Bower makes building apps easy with its package management capabilities, providing access to most Bower commands within VS Code. With the Bower Visual Studio Code extension, you can install, uninstall, search for, and update packages effortlessly.

Key Features:

  • Interactive Bower command prompts have been built in the IDE
  • Write, install and uninstall bower.json and other Bower packs
  • Find files according to the files you are editing
  1. Git History

Git History

Git is the most popular version control system today. It enables distributed version control for modern web apps. Sometimes, you want to be able to re-trace your code to its previous versions and restore that version. The Git History extension gives you the complete Git history, including a history of inline files, all within Visual Studio Code.

Key Features:

  • Shows history in graphs and charts according to your preference
  • Get multiple history graphs to create a comparison
  • Keyboard shortcuts are provided for quick and easy history viewing
  1. Angular Files

Angular Files

Scaffolding can be an important first step when building an app, but it can be complex. This Visual Studio extension lets you quickly scaffold Angular file templates.

Key Features:

  • Supports non Angular-cli file structure
  • Also supports angular-cli.json with different style extensions
  • Provides good support for app structure
  1. Auto-Open Markdown Preview

Auto-Open Markdown Preview

Previewing markdown files in a parallel window can be a pain due to the need to repeatedly type ‘Ctrl + K V’ or ‘Cmd + KV’. With the help of this Visual Studio Code extension, you can get automatic previews of the Markdown files you open.

Key Features:

  • Latest version supports Visual Studio code 1.10.0 and higher
  • Removes the need to press ‘Ctrl + K V’ for a preview of the Markdown file
  • Shows previews next to the Markdown file you open
  1. Angular v4 TypeScript Snippets

 

Angular v4 TypeScript Snippets

Save time when coding using the snippets you get with this Visual Studio code extension, which adds snippets for Angular for TypeScript and HTML.

Key Features:

  • Works with Visual Studio 0.10.1 and higher
  • Has been updated for Angular v4.0.0 release
  • Keyboard shortcuts to activate snippets from within the editor
  1. ESLint

ESLint

ESLint enables better code quality by bringing the ESLint library to Visual Studio Code. It also allows you to identify and act on patterns in JavaScript.

Key Features:

  • Uses ESLint library from the opened workspace folder
  • Documentation for ESLint is provided for new ESLint users
  • Searches global version of the file if the library doesn’t have one
  1. Bracket Pair Colorizer

Bracket Pair Colorizer

If different brackets confuse you, this Visual Studio code extension will help you match brackets with color-coding options. You can define which characters to match as well as preferred colors.

Key Features:

  • Allows custom characters in custom brackets to be configured
  • List of various colors available even for orphaned brackets
  • New brackets can be added or removed from the list
  1. MsSQL

mssql

MySQL is a very helpful database tool. This extension helps you develop and connect various systems to the database you use, which helps your team access data more efficiently.

Key Features:

  • Customizable command shortcuts and extension options
  • Allows you to create and manage various connection profiles
  • Connects to SQL Data warehouse, Azure SQL Database, and Microsoft SQL Server
  • Evaluate scripts and view results in a grid
  • Save results to JSON or .csv file format to see in the editor
  1. VScode-Icons

VS Code Icons

If the simplistic Visual Studio does not appeal to you, this extension adds icons to VS Code, making it more visually appealing and fun to work in. This extension was originally created to enable icons before VS Code began supporting them for files and folders. Now that VS Code does support icons, VScode-Icons aims to provide the most comprehensive set of icons available.

Key Features:

  • Provides a complete set of icons to choose from in VS Code
  • User can make icons look different and change the extension association at will
  • Allows suggestions to add to the growing icon list
  1. Angular 2+ Snippets

Angular 2+

For programmers using the new Angular 2+ and need a supporting snippet extension, this Visual Studio extension is the one you need.

Key Features:

  • Provides about 89 Angular 2+ snippets (and growing)
  • Snippets are updated for versions 2.4.11 and 4.0.0
  • Snippets of TypeScript, HTML, ngRx and code examples are available
  • Suggests Angular 2 solutions when Angular 1 keywords are entered
  1. TypeScript Hero

TypeScript Hero

TypeScript lets you check and refactor JavaScript code as you type. TypeScript Hero brings this powerful tool to Visual Studio Code, automatically importing your project and libraries to your current file.

Key Features:

  • Adds every missing import in one command
  • Fixes coding errors with a feature called ‘Light bulb.’
  • Sort and organize your imports and remove unused imports
  1. Path Intellisense

Path Intellisense

If you have a hard time remembering the path of a file, Path Intellisense can help. It auto-completes filenames as you work, saving you both time and energy.

Key Features:

  • Autocomplete feature fills in the file path as you type
  • Hidden files can be made visible with a simple setting
  • Names with dashes are also shown in autocomplete
  1. HTMLHint

HTMLHint

HTMLHint is a static code analysis tool that can be used with an IDE to improve the quality of code. If you’re looking to use HTMLHint in Visual Studio Code, there’s an extension for that.

Key Features:

  • Highlights errors in the HTML file with squiggles
  • Reports numbers of errors on status bar for easy viewing
  • Provides options to set and define rules for checking
  1. Bookmarks

Bookmarks

Tired of endlessly scrolling through your code, or using a ‘Ctrl + F’ to find that exact line of code you need to fix? This Visual Studio code Bookmarks extension makes creating and jumping through code easy and smooth.

Key Features:

  • Set bookmarks anywhere in your code for easy access later
  • Autocomplete feature makes navigating to your bookmarks easy
  • Bookmarks are saved on your current project in sessions
  • Bookmarks are restored on reopening the file
  1. Office UI Fabric Snippets

Office UI Fabric Snippets

Get the Office UI Fabric Snippets support to create HTML document with this Visual Studio code extension. It has many UI elements that can be easily added to your code.

Key Features:

  • Supports UI Fabric 3.0.0 Beta 2
  • Lists available after typing Fabric while coding
  • Provides overall change to the HTML document
  • Breadcrumbs, buttons, callouts, date picker and label are some of many snippets available
  1. Haskelly

Haskelly

Program using Haskell causally or as an expert using this Visual Studio extension that enables support for Haskell development.

Key Features:

  • Supports Haskell and Cabal (.hs and .cabal)
  • Code snippets for structures and popular functions
  • Provides complete all round support for Haskell developers
  • Customizable according to the preference of the user
  1. Angular UI Bootstrap Snippets

Angular UI Bootstrap Snippets

Use snippets of UI Bootstrap to code your Angular project using this Visual Studio Code extension. In HTML or JavaScript files, simply start typing uib- and Angular UI Bootstrap Snippets provides autocompletions.

Key Features:

  • Autocomplete feature to make finding snippets easy
  • Quickly toggle through different highlighted placeholder by pressing tab
  • Can be added to any JavaScript or HTML file
  1. Angular 1 JavaScript and Typescript Snippets

Angular 1 Snippets

You may be happy with things that just work, and don’t feel the urge to keep updating to the latest version of a framework. If that sounds like you, and you’re still using Angular 1, you’ll love this extension. It provides snippets for Angular 1 for both JavaScript and TypeScript.

Key Features:

  • Provides snippets for JavaScript and TypeScript
  • Provides snippets for users of Angular 1
  • Quick and easy search for snippets
  • Keyboard shortcuts to streamline your workflow
  1. Language Support for Java(TM) by RedHat

Language Support for Java

Many enterprise applications rely on Java. If you’re having trouble with developing or editing in Java in Visual Studio Code, this VS code extension will make your life easier by providing language support via Eclipse JDT Language Server, which utilizes Eclipse JDT, M2Eclipse and Buildship.

Key Features:

  • Provides Java support through Eclipse JDT server language
  • Shows status of language tools on lower right corner
  • Provides details about failures in language coding
  • Supports Maven, Gradle and Eclipse
  • Code completion, code navigation, highlights, formatting, snippets and more
  1. Azure Functions Tools

Azure Functions Tools

Microsoft Azure is one of the most popular cloud services used by developers and Ops teams to host and manage applications. Azure Functions is a powerful tool that lets you implement code based on event triggers, and the Azure Functions extension makes this possible in Visual Studio Code.

Key Features:

  • Includes JSON IntelliSense for host and function
  • Provides shortcut to quickly activate Intellisense
  • Works on Visual Studio code 1.11.0 and higher
  1. Cordova Tools

Cordova Tools

Apache Cordova is a popular mobile development framework. This Cordova extension assists in integrating commands, code-hinting and debugging for Apache Cordova within VS Code.

Key Features:

  • Command palette finds errors in code and debugs them
  • Uses Intellisense to work around plugin APIs
  • Works smoothly with any project based on Cordova
  • Added support for the Ionic framework
  1. Vim

Vim

A favorite text editor of many programmers, Vim is now emulated in Visual Studio Code. This Vim extension makes writing and editing code easier.

Key Features:

  • Multiple code commands combinations
  • Possess a versatile command remapping capability
  • Multiple Vim commands can be followed by multiple cursors
  1. React Native Tools

React Native Tools

React Native is the popular mobile development framework open sourced by Facebook. This Reach Native extension lets you edit, develop, debug and integrate commands for React Native, providing a development environment for React Native projects.

Key Features:

  • Creates an environment to support mobile project development
  • Use command palette to debug and quickly run commands
  • Use IntelliSense to browse parameters for React Native APIs
  1. PHP Debug

PHP Debug

If you’re programming with PHP and are looking for an extension to help you debug your PHP code, PHP Debug is the VS Code extension you need, offering a variety of features to streamline development and ensure bug-free code.

Key Features:

  • Acts as an adapter between VS code and XDebug
  • Connects to remote debuggers as well
  • Allows user to set breakpoints according to their preference (line, conditional, and function breakpoints)
  • Break on entry or on uncaught exceptions and errors / warnings / notices
  • Supports multiple, parallel requests
  • Runs as CLI or without debugging
  1. Code Runner

Code Runner

Code Runner is an extension that enables you to run any language’s code snippets in Visual Studio Code, with support for every popular programming language including both legacy languages and those that have gained popularity in recent years such as Clojure, Objective-C, Rust, Racket, AutoHotkey, AutoIt, and many others.

Key Features:

  • Provides an Output Window to check the output of a snippet
  • Supports a wide range of programming languages like C++, PHP, Clojure, Racket, Python and much more
  • Custom commands
  1. vscode-random

vscode-random

Generating and adding random data directly into your project, this Visual Studio extension does exactly what its name suggests. It uses the ChangeJS library and was inspired by the Random extension for Atom.

Key Features:

  • Configures names, years, numbers, etc.
  • Multiple commands can be accessed and worked
  • Quick install and launch option
  1. Travis CI Status

Travis CI Status

Apart from Jenkins, Travis is a widely known and used CI platform. Checking the build status of your code during the build stage is key. This Visual Studio code extension enables you to check your project’s Travis CI status without leaving VS Code.

Key Features:

  • Small status indicator present in the status bar for convenience
  • Update status and open in Travis are two default commands
  • Uses a combination of repository/username to find test
  1. htmltagwrap

htmltagwrap

This simple, useful Visual Studio code extension provides you with the option of wrapping the codes you select in HTML brackets.

Key Features:

  • Wraps single or multiple inline selections
  • Quick wrap shortcuts available
  • Supports spaces and tabs for indentation
  1. Git Blame

Git Blame

If you’re looking for a tool to help you see the Git Blame to view the revision history for your code, this Visual Studio code extension does just that. It appears in your status bar for easy access.

Key Features:

  • Shows git blame information for selected lines
  • Git blame information pings in the status bar
  • Reduced text size for visibility
  1. Reactjs Code Snippets

Reactjs Code Snippets

Reactjs is a popular open source UI framework released by Facebook. For the developers using Reactjs, this Visual Studio code extension provides snippets in ES6 syntax.

Key Features:

  • Supports languages like JavaScript, TypeScript and React
  • Based on the bable-sublime-snippet package
  • View already-installed snippets or add new snippets
  1. Settings Sync

Settings Sync

Github Gist is a nifty way to share code and other pieces of text. With the Settings Sync extension, you can sync snippets, themes and other extensions across different machines using Gist.

Key Features:

  • Single click upload and download
  • Supports anonymous, Gist and Github account token to log in
  • Synchronizes settings, snippets, extensions and themes
  1. Project Manager

Project Manager

Switching between projects can become tiresome, slowing down your progress. This Visual Studio code extension makes the navigation process seamless, allowing you to multitask like a pro.

Key Features:

  • Makes projects within Visual Studio easily accessible, and easy to switch between
  • Scans projects and differentiates them according to code used
  • Automatically caches the projects after scanning

These are a few of the many more extensions available in the Visual Studio Marketplace. Each extension serves a particular purpose in helping you program. They perform a variety of tasks like enabling you to add snippets, navigate through projects, use different programming language and add other features. We hope this list helps you and you find the extension you have been searching for and opens up your mind to the ways you can extend Visual Studio Code to simplify and supercharge your development.