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:
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.
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.
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, README.md 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.
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.