CODEWITHSUNDEEP
htmlvisual-studiotagsformattingline-breaks
Leniel Maccaferri
Leniel Maccaferri

Reputation: 102368

Break line on each tag attribute and keep them aligned in Visual Studio HTML code editor

If you'd like to see this implemented in the next version of VS, please vote for it here.

Suppose the following horizontally lengthy <button> HTML declaration:

<button type="submit" class="btn btn-primary" id="save" name="action:@ViewContext.RouteData.Values["action"]"><i class="icon-save icon-large"></i> @Localization.Save</button>

As you see all tag attributes are inline such that they extend a long way to right in the code editor...

Do you know of any Visual Studio option or extension that allows it to be formatted with Ctrl + K then Ctrl + F like this:

<button type="submit"
        class="btn btn-primary"
        id="save"
        name="action:@ViewContext.RouteData.Values["action"]">
<i class="icon-save icon-large"></i>@Localization.Save
</button>

I think the above format makes it easy to spot a given attribute although it'll clearly make the vertical scroll-bar a little longer. :)

I tried fiddling with Visual Studio options in TOOLS => Options... => Text Editor => HTML but didn't find an option to control this behavior.

Of course I can align it manually but then if I hit Ctrl + K then Ctrl + F by mistake I lose all the custom made formatting.

If there's no such a thing available, I think this makes a great idea for a Visual Studio extension. As a plus it could even alphabetically order the attributes. :)

Doing a little bit more Googling I found that the XAML editor in Visual Studio has what I'd like to have in the HTML editor:

Position each attribute on a separate line

enter image description here

I asked this same question at the Visual Studio Extensibility forum:

http://social.msdn.microsoft.com/Forums/en-US/vsx/thread/0d97c205-9f29-4ba7-9d0b-253413077dce/

If you'd like to see this implemented in the next version of VS, please vote for it here.

Upvotes: 24

Views: 16119

Answers (4)

user3453552
user3453552

Reputation: 349

Copy the html to the xml editor let it format it for you, then save it back to the html file

Upvotes: 1

Van Kichline
Van Kichline

Reputation: 11

This has been implemented in the new HTML editor in Visual Studio 2013 Preview, which has been released. This is a feature of the new editor only, which works for html and cshtml files, but not for aspx/ascx files. If you hit [return] after each value, the attributes will stack up under the first attribute definition. Format Document will not undo these changes anymore.

Upvotes: 1

Ameen
Ameen

Reputation: 2586

If you feel brave, you can write an editor extension that does this for you. Take a look at the align extension that Noah wrote a while ago for ideas: https://github.com/NoahRic/AlignAssignments

Upvotes: 2

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102368

Well, I found a trick at the ASP.NET Forums:

Positioning each attribute on a separate line

It's not like the XAML feature described in my question but it works.

In Options/Text Editor/HTML/Format you can check "Wrap tags when exceeding specific length" and set the length to 1. That will cause the formatter to wrap like crazy.

Another option is:

  1. Go to TOOLS => Options... => Text Editor => XML => Formatting => Align attributes each on a separate line.

  2. Close the .cshtml file. Right click it in Solution Explorer and select Open With... then select XML (text) Editor. Select all content and do Ctrl + K then Ctrl + F.

    * This second option is tedious! :(

Upvotes: 7

Related Questions