HTML Editing Features in Visual Studio 2013 Preview

HTML Editing Features in Visual Studio 2013 Preview

Rate This
  • Comments 7

The Preview Release of Visual Studio 2013 contains a surprising addition: a brand new HTML editor! In fact, VS 2013 contains two HTML editors. The story’s a little complicated, so this article will do its best to simplify the matter.

Visual Studio 2012 included a brand new CSS editor, implemented entirely in managed code and highly extensible through MEF. This allowed the development of the Web Essentials extension, which greatly extended the feature set of CSS but which is rev’ed independently in a rapid cadence. Unfortunately, the HTML editor’s architecture remained dated and could not be extended without re-shipping existing product components.

In Visual Studio 2013 we introduce the first step in remedying this situation. The HTML editor used by Razor files (.cshtml and .vbhtml) as well as normal HTML files has been replaced with entirely new code. Web Forms (.aspx and .ascx) involve significantly more complexity and did not fit into a well-polished release for Visual Studio 2013, so they will be updated in an upcoming product release. In addition, for the Preview Release, HTML files in Windows Web Applications (modern apps written in HTML and JavaScript) use the legacy HTML editor.

The main emphasis for the Preview Release of the modern HTML editor has been feature and performance parity, but there are some notable improvements as well. New features already evident in the new editor include:

A single, unified and improved HTML schema

Instead of choosing from a list of schemas, HTML IntelliSense has been unified into a single schema that makes sense; focused on real-world, HTML5-centric usage rather than specs which were never fully implemented. Additions include attributes for jQuery UI and AngularJS.

Automatic brace completion and type-through

Similar to C# with Power Tools, when you type opening quotes, parenthesis or brackets, the matching closing character is inserted ahead of the cursor. If you type that character you “type through” the highlighted matching character. This makes typing faster and more convenient and your fingers stay in home position much more of the time. The experience is consistent across code, markup, styles and script.

clip_image001

IntelliSense item grouping

Visual Studio 2012 introduced aria attributes, which unfortunately filled half the IntelliSense completion list. In Visual Studio 2013 groups of attributes are collapsed into “…” groups, which are expanded when selected or typed:

clip_image002

Improved Smart Indent and formatting

Smart Indent (automatically indenting items as you type) has been made smarter, and formatting has been made simpler, so your document turns out the way you want it to look. Format Document is now a safe operation, and Smart Indent and Format Document work together with high fidelity. You’ll have to use the editor to appreciate this, but it provides a much better “feel.” Formatting has improved enough that we’ve turned on “format on paste” by default in the HTML editor for the first time.

Advanced settings

Under Tools\Options\Text Editors\HTML (Razor) there’s a new Advanced Settings pane which is clean, tabular, and extensible. Settings have been simplified to those that customers actually use, and additional settings can easily be added through extensions similar to Web Essentials.

Note, however, that there are now two sets of HTML settings. “HTML (Razor)” applies to the modern editor, and “HTML” applies to Web Forms and pages in Windows 8 Modern JavaScript app:

clip_image003

If the nomenclature is confusing, the simplest way to select the correct settings is to right click in HTML file you’re working on and select “Formatting and Validation…”. This will always take you to the correct settings group:

clip_image004

Better Razor experience

When you open your first Razor page, colorization is nearly instant instead of taking many seconds as it did in Visual Studio 2012. We’ve made a few improvements in formatting and Smart Indent already, and many more are in the works for RTM.

Existing features that did not make it into the preview build are:

CSS Class IntelliSense

When you add a class attribute to an HTML element, previous versions of Visual Studio would provide IntelliSense completion for all classes available. As long as you were not using the Code Only profile, or Windows Express, or Bundling and Minification, or MVC. We are rewriting this feature to be faster, more accurate, and always available. However, this is not available in the Preview release. Stay tuned.

Knockout IntelliSense

Knockout IntelliSense is in current development builds of Visual Studio 2013, but just missed being ported to the Preview branch. Effort went into fixing bugs and improving performance for the Preview Release instead.

Feedback

We are vitally interested in your feedback on the new HTML editor. Please comment here, post bugs to Connect, and make requests and suggestions via User Voice. It will be helpful if you identify editor bugs as modern or legacy editor issues. The modern editor is easy to identify by typing “<p aria”. If there’s a compact entry followed by “…” it’s the modern editor, if there’s a long list of aria- entries it’s the legacy editor. Let us know what you think; we want to make Visual Studio your favorite HTML editor.

  • Would be great if you guys add AngularJS IntelliSense. Angular framework is trending and easily can become more popular than Knockout in the near future.

  • Hey Guys,

    Great work with VS 2013...

    I'd like to see this implemented: stackoverflow.com/.../114029

    Thanks,

    Leniel

  • Oops!

    I pasted the wrong link in my previous comment. I had many tabs opened and copied the wrong one. Sorry about that.

    Here's the correct one:

    stackoverflow.com/.../114029

    It' about Breaking line on each tag attribute and keeping them aligned in Visual Studio HTML code editor.

  • @Leniel, I'm happy to report that this is fixed in VS 2013 Preview.  You have to manually format the attributes yourself, but if you place the cursor at the end of each value and hit [return], attributes will be lined up as you wished.  Formatting the document will leave them that way.  Be sure to do this in an HTML file, not an .aspx Web Form which still uses the legacy editor.

    You have the freedom to have both inline and neatly stacked attributes, and we will not undo them.

    Let us know if this meets your needs.

  • @VKichline Nice to know about this... this is a progress indeed.

    I downloaded and installed VS 2013 Preview but didn't have time to play with it yet. Will take a look...

    It would be great if there was an option in VS Tools => Options... to make this (neatly stacked attributes) the default behavior when pressing Ctrl + K then Ctrl + F just like XAML formatting spacing as shown in the screenshot (see SO question). This way one wouldn't need to the formatting manually.

  • Oh, AngularJS IntelliSense works just fine. Cool, thanks guys!

    http://i.imgur.com/plKE7vy.png

  • Are there any new Razor controls coming with VS 2013?  While I do love MVC when it is done, crafting an Razor page takes *much* longer than an ASPX page.  For example a GridView is much more feature rich out of the box than Webgrid.   What I'd really love is kind of drag and drop editor that you have for web forms.  PS: Thanks for continuing to innovate on the best IDE on the planet.  

Page 1 of 1 (7 items)