Razor formatting doesn't handle C# content nested in `<pre>` tags correctly

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

[severity:It's more difficult to complete my work]
When you format a Razor component (e.g. .razor extension) with Ctrl+E, D, it doesn't format the document correctly. Elements randomly have the wrong indentation level. Open and close tags are misaligned.

It's not even idempotent. That is, if you keep formatting, it keeps moving some ending tags infinitely to the right.

---

Original Comments

Feedback Bot on 16/11/2023, 05:43 PM:

(private comment, text removed)

Wenwen Fan [MSFT] on 16/11/2023, 07:33 PM:

(private comment, text removed)

Wenwen Fan [MSFT] on 23/11/2023, 06:50 PM:

(private comment, text removed)

---

Original Solutions

Jared Goodwin solved on 17/11/2023, 03:43 AM, 0 votes:

I found out that this was due to my misuse of the pre tag. The Razor formatter doesn’t like HTML elements inside it. In the below example, it won’t format the text correctly and will result in the behavior I described. I couldn’t replicate it with any other HTML tags.

So I’m not sure if this would be considered a bug, user error, or both.

<div @ref="_terminalOutputContainer" class="terminal-output-container">
    <pre>
        @foreach (var line in _output)
        {
        <div>
                @(line)
                    </div>
        }
            </pre>
</div>
@code {

private string[] _output = Array.Empty<string>();

private ElementReference _terminalOutputContainer;

}

[davidwengier]

Looks like Web Tools doesn't format the contents of <pre> tags, presumable deliberately, and we're not handling that case. Not 100% sure what the expectation would be here - we could certainly fix the indentation of the braces, but the rest probably needs to stay. On my machine though, the </div> moves right with every format operation, which we should fix too.