Why doesn't Visual Studio code formatting work

Question

Or, should I rather ask, when will VS code formatting work properly for Razor markup? The formatting works for most structures, but it seems to choke on 'if' blocks. The code below is as it is formatted by VS. It is very easy to fix this case, with one more indent, but I nicely accepted the formatting in everyday use, and like to use it often for the bulk of my code, so I'd rather avoid manual formatting if possible. Right now I just leave it as VS formats it.

@{ 
    if (User.Identity.IsAuthenticated)
    {
    <text>Hello </text>
    @Html.Display("@ViewBag.UserName") <text> - </text>
    @Html.ActionLink("Sign Out", "LogOff", "Account", null, new { style = "font-weight: bold;" })
    }
 }

I think it's important for readability that, e.g. in the above, the body of the if block is indented, besides just looking nicer.

Answer 1

In my case it was resharper overriding formatting options.

If your using reshaper and getting this issue try this...

Resharper >> Options >> Razor >> Editor & Formatting >> Untick “Auto-format on enter”

Answer 2

I know it's not really the answer you're looking for but I've used WriteLiteral to get around my formatting issues.

For example, when I write:

<div>
    @foreach (var item in Model) {    
        if (condition) {
            @:</div><div>
        }
        <a href="@item.Url">@item.Label</a>
    }
</div>

Visual Studio tries to change it to:

<div>
    @foreach (var item in Model) {    
        if (condition) {
            @:
        </div><div>
        }
        <a href="@item.Url">@item.Label</a>
    }
</div>

Which causes the page to throw an error.

If you use WriteLiteral you can fool the formatter into ignoring the line but it ain't pretty:

<div>
    @foreach (var item in Model) {    
        if (condition) {
            WriteLiteral("</div><div>");
        }
        <a href="@item.Url">@item.Label</a>
    }
</div>

Answer 3

I found another solution for this. Just select all code in file, click Shift + tab to remove all tabs before code, copy and paste it. Visual studio automatically format code. Work on VS 2013 .cshtml file

Answer 4

I found one "solution" that allows you to continue using tab indentation and have correct formatting. It's more of a pattern. The key is to use razor code blocks instead of inline code.

So for example, replace the following:

<div>
    <div>
        @if (true)
        {
            <b>Hi</b>
        }
    </div>
</div>

with:

<div>
    <div>
        @{
            if (true)
            {
                <b>Hi</b>
            }
        }
    </div>
</div>

The latter will format correctly, but the former won't.

Keep in mind, the formatting isn't perfect, but it's better than before.

Answer 5

Right now I'm on VS2013 ASP.NET MVC 5 and I still have that problem. What I found to be a lot helpful is to put the first expression on the same line where the opening block symbol is (@{). That way razor code formatting produces a far better result. Here are the before and after cases:

BEFORE

AFTER

Answer 6

I recommend you prevent automatic formatting to trigger by commenting the piece of code where you paste. This way things don't get broken on paste.