VS2022 - Razor editor automatic formatting is broken for object initializers #12554
Description
This issue has been moved from a ticket on Developer Community.
[severity:I'm unable to use this version]
Consider a class like:
public class Test
{
public required int X { get; set; }
public required int Y { get; set; }
}And a Razor View like this:
@{
Func<Test, IHtmlContent> RenderTest = @<div>Test X: @item.X, Y: @item.Y</div>;
}
@RenderTest(new Test()
{
X = 10,
Y = 20,
})
<div>
@RenderTest(new Test()
{
X = 1,
Y = 2,
})
</div>After automatically formatting the file, the second object initializer gets deformed:
<div>
@RenderTest(new Test()
{
X = 1,
Y = 2,
})
</div>The first initializer is not touched, but if it is written without indentation:
@RenderTest(new Test()
{
X = 10,
Y = 20,
})
Then automatic formatting only indents the first property:
@RenderTest(new Test()
{
X = 10,
Y = 20,
})
This has never worked property in the new Razor editor and is the reason why I cannot switch to it and still use the legacy one.
Original Comments
Feedback Bot on 27/11/2025, 02:26 PM:
We have directed your feedback to the appropriate engineering team for further evaluation. The team will review the feedback and notify you about the next steps.
Thor Yeow Dong (Centific Technologies Inc) [MSFT] on 01/12/2025, 05:28 PM:
Thanks for your sharing the detail steps, I can reproduce this issue through your shared steps and this issue has been escalated for further investigation, if there is any process, I will inform you immediately.
Tored on 01/12/2025, 07:21 PM:
I found more examples that might be helpful:
Before:
<div>
@if (true)
{
@Html.TextBox(new Test()
{
test = 5
})
}
</div>
After formatting:
<div>
@if (true)
{
@Html.TextBox(new Test()
{
test = 5
})
}
</div>
Before:
<div>
@if (true)
{
@Html.TextBox(new Test()
{
test = 5
})
<div></div>
}
</div>
After formatting:
<div>
@if (true)
{
@Html.TextBox(new Test()
{
test = 5
})
<div></div>
}
</div>
This does not happen when the object initializer is on one line:
<div>
@if (true)
{
@Html.TextBox(new Test() { test = 5 })
<div></div>
}
</div>
The inner <div> breaks even when there is no outer <div>. Before:
@if (true)
{
@Html.TextBox(new Test()
{
test = 5
})
<div></div>
}
After:
@if (true)
{
@Html.TextBox(new Test()
{
test = 5
})
<div></div>
}
If there are other initializers on the same indentation level (despite different parent elements), their opening braces break. Before:
<div>
<div>
@Html.TextBox(new
{
test = 5,
})
</div>
<div>
@Html.TextBox(new
{
test = 5,
})
</div>
</div>
After:
<div>
<div>
@Html.TextBox(new
{
test = 5,
})
</div>
<div>
@Html.TextBox(new
{
test = 5,
})
</div>
</div>
The formatting breaks when the { is left on the same line. Before:
@if (true)
{
@Html.TextBox(new Test() {
test = 5
})
<div></div>
}
After:
@if (true)
{
@Html.TextBox(new Test() {
test = 5
})
<div></div>
}
Function call chains break when in a code block inside an element. Before:
<div>
@{
var a = new int[] { 1, 2, 3 }
.Where(i => i % 2 == 0)
.ToArray();
}
</div>
After:
<div>
@{
var a = new int[] { 1, 2, 3 }
.Where(i => i % 2 == 0)
.ToArray();
}
</div>
Nesting worsens the issue. This absolutely mangles any remotely complex page that has an object initializer, as everything after the initializer gets indented incorrectly. Before:
<div> <div> <div> @if (true) { <div> @Html.TextBox(new { test = 6 }) </div><span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> } <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</div>
After:
<div> <div> <div> @if (true) { <div> @Html.TextBox(new { test = 6 }) </div><span class="hljs-tag"><<span class="hljs-name">div</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> } <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
</div>
Razor loops in <script> tags add more indentation with every autoformat. Before:
<script>
const object = {
@for (int i = 0; i < 10; i++)
{
@: property_@i: 'value_@i';
}
};
</script>
After 4 autoformats:
<script>
const object = {
@for (int i = 0; i < 10; i++)
{
@: property_@i: 'value_@i';
}
};
</script>
Bodies of nested loops get the additional indentation multiple times:
<script>
const object = {
@for (int i = 0; i < 10; i++)
{
for (int j = 0; j < 10; j++)
{
@: property_@i: 'value_@i';
}
}
};
</script>
After 3 autoformats:
<script>
const object = {
@for (int i = 0; i < 10; i++)
{
for (int j = 0; j < 10; j++)
{
@: property_@i: 'value_@i';
}
}
};
</script>
Feedback Bot on 03/12/2025, 09:47 AM:
This issue is currently being investigated. Our team will get back to you if either more information is needed, a workaround is available, or the issue is resolved.