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 real super bad job that the industry doesn't want to follow.

So the example looks real real stupid. And I'm trying to figure out if there are mods or ways to fix this issue. It just looks real real bad.

Anyone know anything about this? lol

@using Company.Mobile2.Enums
@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>
        }
}

I have the same issue, and haven't found a nice way to fix it :( Often VS puts a single space in front of my "{". It definitely needs some work :( — Danny Tuppeny, Jun 26 '11 at 10:22
Yep, it's a dog's breakfast alright. Drives me nuts too - especially since it's been broken f o r e v e r... — Jonathan Moffatt, Jul 06 '11 at 01:50
I wish VS just gave us the option to not format UI code at all. — Brian, Jul 21 '11 at 03:17
possible duplicate of [Why doesn't Visual Studio code formatting work properly for Razor markup?](http://stackoverflow.com/questions/6902204/why-doesnt-visual-studio-code-formatting-work-properly-for-razor-markup) — Liam, Mar 18 '14 at 16:55
Technically that is a duplicate of mine... I posted mine first. — BradLaney, Apr 01 '14 at 04:57

score 5 · Accepted Answer · edited May 23 '17 at 11:55

5

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?

edited May 23 '17 at 11:55

Community

1
1

answered Aug 02 '11 at 20:02

Alpha

7,586
8
59
92

score 1 · Answer 2 · answered Jan 17 '13 at 17:43

1

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.

answered Jan 17 '13 at 17:43

Josh Mouch

3,480
1
37
34

score 0 · Answer 3 · answered Apr 19 '18 at 06:06

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.

unfortunately, this extension is no more. – Spongman May 15 '19 at 22:10 — Spongman, May 15 '19 at 22:10

Paul Mendoza · Answer 4 · 2011-07-27T19:09:27.160

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>

I don't see how even that would solve the problem. The bad indentation is on the html, not the c#. So how would putting wrapper tags fix this, the wrapper tags would still be indented incorrectly? Maybe a short example would help? — BradLaney, Jul 27 '11 at 16:50

score -2 · Answer 5 · answered Mar 06 '18 at 11:11

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 ...

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 ...
... 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.

Razor Helper Syntax Auto Formatting Ugly. How to fix?

5 Answers5

Linked