A few of my favorite new HTML source editor features in Visual Web Developer & VS 2005

We spent a lot of time in Visual Web Developer and VS 2005 focusing on delivering a really great HTML source editing experience (we also did a lot in design-view – but this blog post is just about the HTML source editor).  Below are a few of the cool new features it enables (none of these were in VS 2003).  All but one of the features are in the free Visual Web Developer Express version that you can download.

 

Intellisense Everywhere:

 

We now support intellisense everywhere within the HTML editor.  For example:

 

We now support it for ASP.NET directives:

 

 

We now support it for <script runat=”server”> code blocks and <% %> nuggets:

 

 

We now support it for CSS style blocks (in additional to external CSS files):

 

 

We also obviously support intellisense client-side script (more on that next), as well as any XML file with a DTD or XML Schema.  We also support intellisense now within web.config files.

 

Standards and Browser Based HTML/Script Intellisense:

 

You can now automatically vary the HTML + client-script intellisense you receive in the editor based on either a standards based schema (html 4.01, xhtml transitional, xhtml strict, etc) or for a specific browser device (IE 6.0, etc).

 

There is now a device drop-down list in the toolbar that allows you to easily toggle between the different schemas:

 

 

This will then update all HTML/client intellisense settings (so you only see those elements/attribute/script object model values legal for the particular schema target you have picked):

 

 

Note that the default schema validation value for new web projects is now XHTML Transitional.  You can also easily add your own schemas to VS if you want to modify any of the built-in ones or publish your own.

 

Intellisense for User Controls and Custom Controls (no special work required):

 

We now (automatically) support HTML editor based intellisense for any control or user-control used within the project.  For example, the below screen-shot shows the intellisense I get when consuming an .ascx user-control on a page that has a custom “Foo” property:

 

 

The new web project system will dynamically compile and use reflection to figure out what properties are exposed on the user-control.

 

Custom compiled controls no longer need to jump through schema registration hoops to get intellisense either.  Simply register the control using a standard <%@ Register %> directive at the top of the page, and VS will also use reflection to provide intellisense within the html editor.  (note: this was a real pain with VS 2003).

 

Tag-Navigator:

 

At the bottom of an html or asp.net source-view document is a new control called the “tag-navigator”.  It updates as you move around a document, and always shows the complete parent chain of html tags from the root <html> element to the location where the cursor currently is.  If any of these tags has an ID value, it will also include that value as well (for example: div#myidvalue).

 

This makes it much easier to figure out “where am I in a document”, and figure out the nesting relationships of elements quickly (“am I in this div/table or a deeper nested one?”).  This can be super-useful with large html documents.

 

For example: here is a screenshot of what it looks like when I copy/pasted in some html from the my.yahoo.com website (which has a lot of html):

 

 

What is then cool is that when you click on any of the elements in the navigator it will highlight them (and optionally allow you to highlight the inner contents).

 

Collapse/Expand HTML:

 

Container elements in HTML are now collapsible (and expandable) using +/- gestures in the left hand side of the editor.  For example, the GridView in the below screen-shot is collapsed to hide all of its inner content:

 

 

Note that you can have multiple levels of collapsing – so you could expand the above GridView to see more of its contents, but still have one of its templates inside collapsed.  Makes dealing with lots of content much cleaner.

 

HTML Tag Bolding:

 

If you click on (or navigate onto) any element within the html editor, we will now bold both it and its end tag:

 

 

This also makes it much easier to navigate around deeply nested HTML documents and figure out where elements start and end.

 

Per Tag Formatting Rules:

 

You can now specify and control precisely how your HTML will look when you add it to a page.  You can set both the defaults for capitalization rules, indentations, whitespace, etc for elements:

 

 

As well as customize default formatting settings on a per-element or control basis:

 

 

This will control what the html source will look like when you add it in the designer (for example: drag/drop from a toolbox). 

 

You can also then within the html source editor select any HTML you want, right-click, and choose to “Format Selection”.  This will modify the selected HTML to follow your coding guideline rules (very useful when you are given ugly HTML to use).

 

Per HTML Element/Control Colorization:

 

Someone in the Beta1 timeframe told us that he absolutely loved the new HTML editor capabilities, and that the only feature he was missing that would prevent him from switching from HomeSite was the ability to perform per-tag colorization in the source editor.

 

 

Whoever you are out there – we hope you are happy now (it is supported in the final release, complete with a 32-bit color palate to choose from). ;-)

 

Section 508 and WCAG Accessibility Checker:

 

You can now automatically validate your HTML markup against Section 508 and WCAG accessibility standards (just select the accessibility icon in the toolbar):

 

 

The HTML editor will highlight violations in the source document, as well as list errors/warnings in the error list:

 

 

Property Grid and Toolbox work in Source View:

 

You can now cursor onto any HTML element or ASP.NET Server Control tag in the IDE and then use the property grid to see and edit its properties (no longer a need to switch into design-view to-do this).

 

You can also now drag/drop ASP.NET server controls from the toolbox in source-view and automatically position them within the html source (saves you having to type them).

 

No HTML Reformatting:

 

The HTML designer no longer modifies your HTML when you switch between designer and source view, and preserves your existing whitespace and formatting settings.  This isn’t really an HTML source editor feature, but I thought I’d mention in anyway since it always makes people happy.

 

Location/Selection Preservation between Source and Design View:

 

One subtle but cool feature we added was the ability to preserve your cursor/selection when you switch to/from design/source view.

 

For example, say you select a control or some text in HTML source view:

 

 

When you switch to design-view, the same element/control will be selected in WYSIWYG mode:

 

 

Note that this also happens the reverse way – select something in the designer and switch to source view, and the cursor and/or selection will be at the right place.

 

Makes switching back and forth pretty easy.

 

Summary

 

There are a lot of additional new things I could call out – but hopefully this gives you a taste of some of the cool new features you can take advantage of.

 

Hope you enjoy them,

 

Scott

 

P.S. All of the features above except the accessibility checker are in the free Visual Web Developer Express Edition of the product. 

 

 

28 Comments

  • &gt;The HTML designer no longer modifies your HTML



    That &quot;feature&quot; earns applause at every event where it is announced!



    It pays to listen to the customers. &lt;grin&gt;

  • Most people tend to think of it more as a &quot;bug fix&quot; than a feature. ;-)



    But it actually took several man years to-do and a lot of engineering. Thank goodness we have it now...

  • As a long-time user of HomeSite (and VS), I can honestly say that the new editor in VS is really good!

    In fact, while I hated doing html work in vs.net 2003 because of the non-standard markup generated and html formatting, this time it's the opposite...I don't leave VS2005 anymore to do some html stuff, except for style sheets. You should have integrated the TopStyle editor somehow, there's no alternative.

  • Scott,



    All of the changes you mentioned are really awesome. The source code preservation is so much appreciated, as are all of the little things like preserving the cursor between source/design view.



    I cannot tell you how much I appreciate this. Call it a bug fix or whatever, it's great. Thanks.

  • *Almost* everywhere Scott :-). Data-binding expressions in server-side control attributes don't get Intellisense - and here's somewhere I could really do with them. e.g.



    &lt;asp:Button runat=server Text='&lt;%# /*no IntelliSense here :-( */ %&gt;'





    But data-binding expressions do work &quot;out in the open&quot;:



    &lt;p&gt;

    &lt;%# /*I DO get IntelliSense here :-) */ %&gt;

    &lt;/p&gt;



    I guess this is a known issue?

  • I've been using VS2005 for a while now (thanks to the stable betas) and I have to say you guys have done an great job. Most of the things that bugged me about 2003 have been fixed (yes, including the 'not changing source code when switching' &quot;feature&quot;!)



    I also have to say that I am now a complete and utter Intellisense addict. I'm finding it hard to type this right now, I'm expecting a handy little dropdown list to complete my thoughts for me...

  • Thanks Scott - good list.



    Is is possible to turn on the intellisense on a standalone js file for javascript or does it have to be in the page?

  • Scott, the new tool is 1000% better than VS 2003, so thanks for all the great work. However there are a few disappointments I need to point out.



    &gt; Property Grid and Toolbox work in Source View



    a) For server controls, it does show *Properties* but does not show *Events* when in source view, while in design view it shows both properties and events.



    b) In source view it is *slow* showing properties in the grid. In design view, when you click on a server control, the properties appear instantly; however when in source view, when I click on a control, there is a 2-5 second lag before the properties appear in the grid (however Intellisense picks them up instantly while you are typing which is good). Note that I do my development work on a new Dell with 1.3 GB or RAM, but it is also a slow machine being the Dell Laptop X1 with the Intel ULV 1.1 Ghz Pentium M. If you are developing on a super fast 3 Ghz desktop the speed is probably acceptable.



    c) If you add an event to a user control (ie OnCustomerSelected), this neither shows up in the source view or the design view, so while the properties do appear in both source/design view, events never appear in either view. However, the events do show up when using intellisence in the source view.



    Of course....(c) is the show stopper, due to the way it impacts beginners trying to learn ASP.NET and reuse user controls written my other more experienced users.



    Scott, I did ping you after Beta 1 (or maybe it was Beta 2) about the issue of events not appearing in the property grid for user controls. I personally thought that one of the most obvious scenarios would be enabling a user to drag and drop a user control, and then just double click on an event to wire it up. Pity this could not be supported for RTM, and it came as a surprise because such a feature targets novice users, and I incorrectly thought it would have been a no-brainer to implement.



    For me, this makes the experience sub optimal for notice users because events will not be discoverable, other than via intellisense. Is there any *hack* or *tip* to get this working, or could you address it in SP1 next year?

  • Add another one to the list. No intellisense support in .skin files.

  • Scott,

    Good stuff! You mention support for intellisense in web.config files...



    If I have a custom config section handled by a class derived from ConfigurationSection, is there a way to get intellisense support for it?

  • And for my second question...



    I'm pretty pumped about the per tag formatting rules. Is there some way to export/import these, so that I could, for instance, define a set of rules as a baseline standard for all members of a technical team to use, export it, and have each member import?

  • any (rough) idea on how many features were added to VS2005?

  • Hi Chris,



    .Skin files don't have intellisense (but do get color coding). We are looking to add support for these in the next release.



    .sitemap files do get intellisense though.



    Hope this helps,



    Scott

  • Hi Robin,



    Yep -- you can absolutely import and export html formatting settings so that you can re-use them across teams. If you use the Tools-&gt;Import and Export settings menu item it will walk you through saving settings out to an XML file.



    Hope this helps,



    Scott

  • Hi Robin,



    I believe there is a an XML schema file that VS ships that you can edit to add custom intellisense schema for your configuration providers. I actually am not sure which file it is -- but if you hunt around under program files\VS hopefully you can find it (if not send me mail and I'll try and look it up).



    Thanks,



    Scott

  • Hi Eber,



    With regard to your question on how many new features there are in VS 2005 -- my guess is thousands (some big/some small). There is a heck of a lot of new stuff added.



    Hope this helps,



    Scott

  • Hi Scott,



    I had attended your presentation about ASP.NET 2.0 at Milwaukee, in Feb this year, when it was still in its Beta days. All that I can say, is THANKS a lot for heading this monumental effort. I CANNOT wait enough, to get my hands-on-it-for-work-purposes...



    Of all the features, I really like how its become very clean (without unneeded auto-generated code), sticky controls from design to source, and all the intellisense features...



    I have now reloacted to Maryland, but will always remember attending your presentation, along with other great speakers that day, including Rob Howard.



    Thanks,

    Arvind Venugopal,

    MCSD .NET

  • I don't need to say how much better vs2005 is. Is there an option to turn off the &quot;HTML Tag Bolding&quot;? The font I use changes width when bolded so it becomes annoying seeing the tag attributes shift around and eventually wrap to the next line. I use vs2005 Standard.

  • Hi Sergio,



    Yep -- you can turn this off tag bolding if you want to. Select the Tools-&gt;Options menu item, and then under the Text Editor-&gt;General section uncheck the &quot;Automatic Delimiter Highlight&quot; setting.



    Hope this helps,



    Scott

  • Hi Scott,



    Although I have been using VWD/VS 2005 for a while now and I am familiar with almost all of the features you mentioned.



    They are just too good to say the least. In the past, I had to use Dreamweaver for modifying my CSS and do some design-time changes in it. But now thanks to the improved designer in VS2005, I no longer need to switch to any other editor, I particularly like the Tag Navigator feature in VS2005 (one of the things I used Dreamweaver for).The &quot;Intellisense Everywhere&quot; feature also rocks!

  • In a large aspx, editing in source view can be very slow on my reasonable fast cpu w/ 2Gb RAM. Is this the Tag Navigator at work, and is there a way to turn it off?

  • I'm sorry, but I can't join the others in their applause. While it's clear that VS2005 is very well done, ASP.Net remains dependent on client-side scripting for things. In the ASP Classic I've been doing for years, Rule #1 is to never trust the client for anything, and in most cases treat anything sent to the server as hostile until proven otherwise.



    There are too many hackers out there that will try all kinds of blind POST's, malformed GET's, etc., and certainly plenty of people out there that have scripting turned off or otherwise interfereed with by privacy managers, soft firewalls, and IT policies, not to mention the hundreds of devices that don't even have scripting in them at all.



    The only way to deal with all this is to handle it all server side. We don't even bother writing client script code, since it would be redundant to the server processing and thereby pointless.



    When I read your article a while back about WCAG compliance, I was really hopefull that there would be a setting in VS2005 someplace that we could mark an entire web project as &quot;no client scripting&quot; or some such thing as an absolute, and that the various controls would render themselves to the user completely functional, and that they would produce the server-side handling code accordingly.



    Sadly, this does not appear to be the case, thus we remain trapped in ASP Classic.

  • Chris,



    ASP.NET does not require the usage of client-side script. You can configure ASP.NET either at the page or web.config level (the later for all pages in the site) to render without using script. There are a few scenarios you obviously can't do without script (for example: drag/drop of WebPart UI controls in the browser), but you can absolutely build a fully functional web-site without using any client-side script ASP.NET.



    A couple of other important notes:



    -- ASP.NET Validator controls *always* validate on the server. They can optionally also validate on the client using script (to avoid the user having to post to the server only to discover an error) -- but regardless of whether client-validation happens the server validation *will always* happen (specifically to avoid cases where developers forget to validate against hackers bypassing client script).



    -- ASP.NET ViewState (a built-in hidden field form mechanism for round-tripping state) is always MAC encrypted on the server with a private encryption key. This means no one can tamper with it on the client without invalidating it (if ASP.NET detects it has been changed we invalidate it). This provides a very valuable feature to developers to enable them to more securely utilize hidden fields (regardless of whether they use client-script or not).



    -- ASP.NET Forms Authentication does not require the user of client-script at all. You can build Login, Role and Profile solutions in your app without using any script.



    -- ASP.NET V2.0 now includes additional event validation checks to verify that when client-side script is used, additional validation steps are taken to avoid the chance of embedding malicious script to simulate a post-back.



    Hope this helps provide some background. I'd definitely recommend investigating ASP.NET further - since I think you'll find it has all that you ask above (and more).



    Scott

  • Hi David,



    Sorry about the delay in getting back to your question.



    Regarding event handler wire-up -- it is unfortunate that there isn't a way in html source-view to wire-up an event for controls (especially user-controls).



    For VB users, you can wire-up event handlers to custom events exposed through user-controls (as well as to any event on any control for that matter) within the code-behind file by using the event drop-downs at the top of the file. Simply select the user-control in the left hand side, and then on the right hand side you can select the event -- choosing one will automatically register and wire-up an event handler within your page.



    Hopefully this later technique is particularly useful for people new to programming and ASP.NET.



    Hope this helps,



    Scott

  • Hi Nathanial,



    Yep -- I totally agree that having intellisense in external .js files would be great. Right now I don't think this is supported, but we are planning on beefing up our client-scripting support in the next release -- so stayed tuned.



    Thanks,



    Scott

  • This help for skin file intellisense? Safe?

    1. Go to Tools->Options menu.
    2. Pick Text Editor -> File Extesion fom a tree at the left part of Options dialog.
    3. Type skin in Extesion text box.
    4. Select User Control Editor from Editor dropdown.
    5. Click Add and then Ok to close dialog and re-open your skin files.

  • Hi Ken,

    By default with SP1 we no longer update the property grid while in the HTML source editor. We found that from a performance perspective it was often slowing things down, and that relatively few people were using it (although I believe you can go back into tools->options and turn it back on).

    Can you send me email about the intellisense being lost issue? I have not heard reports of that and would like to understand it better.

    Thanks,

    Scott

  • vs is slowly becoming a valid web page tool... I currently use a combo of Textpad, Dreamweaver, & vs2005. I use Dreamweaver for css layout & design, vs2005 for c# coding, & Textpad for fast work. It's a pain, but it works (thank God for file monitors in tools).

    Check out Dreamweaver 8 for some really great future features for vs2007.

Comments have been disabled for this content.