Due to the brand new HTML editor in Visual Studio 2013, static HTML files no longer has the Design|Split|Source options enabled by default.

Design, Split and Source view

That’s because the new HTML editor is the default editor for all HTML files with the exception of ASP.NET Web Forms files (.aspx, .ascx, .master). However, it is only the Web Forms editor that has support for the designer and split view.

So all we have to do is to map our .html or .htm files to use the Web Forms editor instead of the new HTML editor.

Simply right-click any .html/.htm file in Solution Explorer and select Open With…

Open With context menu

Now select HTML (Web Forms) Editor, click Set as Default and then hit OK.

Visual Studio's Open With dialog

All files with the same extension will now always open in the Web Forms editor and you get both Design- and Split view.

I also recorded a short video showing a different way to accomplish the same thing.

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:

image

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:

image

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.