Web Essentials, by Mads Kristensen (and many others now, thanks to having been open-sourced) is hands-down my favorite free Visual Studio add-in (the winner in the paid category is Resharper). There are a lot of big features in the tool that make it an awesome add-in, most of which have been covered in other blogs. However, for myself, it’s the little features that make the most difference. It removes more frustration from my day when a tool saves me 10 or 15 seconds here and there than it does when it saves me five minutes (although five minutes is great too, but the smaller tasks are something I notice more frequently). So, here are my top 10 things I’ve noticed in the web essentials tooling that make my day a little easier:

1. Font and image hover preview. When you are editing HTML or CSS code, you can hover over an image/font to get a preview. This is hugely helpful to folks like me who tend not to do the best job of naming some of their images or remembering what a particular font looks like. This allows me to see if I’m actually working with the image I think I am. This is one of those little things that just saves 15 seconds here and there, but those add up and the lack of interruption allows me to focus on whatever I was doing, rather than digging around trying to find the file just to look at it and breaking my flow.
2. Lorem ipsum and Lorem Pixel generation. When trying to quickly stand up a sample webpage for a client, developers frequently need fake text and images just to get the discussion about layout going. It’s best to use non-sensical text and stock images in order to keep the discussion focused on the big picture, rather than the minutia. Many developers will use online “lorem ipsum” generators to create sample text, or some variant thereof, like Jedi Ipsum, Lebowski Ipsum, or even Samuel L. Jackson Ipsum (seriously, who are your clients if you are doing this?) to generate filler text with varying degrees of appropriateness for various clients. However, Web Essentials also has the ability to generate filler text, albeit without as much flair as some of the others. Simply type in “lipsum” into the HTML editor and hit tab to have 30 words of nonsense text inserted. You can also do things like “lipsum10” to get 10 words, with lots of other options. The tooling also supports inserting lorem pixel images by entering “pix” and hitting tab. There are numerous options for generating pictures of varying sizes with varying content. Do be cautious about the keywords you use, however, and make sure that the images selected are appropriate for the audience, or at the very least, not inflammatory. This feature is supposed to help you with getting the basic layout of a site together so you can talk through it with clients. That said, I’ve used it a few times and have not encountered any issues so far.
3. Validation for open source libraries (missing bootstrap class, missing angular attribute, etc.). Test
4. Support for github-flavored markdown. Web Essentials also supports working with markdown, including markdown with embedded code in other languages, with intellisense inside. For instance, you could make a markdown file (for documentation or other purposes) and have C# code inline. Just having a nice markdown editor is helpful, but the presence of intellisense is just awesome, especially if you are writing documentation using markdown (which I do on occasion).
5. JSHint support. Web Essentials also includes support for JSHint, with warning messages placed in the Visual Studio Error List window if code doesn’t meet standards. This allows you to check for common javascript mistakes, which can sometimes result in oddball, difficult-to-pin-down bugs. The window is kept up to date as you are working, which greatly improves your workflow.
6. Browser link. Browser link is a tool used to connect your web browser to visual studio. It allows you to edit your design from the web browser and have those changes persisted back to Visual Studio. It can even bring up the file that generated a particular DOM element when that element is hovered over in the web browser. This remarkably fluid integration really cuts down on the number of times I have to jump between the browser and the IDE in order to build a good-looking page. It also has a built-in tool for finding unused CSS, which can really help you slim down your stylesheets (most people, myself included, are absolutely terrible about pruning their CSS on long-running projects).
7. Bundling and minification. Web Essentials can currently minify javascript, css, and HTML. This feature is possibly going away, however, to be replaced with grunt or gulp. Still, it is immensely useful to be able reduce the number and size of web requests to your application and this tool made a lot of that more straightforward before such things were readily available in Visual Studio.
8. Automatic synchronization of vendor-specific CSS. Certain vendor-specific tags are required for certain CSS stylings to actually work in particular browsers. Web Essentials can keep these and the standard stylings for the same effect synchronized. Say you are dealing with border-radius. There are special vendor-specific ways of specifying this for mozilla and webkit-based browsers. If you edit these, it will change the others at the same time in an effort to keep things working correctly across all browsers. This is enormously helpful in reducing support costs and oddball problems caused by spotty standards implementation.
9. CSS Browser support visual cues. When you hover over a CSS property value, a little popup comes up that tells you which browsers support that particular property. It’s a little thing, but if you get in the habit of using it, you’ll start to get a pretty good mental picture of which features are supported in which browser, which can help considerably down the line. It also keeps you from having to break your flow to go figure it out.
10. Typescript preview window. When editing typescript, sometimes it’s hard to visualize exactly what sort of javascript will be emitted. Typescript is really amazing for bringing a lot of better programming constructs to javascript, using javascript idioms. However, sometimes it can be a little difficult to figure out exactly how the output is going to look, which can make debugging a bit of a pain (Web Essentials will also let you see the typescript using browser link, by the way). Thankfully, web essentials actually ships with a preview pane, to let you see the javascript that will be generated by your typescript. This was enormously helpful to me the other day, when I had an issue regarding the scoping of “this” within a typescript lambda. It wasn’t (but should have been) immediately obvious to me where the problem was, but having the preview pane made it much easier to see where I had slipped up.
    With most things, I look at large features and think “well, of course it’s supposed to do that”. When I see something little though, something that just makes my life easier, where I know someone spent hours of their time making it so that I didn’t have to spend seconds of my own, that becomes something I deeply appreciate. Web Essentials has a lot of those kind of things. I strongly encourage you to check it out if you do anything with ASP.NET or javascript using Visual Studio, as the big features will save you enormous amounts of time, and the smaller ones will get rid of frustrations you didn’t even know were there.