Web Dev @ Microsoft
Article
By David Voyles

Some of My Favorite Visual Studio Extensions

By David Voyles

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

I recently wrote an article about some of my favorite Chrome extensions, partly because I wanted to share some of the things I felt worked well, but also because I wanted to learn about what others were using as well. I’ve added quite a few extensions in my daily use based on those recommendations, and now I’d like to do the same for Visual Studio.

I spend most of my programming time within Visual Studio 2015 Community edition, where Microsoft essentially made VS Professional free and re-branded it as a subscription-based experience with additional benefits like virtualization and Azure cloud-compute (coming soon, I’m told, check back): Visual Studio Dev Essentials. Some of these extensions really make my life easier, so I wanted to highlight them.

Join the conversation on Reddit.

Code Alignment

Code alignment

It does exactly what it says — aligns your code for you. This may not sound like much, but when working in a language such as JavaScript all day, where everything is loosely typed, you can be prone to mistakes. Because of this, I am meticulous about the way I line up my code, so that I can easily spot mistakes. A former co-worker taught me this, and it proved to be invaluable as I began to work on larger projects, and with other people in particular.

Sure, it can take some more time to line everything up, but you can debug and spot mistakes far more quickly, thereby saving you time in the long run. With this, you can align by one of the pre-defined options, or at any point align by a character of your choice.

Here is what it looks like in the VS toolbar:

Visual Studio toolbar

If I click on the Align by… text, a dialogue box appears, and I can enter the character I want to align. Very helpful when using key-value pairs separated by a colon.

Text box dialogue

Here is an example that I use in my own code:

switch.js sample code

switch.js hosted by GitHub | view raw

Now isn’t that easy to read? Here is another, where I make use of the Align by… dialogue:

change.VideoStream.js sample code

change.VideoStream.js hosted by GitHub | view raw

ReSharper

ReSharper

Where would I be without ReSharper? This thing has helped me out so much over the years and really assisted me in learning how to code. It’s the only one on the list which isn’t free, but I’ve found it to be worth every penny.

ReSharper isn’t limited to only helping with your C# code, as it certainly catches quite a few of my issues in JavaScript, but it also has the ability to work with C++. One benefit that comes to mind is that it highlights the fact that there are several using statements I have included in a class, but am actually not using. Why clutter up my intellisense with things I am not using?

ReSharper debugging

Even more useful, ReSharper can tell me if code can be refactored, of if there is a cleaner way of writing something. I’ve used this numerous times, and it’s really assisted me in understanding how to write cleaner code.

On the JavaScript side of things, it can point out when I have declared variables but never make use of them.

ReSharper on JavaScript side

It can also tell me when I make use of an object before I’ve declared it:

ReSharper detecting JavaScript duplicate declaration

It even spots duplicate declarations:

ReSharper detecting JavaScript duplicate declaration

In this case though, I declared this twice on purpose. It is a variable named init, which overwrites the name of the function init, but points to the same object, so it is referenced just the same. I do this because of hoisting in JavaScript, and to make the function easier to debug.

Open Command Line

Open Command Line

This one is extremely simple, but since I am constantly opening the command line from within projects to do things such as git operations, it allows me to do it from within the Visual Studio solutions window.

Simple right-click on any file or folder, and the option Open Command Line appears. Even better, I can access PowerShell from here!

Open Command Line accessing PowerShell

JSLint.Net for Visual Studio

JSLint.Net

Everyone’s favorite linter comes to Visual Studio. For those of you not familiar with JSLint, it is essentially JSHint, but with very strict rules that prevent you from even compiling the project. JSHint basically nudges you to say “Hey, I don’t think you want to write your JavaScript that way — it’s not a best practice and can lead to potential errors down the road.”

For example, using == instead of === for type coercion.


if ( nMyNumber == 1 ) {
  DoSomething();
}

This would prevent you from compiling because it would suggest using === to determine that what you are looking for is in fact a double, and not a string which can be coerced into a number.

This is a fantastic way to keep you and your team on the same page in terms of style when writing code. You have a bevy of options to tweak as well, in case the settings are too strict for your own tastes.

Web Essentials 2015

Web Essentials 2015

If you are writing any sort of web code in Visual Studio, then this is a must-have. It offers a ton of features that make your life easier, including browser link, which allows for real time communication between the browser and Visual Studio, so that you can debug your front-end web code from within VS. You can now make changes to your HTML or CSS from either your browser’s debugging tools or within VS, and those changes are instantly visible within your browser, and can also be saved.

Web Essentials 2015

No longer do you need to tweak your CSS within your browser’s debugger until things look just right, remember the changes you made, and write them again within your IDE. Now, you can write it once, and it will be saved everywhere.

This blog post includes a far deeper view of the benefits this extensions offers.

Which Extensions Are You Using?

I’ll follow this up with a second post in the near future, but for now I think this is a great starting point for folks using Visual Studio. I’d be curious to hear about which extensions you are using, so let me know below, and I’ll give them a try!

More Hands-On with Web Development

This article is part of the web development series from Microsoft evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.

We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com:

More in-depth learning from our engineers and evangelists:

Our community open source projects:

More free tools and back-end web dev stuff:

  • Jonathan Penny

    Productivity Power Tools and Multi Editing are two I cannot go without. Web Compiler and Bundler and Minifier are also really useful if working with SASS/LESS as it will transpile to raw CSS and then minify it.

    I’ve yet to try ReSharper, can’t decide if it’s worth the money. I don’t code in C# often enough to justify the money I don’t think.

    • DaveVoyles

      ReSharper definitely helps with JS as well, and has some tools for C++. Try it out for a month and see how it goes. I think it is free for at least that period.

      Many people have recommended Productivity Power Tools, so that’s going to be the next thing I grab.

      Multi Editing? I know that you can edit multiple lines at once by holding Alt, I believe. Does this do the same thing?

  • Matthijs ter Woord

    Great article. As a enthusiastic user of ReSharper, I’m interested in code alignment, but I am unsure how well they play together. Any tips on this?

    • DaveVoyles

      Sorry just seeing these now.

      ReSharper and Code Alignment play together well. Whenever I write a new large block, I align it all with Code Alignment.

  • DaveVoyles

    Woah, just discovering this now. Thank you!

Recommended
Sponsors
Get the latest in Front-end, once a week, for free.