Razor Helper Syntax Auto Formatting Ugly. How to fix?

Question

So I just have a beef with the way Visual Studio formats razor code. I\'ve always had some problems with visual studio and how it formats UI code, it always seems to do a re

Answer 1

Apparently there's no way around it for the moment, this is what they have answered in another related question: Why doesn't Visual Studio code formatting work properly for Razor markup?

Answer 2

For all the people whingeing about Visual Studio, I think it's pretty impressive that it allows you to switch between HTML and C# without being told which language you're using.

On a more practical note, I think my advice would be to combine lots of the things shown above. Specifically ...

1. Avoid using @: to denote a literal string of HTML. Visual Studio frequently adds a line after it when you reformat your code, and even when it doesn't you can end up in an infinite recursion, using @ to then switch back to code, and so on. Use WriteLiteral for things not encoded in HTML tags, as suggested above; otherwise Visual Studio will detect HTML when you use a . If ...
2. ... you use the fantastic idea of inserting code in a @{ ... } block.

Given these two I've found that CTRL K, D to reformat code gave perfect results for a table block which has been driving me mad:

<table>

<tr>
    <th>Chapter</th>
    @*<th class="woCoursewareFindTd">Page count</th>*@
    <th>Contents</th>
</tr>

@{
    foreach (var c in Model.Chapters)
    {
        if (c.Courseware2Id == c2.Courseware2Id)
        {
            <tr>
                <td>
                    @{

                        if (c.ChapterFileName.ToString().ToLower() == "none")
                        {
                            WriteLiteral(c.Courseware3Name);
                        }
                        else
                        {
                            <a href="@c.Href">@c.Courseware3Name (click to download)</a>
                        }
                    }
                    <p>(@c.PageCount page@(c.PageCount == 1 ? "" : "s"))</p>
                </td>

                <td>
                    @Html.Raw(c.SectionText)
                </td>
            </tr>
        }
    }
}

Perfect! Thanks to all StackOverflow contributors above.

Answer 3

i make an extension for formatting razor document.

Install:

1) in extensions search for "razor-formatter"

2) press CTRL + P AND then enter command below and press enter:

ext install Kookweb.razor-formatter

Link on VSCode marketplace:

https://marketplace.visualstudio.com/items?itemName=Kookweb.razor-formatter

source on github:

https://github.com/Kookweb-ir/razor-formatter

Of course this isn't best formatter, but this is only formatter for now.

this is just a simple HTML beautifier that works on razor documents. i will be happy if anybody works on it and make it perfect.

Answer 4

The C# code formats separately from the HTML code. If you want the proper indentation then just put some useless wrapper tags wherever you expect there to be indentation and you'll get the indentation. This would be an anti-pattern though.

Here is code. For a function like you've defined I"m not sure if that actually works.

@using Company.Mobile2.Enums
<div>

@helper BidsByShipment(string generatedId, int bidsCount, int activeBidsCount)
    {
        if (bidsCount > 0)
        {
         <a class="Company-listview-link Company-listview-bids" href="/Shipping/Bids/ByShipment?id={0}">
        @if (activeBidsCount > 0)
        {
            <text>@bidsCount (@activeBidsCount @GetStr("Company"))</text>
        }
        else
        {
            <text>@bidsCount</text>
        }
        </a>
        }
        else
        {
         <text>0 @GetStr("Company")</text>
        }
}
<div>

Answer 5

Do you have Visual Studio set up to use tab indentation? This reveals a Razor formatting bug where it inserts spaces instead of tabs as it should. The workaround is to switch to space indentation.