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

Question

Or, should I ask when the VS formatting for Razor markup will work correctly? Formatting works for most structures, but seems to block the if blocks. The code is below, as it is formatted by VS. It is very easy to fix this case with one more indentation, but I accepted formatting well in everyday use and wanted to use it often for most of my code, so I would prefer to avoid manual formatting if possible. Right now I'm just leaving 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 this is important for readability, for example, in the above, the body of the if block has indentation, except that you look better.

Answer 1

Be sure to set the space characters for the editor, not the tabs. It seems the editor has completely fainted when tabs are used. This is a shame because all of these mileage characters fall into the actual HTML output, which greatly increases the size of the data transfer. What I do manually complements the automatic formatting as I type. Not perfect, but hopefully Microsoft will figure this out for the next service pack.

Answer 2

I found one “solution” that allows you to continue to use tab indentation and have the correct formatting. It is rather a sample. 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> 

from:

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

The latter will format correctly, but the former will not.

Keep in mind that formatting is not perfect, but it is better than before.

Answer 3

This does not work correctly in all cases, because it is a difficult problem. In essence, you have 3 different editors (HTML, C # and Razor) that interact in the same text buffer. There are several cases (like this one) where interactions have errors. But we are working on improving the editor for the next release of Razor.

Answer 4

The best alternative here (instead of using spaces for tabs) is to change the indentation of the block for HTML and C # / VB to "Block" instead of "Smart". This is not a complete solution, but IMO is much less painful than using spaces!

Answer 5

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

Answer 6

In my case, it was an override of formatting options.

If you use reshaper and get this problem, try this ...

Resharper -> Options -> Razor -> Editor and Formatting -> Untick "Auto Format on Input"

Answer 7

I know this is not the answer you are looking for, but I used WriteLiteral to get around my formatting problems.

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 is trying to change it to:

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

This results in a page error.

If you use WriteLiteral, you can fool formatting by ignoring the string, but this is not very good:

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

Answer 8

I am currently on VS2013 ASP.NET MVC 5 and I still have this problem. It was very useful for me to place the first expression on the same line as the character of the starting block ( @{ ). Thus, formatting the razor code gives a much better result. Here's the before and after:

before

after

Answer 9

I am working with VS2017 15.9.2 and still have a problem.
After changing the editor’s settings to use spaces instead of tabs, editing behavior (for example, copying - pasting lines of code) becomes much better, but the “Document Format” still adds the wrong indentation for every call.

No solution, but a short update:

It looks like the problem is partially resolved in Visual Studio 2019 version 16.0 Preview 2.1
MS Link for Release

Answer 10

I recommend that you disable automatic formatting by commenting on the piece of code you are pasting into. This way, everything will not break when inserted.