Why doesn't Visual Studio code formatting work properly for Razor markup?

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 c

Answer 1

A better alternative here(rather than using spaces for tabs), is to change the block indenting for HTML and C#/VB to "Block" instead of "Smart". This isn't a full solution, but IMO is a far less painful work-around than using spaces!

Answer 2

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.

Answer 3

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 4

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 5

It does not work correctly in all cases because it's a difficult problem to solve. Essentially you have 3 different editors (HTML, C#, and Razor) all interacting over the same text buffer. There are some cases (like this one) where the interactions have bugs. But we are working on improving the editor for the next release of Razor.

Answer 6

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