HTML Editing Features in Visual Studio 2013 RC

HTML Editing Features in Visual Studio 2013 RC

  • Comments 11

Several interesting features have been added to the new HTML editor in Visual Studio 2013 RC since the VS 2013 Preview release. See HTML Editing Features in Visual Studio 2013 Preview for a rundown of the Preview features.

CSS Class and ID IntelliSense

In the Preview release, the new HTML editor did not implement CSS Class IntelliSense, meaning that if you typed <p class=”” you did not get a list of available classes. In RC, this feature is complete and is significantly better than the VS 2012 implementation.

VS 2012 had to follow file references back to CSS files to construct Class IntelliSense completion lists, so it failed to work in cases where files were included dynamically, or where ASP.NET Bundling and Minification was utilized, or even when the Web Development (Code Only) Profile was in use. VS 2013 RC inspects all available CSS files and makes class names available as values for the class attribute of any HTML tag. In cases where ID selectors are declared in CSS (such as #mainform {…}), unused ID selectors are available in value IntelliSense for id attributes.

image

ASPX and other WebForm files using the legacy editor do not benefit from this implementation in VS 2013, but may adopt the new system in future releases.

JavaScript References Auto-Sync and Update

Since VS 2012, web project templates have included a file in the Scripts folder named _references.js. This file contains JavaScript reference comments, such as:
        /// <reference path="jquery-1.8.2.js" />
These comments are used by the JavaScript Language Service to augment IntelliSense in JavaScript files, since explicit references are rarely available in JavaScript.

In VS 2013 RC, new functionality has been added to this feature. The included _references.js files now begin with:
        /// <autosync enabled="true" />
When this attribute is included and set to “true,” any JavaScript file added to the project will automatically be added to the _references.js file, and IntelliSense for that file will instantly become available in all JavaScript files and <script> blocks in the project.

Auto-sync can be set to “false” and manual updating can be performed by using context menu commands available when right-clicking on the open _references.js file:

image

You can add a _references.js file to a Scripts folder at the root of any project and turn on auto-sync using the context menu or by typing the attributed comment in. JavaScript files may be added anywhere, but the _references.js file must be in the folder named Scripts. (Important: see the caveat below: JavaScript References Auto-Sync adds Too Many References if Count Exceeds ~ 100.)

Knockout IntelliSense

In VS 2013 Preview, Knockout IntelliSense was not available, either in the legacy (WebForm) editor or in the new HTML editor. In VS 2013 RC, Knockout IntelliSense is back.

We do have a backlog of Knockout IntelliSense feature requests, but the schedule for VS 2013 did not permit us to make significant improvements in this release. There are a few bug fixes, but not feature additions in Knockout IntelliSense. See Knockout IntelliSense in ASP.NET and Web Tools 2012.2 RC for a description of this feature.

Razor Formatting

There are a large number of bug fixes and improvements in Razor editing and formatting in VS 2013 RC. Perhaps most significant is the long-awaited ability for Razor pages to layout and format correctly in Keep Tabs mode. In previous release, only Insert Spaces tab mode worked well with Razor. If you prefer tabs to spaces, try Tools\Options\Settings\Text Editors\HTML\Tabs: Keep Tabs.

image

CSS Hacks

If you’re not certain what CSS Hacks refers to, a tradition of selectively invalid CSS declarations has been employed for years to make “certain” browsers conform to standards-based behavior. In VS 2012, we introduced tolerance for and validation of CSS Hacks, as they were a solution intentionally used by many developers to deal with a difficult problem.

One hack that we did not handle was the \9 hack, which seems to be gaining significantly in popularity. For example, declarations like:
        float: none\9;
…where flagged as illegal values in VS 2013 Preview, and are now validated as intentional CSS constructs.

Un-minify

If you right-click on an HTML or Razor file, the last command in the context menu is “Un-minify.” In RC, this command does nothing, but was included to ensure that the localization process was completed for all shipping languages. In RTM this command will expand minified HTML files.

RC Caveats

Unfortunately, RC shipped with some serious HTML editor bugs which have been found and fixed for RTM. These did not make it into the ReadMe file, so I will describe them here.

Exception when Typing and [Enter] Immediately after @{ in Razor C# Files

If you place the insertion point immediately after @{ and press enter, an exception is thrown. While the Razor Editor continues to function after the exception is dismissed, it is safest to close the affected file and reopen it before continuing if you encounter this issue. This is fixed in RTM.

KO Value IntelliSense Replaced by JavaScript IntelliSense in Some Cases

Due to a race condition, in some pages KO IntelliSense works for bindings, but instead of showing available binding values, it shows JavaScript syntax after the colon. We’re aware of this issue and it has been fixed for RTM.

JavaScript References Auto-Sync adds Too Many References if Count Exceeds ~ 100

An error in the code which auto-updates the _references.js file begins adding file names recursively after the file size exceeds 10 KB. Adding the AngularJS or Globalization NuGet packages will trigger this behavior and adds hundreds of additional lines of JavaScript References. The solution to this problem is to turn auto-update off by right-clicking on the editor surface of the _references.js file, selecting “Auto-sync JavaScript References,” which sets autosync enabled="false", and manually updating references using the “Update JavaScript References” context menu in the same manner. This has been fixed in RTM.

Razor Formatting on Paste

In some cases, when you paste Razor code into a cshtml page, the formatting of the pasted text is incorrect. Specifically, when you paste Razor blocks into an indented context (inside an HTML content element like a div, for example) extra indentation will be added to each Razor block progressively. To fix up the page after such an incident, format the document (Control-K followed by Control-D).
Unfortunately, selecting the affected area and applying Format Selection (Control-K Control-F) will not work; the bug was in the Format Selection code.  This has been fixed in RTM.

HTML Validation is Noisy

If you validate legacy HTML pages, the error list may include a good deal of noise that you’re not interested in. The <font> and <center> tags generate warning and many attributes are called out which are no longer in common use, but which browsers still honor. Such pages are unlikely to be completely re-written if they are still in use, and the low signal-to-noise ratio makes it difficult to find serious errors in such pages, so the usefulness of the validation process is reduced.

In RTM, we’ve eliminated many of these warnings. While deprecated tags and attributes do not appear in IntelliSense, they are not flagged as warnings if they appear in your page. If a legacy attribute is used with an incorrect value, the value will be flagged with a warning.

Please Send Us Your Feedback

Don’t hesitate to use Send-a-Smile/Send-a-Frown, Connect, and User Voice to let us know what you think of the Visual Studio 2013 editing experience. We take your feedback seriously and give every comment full consideration. Thanks for choosing Visual Studio!

  • > "ASPX and other WebForm files using the legacy editor do not benefit from this implementation in VS 2013"

    Will I get the new features if I rename an .aspx to .htm and reopen?

    Ken

  • Can IntelliSense read classes from *.less files ?

    Add better support for *.less files: less outline window and generating *.css files from *.less files

  • @Cox, Yes you will when you rename and reopen this file.

    Another way to get new html editor experience is by using "Open With" option when you right click on file in solution explorer.

  • Consider the following markup:

    <table><tr><td><img alt="" src="MadstheMan.jpg" /></td></tr></table>

    When we press Ctrl+K,Ctrl+D, it should be formatted to:

    <table>

    ....<tr>

    ........<td>

    ............<img alt="" src="MadstheMan.jpg" />

    ........</td>

    .....</tr>

    </table>

    Similarly,

    <p><img alt="" src="MadstheMan.jpg" /></p>

    Should be formatted to:

    <p>

    ....<img alt="" src="MadstheMan.jpg" />

    </p>

    Currently, VS2013 does not format as expected.

  • Xero,

    The new HTML editor does formatting differently than the old one. More specifically, it respects your code and will not add new lines everywhere like the WebForms editor did. In VS2013 RTM you will be able to right-click and choose "Un-minify" which does what you are asking for. In RC, the "Un-minify" button doesn't actually do anything.

    The reason for making the formatter more in tune to the way you write HTML, is because many, many developers have requested this. Personally, I find it to be a way better experience. If you want to easily break tags into new lines, then try Web Essentials 2013 RC which does this on [Enter].

  • Tristan STW,

    It doesn't look in .less files. However, when using LESS aware extensions like Web Essentials, then a .css file is automatically generated and Intellisense will pick it up. Web Essentials also gives you a Preview window of the resulting CSS output.

    Here's a download link to Web Essentials for VS2013 RC: visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

  • Ken Cox,

    Yes, only the WebForms file extensions (.aspx, .ascx, .master) are being opened in the WebForms editor. All other HTML files (.html, .cshtml, etc.) opens in the new editor. You can also map specific file extensions to either the WebForms or the new editor manually. Here's a short video that explains how to do that: http://youtu.be/94INFMu9ZbM

  • @Mads, thanks for the answer. It makes sense.

    Just on another note, would it be possible to have HAML and SLIM support in WebEssentails extension?

  • Good, keep up, we love html and visual studio both.

  • It would be wonderful if Visual Studio had an amazing and very useful editor for plain HTML files but it never has. The relevant improvements in VS2013 seem to be many steps backward for plain HTML files. I apologize if I am wrong, but there appears to be very few WYSIWIG editing features, such as inserting hyperlinks.

  • I'm not getting CSS intellisense for external CSS files in VS2013. It was my understanding that this feature has been implemented. Anyone else know this problem or a solution?

    StackOverflow question here: stackoverflow.com/.../why-dont-i-get-css-class-intellisense-from-external-css-files

Page 1 of 1 (11 items)