Visual Studio 2015: My Favorite Extensions (Web Edition)

I was just installing Visual Studio 2015 on a new machine today. This made me reflect on two items. Firstly, why doesn’t Microsoft allow me to sync my extensions between machines? Secondly, what extensions should I be putting on this copy of Visual Studio? The former question is going to have to be rhetorical. I can make a list for the latter though.

I do a bunch of work in web development. I’m slowly learning TypeScript and have settled in on React/Flux as a great framework, although I occasionally dabble in Angular, Ember, Aurelia and others. Which reminds me – must write that Ember post some time. I’ll take some help though with these extensions:

Indent Guides

Coding in JavaScript or TypeScript is inevitably a task of filling in blocks. Indent Guides helps you see where the blocks begin and end by adding vertical dots between the opening and closing brace. It’s not too useful when you have large blocks of code, but it’s excellent when you have missed a closing brace and don’t know where to put it.

Web Essentials

Seriously, there are very few extensions that I must have above all others – this is one of them. Web Essentials is a must have. It provides better support for TypeScript and adds support for less, coffeescript, markdown and has specific support for frameworks like Aurelia. It has been unbundling some features recently, so this isn’t the slam-dunk it used to be but it’s still on the essential list.

Then, in alphabetical order:

Color Scheme Selector

If you go to Paletton to define color schemes for your web application, the Color Scheme Selector does the same thing. I like the nice graphic examples within Paletton and it outputs the colors in less, scss and css formats. However, I’m not always on an Internet connection. When I’m not, this is my tool of choice.


I use Font Awesome a lot. Glyphfriend enhances Intellisense by providing a preview of the font I am putting in my markup. It will do the same for several other icon fonts as well. Given the hundreds of icons that these icon fonts provide, the double check is a time saver.

Grunt Launcher

Since I do so much work in Gulp, it’s worthwhile being able to right-click on the gulp file and run a task. The additional window of the Task Runner Explorer isn’t necessarily the most convenient way of doing this. I like Grunt Launcher especially when I am developing gulp files.

Mexedge Stylesheet Extension

UPDATE The Mexedge Stylesheet Extension has compatibility issues with Visual Studio 2015. If you find you cannot see the contents of folders in your Solution Explorer, then uninstall the Mexedge Stylesheet Extension – you’ve got a conflict. As a result of this, I can no longer recommend this extension.

I’ve made no bones about the fact that I hate CSS. The Mexedge Stylesheet Extension is a useful tool that represents your stylesheet as a tree structure. You don’t really get this until you have Visual Studio on a high resolution large screen and are editing your CSS and HTML side-by-side. Mexedge allows you to see what is actually going on. It isn’t as useful since I moved to consolidating all my CSS code into LESS, but it’s still useful on occasion.

Open Command Line

There are some times I want to run a Node command on the command line. It may be rimraf (for deep deleting files), eslint on a file with custom options, tsd or npm to download a new package. Open Command Line opens up your preferred command line (mine is PowerShell) in the project directory.

Regex Tester

I hate regular expressions. Sure, I KNOW them, but putting them into code and then running the code to see if they work is generally a time waster. Thus, I use Regex Tester to test the regular expressions before I put them into my code.


Sidewaffle is a set of custom templates for common web files. Things like Angular controllers, files, manifest files and many more. It’s constantly expanding and you can submit your own to the list. This is a great open source project.

Trailing Whitespace Visualizer

One of the things eslint complains about is spaces at the end of files. The Trailing Whitespace Visualizer makes them a nice pink color in the editor so you can see them. That means you can remove them before eslint complains.

I’m not including…

Anything that is in my gulp workflow is no longer included as an extension. That includes image optimization, web compilers for less, scss and typescript and linting. If it’s in my Gulp workflow, then it’s run by the Task Runner Explorer and not by an extension. I’m putting more and more stuff in the Gulp workflow so that people without Visual Studio can build projects.

I’m also not including a test runner. There are Visual Studio integrations for Karma, Jasmine and Chutzpah that integrate the test runner into Visual Studios test explorer. If you run JavaScript tests (and you should, even if I don’t), then you probably want to look into the appropriate one. I’ve not used them because, well, I’m not that good at writing tests.

Next Up

So, what did I miss? Do you have that perfect Visual Studio extension for web development? Leave it in the comments section! In my next blog post, I’ll take a look at what I used for developing for mobile apps.

6 thoughts

  1. Nice article. Nice selection of extensions! But …you missed a simple but effective one … VsCommandBuddy. Helps to clue eveyrthing together with commands per project/solution on a toolbar!


  2. There are extensions that might help with both of the things you mentioned in the first paragraph.

    Roaming Extension Manager ( makes it easy to track your favorite extensions across development environments.

    Mads Kristensen’s new Suggested Extensions ( recommends extensions based on file types and projects.


    • Thanks Jon! You are quite correct. Of course, you still have to install Roaming Extension Manager first, but it’s one extension instead of several. I hadn’t seen Suggested Extensions prior – awesome idea. Will have to check it out.


Comments are closed.