ScottGu's Blog

Scott Guthrie's Blog on ASP.NET and .NET

This Blog

About

Syndication

RSS 2.0

Atom 1.0

Search

Go

Tags

.NET ASP.NET Atlas Commerce Server Data IIS7 LINQ Security SQL Server Talks Tips and Tricks Visual Studio

Navigation

Home

Blogs

Archives

July 2006
(5)

June 2006
(14)

May 2006
(17)

April 2006
(23)

March 2006
(12)

February
2006 (27)

January 2006
(35)

December
2005 (29)

November
2005 (17)

October 2005
(9)

September
2005 (8)

August 2005
(11)

June 2005
(1)

May 2005
(2)

April 2005
(4)

March 2005
(4)

February
2005 (1)

January 2005
(2)

November
2004 (9)

October 2004
(5)

December
2003 (4)

November
2003 (7)

October 2003
(15)

September
2003 (2)

May 2003
(2)

April 2003
(3)

March 2003
(2)

February
2003 (5)

Favorite Links

ScottGu.com

ASP.Net Home

Nikhil Kothari

DotNetSlackers

ASPAlliance

Tip/Trick: Custom formatting HTML in Visual Web Developer and Visual Studio
2005

Problem

You
receive an HTML or ASP.NET page from another developer you work with whose html
source formatting standards are different from your own (bad use of casing,
inconsistent indenting, etc).

You want
to quickly clean-up and format the HTML “the right way” – where “the right way”
is naturally defined as own your personal preference (and naturally every
developer thinks their preference is "right" <g>).

Solution

Visual Web
Developer and Visual Studio 2005 include a rich HTML source formatting rules
engine that enables you to configure exactly how you want HTML markup to
look.

These HTML formatting rules are used by default whenever you add HTML
elements or ASP.NET Server Controls within the WYSIWYG designer using the
Toolbox.  You can also use these
rules in source-view to select HTML you have imported into your project, and
quickly format it with them.

Simply
highlight the region of HTML you want to apply the source-formatting rules to in
the source editor, and then right-click and choose the “Format Selection”
context menu item:

This will
apply the HTML source formatting rules currently configured and clean up the
HTML markup for you, without changing any rendering semantics:

You can
easily customize the HTML source formatting rules to match your own particular
preference by right-clicking within the html source editor and choosing the
“Formatting and Validation” context menu option:

This will
bring up a dialog that allows you to control the default capitalization and
casing rules, attribute quoting, and self-terminating semantics of
elements.  It also allows you to
control when elements wrap to a new line within the page:

By
default if your line is more than 80 characters in length, it will wrap the text
onto a new line (for example: if you have a GridView with a lot of properties
you might see this happen).  If you
prefer, you can either uncheck this behavior or increase/decrease the character
length to change the wrapping semantics.

You can
also click the “Tag Specific Options” button to bring up a dialog that enables
further element customization:

Specifically, it allows you to control the colorization, line breaks, and
default tag termination semantics for every client-side HTML element and ASP.NET
server control.  For example, if I
wanted to change the line break semantics of <div> elements so that their
inner content region didn’t have line breaks, I could do so like this (note the
preview pane that shows you how the setting will affect things):

The
per-tag colorization and bolding rules are useful if you want to specifically
highlight either the foreground or background of important elements to make them
stand-out more in the editor.  One
scenario you might want to use this would be to highlight in red any “non-CSS
recommended” element (like <tables>) to make you more aware when you are
using them.

Note that
if you don’t want to tweak individual elements, you can click the “Default
Settings” treeview node on the left to change the defaults for elements globally
(note: you could then go in and override individual elements on a per element
basis like above if you want).

The VS
source-formatter is smart and will correctly handle white-space rendering
semantics for individual HTML elements.
For example: if you have a <a></a> or <td></td>
elements it will be careful not to change any line-break or spacing semantics of
the markup within it that would cause spacing because the rendering semantics
changed.  If you format a selection
of markup and see that a close tag hasn’t been moved to a separate line – it is
because there is no space between the end of the preceding markup and the
terminating tag, and as such VS is being careful not to change it to avoid
changing the rendering semantics.

The HTML
source formatting rules you’ve set will be used anytime the WYSIWYG designer
adds new HTML elements to a page (for example: you drag/drop an element from the
toolbox).  The VS 2005 WYSIWYG
designer will not re-format any customer HTML changes you’ve made in
source view yourself.  Unlike
previous versions of VS, it does not modify or change any markup you’ve
typed as you switch back and forth between design view and source view, or
change content within the design surface.
The WYSIWYG designer only uses the source formatting rules when you add
new elements from the toolbox.

Once you
have the rules setup the way you want, you can also export and import them to
other machines using the “Tools->Import and Export Settings” menu
option.  This allows you to share
your HTML source formatting rules either on the web or with other developers on
your team.

Additional
Links

More on the VS 2005 HTML Source Editor

Adding your own HTML Validation Schema to VS
2005

Html Validation Checking (and how to optionally turn it
off)

CopySourceAsHtml: HTML Source Formatting Utility for VS
2005

Hope this
helps,

Scott

Share this post: Email
it! | bookmark
it! | digg
it! | reddit!

Published Friday, July 07, 2006 11:34 AM by ScottGu
Filed
under ASP.NET, Visual Studio, Tips and Tricks

Comment Notification

If you would like to receive an email when updates are made to this post,
please register here

Subscribe to this post's comments using RSS

Comments

#
re: Tip/Trick: Custom formatting HTML in Visual Web Developer and Visual
Studio 2005

Friday, July 07, 2006
3:54 PM by Sonu Kapoor [MVP]

I have been using that feature since a while in VS2005
and I love it.

#
re: Tip/Trick: Custom formatting HTML in Visual Web Developer and Visual
Studio 2005

Friday, July 07, 2006
3:59 PM by Jon

how do I gert asp tags to format nicely like this
http://www.superexpert.com/Books/AspNet2Unleashed/Chapters/Chapter3/Listing3_01.aspx

#
re: Tip/Trick: Custom formatting HTML in Visual Web Developer and Visual
Studio 2005

Friday, July 07, 2006
4:08 PM by Sahil Malik

Hey I use that trick a lot :) CTRLA-K-F .. almost a
second nature now. Okay here's a "Please blog about" What is the best way to
copy paste out of VStudio, without getting an extra line break at the end of
each statement?

#
re: Tip/Trick: Custom formatting HTML in Visual Web Developer and Visual
Studio 2005

Friday, July 07, 2006
4:40 PM by Roger

This is a great feature and maybe worth the price of
admission alone for VS2005. This also works with C# code. Speaking of which,
It's always puzzled me that the default settings for code formatting don't match
Microsoft's own design guidelines, specifically regarding line breaks around
braces. FDG says no breaks before open braces: class FooBar { } All the class
files generated by studio follow this including "designer.cs" files and typed
datasets. However, the default formatting setting in VS2005 is to use separate
lines: class FooBar { } It always seemed strange to me that my code-behind
classes uses line breaks, but my designer-generated classes don't! Personally, I
like separate lines, but there definately seems to be two camps on this within
Microsoft! Maybe you could shed some light :-) Roger

#
Tip/Trick: Custom formatting HTML in Visual Web Developer and VS.NET

Friday, July 07, 2006
5:44 PM by DotNetKicks.com

You've been kicked (a good thing) - Trackback from DotNetKicks.com

#
Tip/Trick: Custom formatting HTML in Visual Web Developer and Visual
Studio 2005

Saturday, July 08,
2006 1:14 AM by My Blog

#
re: Tip/Trick: Custom formatting HTML in Visual Web Developer and Visual
Studio 2005

Saturday, July 08,
2006 2:31 AM by Mohamed Rashed

Ctrl+k >> Ctrl+D do all for the document ;)

#
Custom formatting HTML in Visual Web Developer and Visual Studio 2005

Saturday, July 08,
2006 3:12 AM by Kent J. Chen's Weblog

#
re: Tip/Trick: Custom formatting HTML in Visual Web Developer and Visual
Studio 2005

Saturday, July 08,
2006 3:36 AM by shortcut

How about CTRL K+D that's 1-key shorter! A+K+F

#
Interesting Finds: July 8, 2006

Saturday, July 08,
2006 11:32 AM by Jason Haley

Leave a Comment

Title
(required)*

Name required*

Your URL

Comments
(required)*

Remember Me?