Each month, I use a variety of ways to come up with an idea for the following month’s column here on Dev Pro Connections. Sometimes I look at the things I’ve been working on and what cool new stuff I’ve been learning. Other times, I surf blogs and other social media to see what hot buzzwords are trending in the world of ASP.NET and the Microsoft development stack. There are even times I look back on old columns and see what deserves an update. Then there are the times I’m simply slapped upside the head with something obvious that I need to write about, like this month's topic; Web Essentials.
Web Essentials’ founder and primary developer, Mads Kristensen, has been a Program Manager at Microsoft since joining the company in 2010. During its short existence, Web Essentials has become a test bed for new Visual Studio features. If you compare the change logs for the two products, you’ll find that some of Visual Studio’s coolest enhancements, such as support for JavaScript and widely used libraries, as well as CSS, started in Web Essentials. What’s really amazing is that even with features being regularly pilfered by Visual Studio, Web Essentials is still a mind-blowing collection of tools that enhance web development.
I hope that at this point, I’ve caught your interest with what Web Essentials is all about. But what is it? Web Essentials is an extension for Visual Studio 2012 and 2013 that you can install through the Tools/Extensions and Updates item on the main menu. According to the Web Essentials website, “Web Essentials extends Visual Studio with a lot of new features that web developers have been missing for many years. If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS, then you will find many useful features that make your life as a developer easier.” That’s an understatement!
You can check out the project website for the full details of what Web Essentials can do, but here’s a quick summary of the highlights:
- Enhancements to the Visual Studio CSS editor, such as generating vendor-specific properties, adding custom fonts, support for custom hacks, and more. This has long been one of the strongest parts of Web Essentials.
- “Writing JavaScript is so much better with Web Essentials.” Another understatement and another area where Web Essentials shines. Web Essentials includes support for JSHint, right-click minification, automatic generation of source maps, auto-completion of braces, code regions a-la-C# and VB, and better Intellisense.
- Enhanced support for writing HTML (of course). Support for ZenCoding syntax, code regions, formatting when you press ENTER, dynamic Intellisense, smart tags, and more.
- Support for TypeScript, adding all the features you want that haven’t made it into Visual Studio yet.
- Support for third-party tools and open source projects like LESS, CoffeeScript, node.js, and Markdown. There isn’t a lot of support for AngularJS and Bootstrap yet, other than Web Essentials’ HTML, CSS, and JavaScript features, but I suspect support is coming.
One nice thing about Web Essentials is that, because it’s a Microsoft product, it integrates cleanly with Visual Studio. The integration is so clean that, without looking at the Web Essentials documentation, I usually can’t tell whether a particular feature is built into Visual Studio or implemented in the extension.
Web Essentials is highly configurable using the regular Tools/Options dialog box. Out of the box, the extension is fairly invisible because of its deep integration with Visual Studio, but you can tweak a lot of settings to make it work better with the flow of your personal development style.
I could go on and on about Web Essentials. If you don’t already have it installed, go install it now in both Visual Studio 2012 and 2013 from the Tools/Extensions and Updates menu item. If you have it installed, make sure it’s updated, then refresh yourself on what features you can make use of now. Even when releases have been out for a while, I discover new nuggets that I can make use of immediately.
