Earlier this week we shipped Visual Studio 2013 Update 2 CTP 2. Gotta love that name. The previous CTP 1 release didn’t contain any web specific features, but CTP 2 is packed with web goodness. Here are some of the highlights:

  • Improvements to the LESS editor
    • Nested media queries
    • Named parameters
    • Selector interpolation
    • Go to definition for variables, mixins and @import
    • Many additional tweaks and fixes
  • A brand new SCSS editor
    • With all the bells and whistles you’d expect
  • A brand new JSON editor
    • Basic editor features. More to come in the final release
  • Knockout.js Intellisense updates
    • Nested view model support
    • KO comments
    • Fixes and tweaks
  • New URL picker for HTML, CSS, LESS and SCSS
  • Browser Link updates
    • HTTPS support
    • Static HTML source mapping
    • SPA support for mapping data
    • Auto-update mapping data
  • General updates, tweaks and fixes

Even though the release is “just” a CTP, all these features are very solid and of high quality. I can only recommend giving CTP 2 a try if you haven’t already. There is so much web development awesomeness in it.

Web Essentials doesn’t work with CTP 2

That’s right, Web Essentials 1.9 and earlier doesn’t work with CTP 2 due to API changes in Visual Studio. If you install Web Essentials on CTP 2 you will be greeted with this nice error message:


The ‘EditorExtensionsPackage’ package did not load correctly. This makes little sense to most people, since it’s not very clear what EditorExtensionsPackage is. Well, it’s the original name of Web Essentials that never got changed as you can see here in the source code.

Download a compatible version

The open source community  around Web Essentials is working on a new release that is compatible with CTP 2 and beyond. It has not yet been released. When it’s released, it will only work on Update 2 CTP 2 and later. Because of the API changes, we haven’t been able to make it backwards compatible, unfortunately.

So, if you want to give CTP 2 a spin, then please try out the new nightly builds of Web Essentials. As an added benefit, the latest build also contains Intellisense improvements to the JavaScript editor as well as support for JsDoc comments.

Download Visual Studio Update 2 CTP 2
Download Web Essentials 2013 for CTP 2

I have yet to see any issues with the latest build of Web Essentials. Actually, several existing bugs have been fixed in that build.


Update Jan 1st 2014. TypeScript support is back in Web Essentials!

When Web Essentials was ported to Visual Studio 2013, a lot of features were removed. This was because many of those features were built directly in to Visual Studio 2013 and therefore no longer needed support by Web Essentials. That’s not exactly the reason why the support for TypeScript was removed.

TypeScript has been evolving at a steady pace since it was released in the fall of 2012. It’s now up to version 0.9 and that means that the final 1.0 release is getting closer. The Compile on save feature introduced by Web Essentials 2012 has now been rolled into TypeScript and the feature will be broadened in the months to come. That means Compile on save will be natively available for more project types, including ASP.NET projects, in the foreseeable future. If both Web Essentials and the TypeScript tooling provide the exact same functionality, there is bound to be conflicts.

You might remember what happened when LESS and CoffeeScript tooling was moved from Web Essentials into Visual Studio 2012 Update 2. Unless you updated both at the same time, Visual Studio would crash. The Visual Studio Web Team had to write a blog post about it and even ScottGu mentioned it. It was bad. Really bad.

In order not to repeat the same mistake twice, we’ve opted for not having TypeScript tooling in Web Essentials. That’s not to say we’ll never add extra TypeScript features in Web Essentials, but it means that we are doing what we can to avoid any collisions between the two toolsets.

As a TypeScript user you should take this as a positive thing, because it means that TypeScript is getting closer to its final 1.0 release and it will have some of the features you used to rely on Web Essentials to provide.


imageIn Web Essentials 1.7 for Visual Studio 2013 it is now easier than ever to work with images. In this video I'm demoing a lot of new features including:

  • Paste image from clipboard onto VS editor
  • Lossless image optimization
  • Create image sprites
  • Sprites are better with LESS/SCSS
  • Base64 encode images
  • Optimize base64 encoded images

Image workflow in Web Essentials and Visual Studio 2013

    More features were added to Web Essentials than what I'm showing in the demo video. These features include:

    • Paste image from clipboard onto CSS, LESS, SCSS, JavaScript, TypeScript, Markdown
    • Save base64 encoded image back to disk
    • Re-embed existing image as base64 encoded dataURI
    • Adding more images to a sprite
    • Changing an existing sprite without breaking your site
    • Optimize image from the HTML editor (Smart Tag on <img> element)
    • Base64 encode images from a Smart Tag in the HTML editor
    • Save base64 encoded image to disk from HTML editor
    • Drag 'n drop existing image onto Markdown editor

    Please let me know what you think about these new image workflow features.


    Today was the long-awaited day when Visual Studio 2013 RTM was released. Check out Scott Guthrie’s blog post about all the new features for web developers. Today is also the day Web Essentials 2013 ships as version 1.0.

    Don’t mix RTM and RC!

    The new release of Web Essentials 2013 only works on Visual Studio 2013 RTM. Though you can install it on VS 2013 RC, some features will not surface and you might see a few alert boxes telling youSomething went wrong”.

    Also, all the Browser Link extensions will only work for VS2013 RTM. That’s because the Browser Link API in Visual Studio changed slightly between RC and RTM.

    You can still download the version of Web Essentials that works with Visual Studio 2013 RC.

    A new web-based menu

    With the introduction of Browser Link in Visual Studio 2013, it’s now possible for Web Essentials (and anyone else) to use the API to create brand new features that simply wasn’t possible before.

    One such feature is the Browser Link menu that shows up at the bottom of your pages in the browsers. It looks like this:


    It floats at the bottom of your web pages, but unless your mouse cursor is hovering it, it will be semi-transparent to get out of the way:


    You can also toggle the visibility of the menu entirely. Just hit the CTRL key to either show or hide the menu. If you always want it to be hidden until you manually hit the CTRL key, then check the Auto-hide box on the right.

    The idea behind the menu is to make it easy to discover the various Browser Link features provided by Web Essentials. Keep in mind that this is our first attempt at injecting a menu on your web pages, so I’d be really interested in any feedback you might have on this approach.

    I’ve been using it for about a month now and I absolutely love having it there. I auto-hide it and then just hit CTRL when I need it and it hasn’t been annoying at all.

    Stability and reliability

    During the Visual Studio 2013 Preview and RC timeframe, we saw a lot of crashes caused by Web Essentials. I knew that was a possibility because the various Visual Studio API’s changed between Preview and RC (and also for RTM in the case of Browser Link).

    It was therefore a top priority for me to make version 1.0 of Web Essentials as stabile and reliable as possible. A lot of bugs have been fixed and it’s probably the most reliable version of Web Essentials ever.

    That said, there might still be a few hiccups left undiscovered. If you encounter any, even small ones, please don’t hesitate to open a bug on GitHub so it can be fixed.

    Please enjoy Web Essentials 2013, suggest new features and send pull requests.


    Web EssentialsAt the //build/ conference when Visual Studio 2013 Preview was released, I open sourced Web Essentials 2013 live on stage. So far that has been really successful with 110 pull requests sent by the community. And Visual Studio 2013 is not even out in its final version yet!

    Now it’s time to open source Web Essentials 2012 as well. It has taken a little longer than I wanted, but now it’s finally done and published.

    The code

    The source code for both Web Essentials 2012 and 2013 is on GitHub.

    Web Essentials 2012

    Web Essentials 2013

    Remember to also check out my latest project SideWaffle that I’m building with Sayed and the ASP.NET/Visual Studio community.