Indent issue in Javascript function block

[tsu1980]

Describe the bug:

When I code format(Ctrl+K, Ctrl+D) a Razor file, Javascript function block indentation is broken.

Version used:
VS2022 17.3.4
VisualStudio.17.Release/17.3.4+32901.215
Razor (ASP.NET Core) 17.0.0.2232702+e1d654e792aa2fe6646a6935bcca80ff0aff4387

To reproduce:

1. Create a a.cshtml file in a project

<script>
  function sayhello() {
    console.log("hello");
  }
</script>

2. Format code with Ctrl+K, Ctrl+D.

Expected behavior:

<script>
  function sayhello() {
    console.log("hello");
  }
</script>

Actual behavior:

<script>
  function sayhello() {
      console.log("hello");
  }
</script>

Indent size in a function block is 4.

Additional context:
My indentation config is bellow.
.editorconfig

[*.{css,scss,js,ts,vue,html,cshtml}]
charset = utf-8
indent_style = space
indent_size = 2

[*.cs]
charset = utf-8
indent_style = space
indent_size = 4

Tools > Options > Text editor > Javascript/Typescript > Tab
Tab size: 2
Indent size: 2

[DustinCampbell]

Leaving for our next triage so that @davidwengier's expertise can be employed and enjoyed.

[davidwengier]

Looks like there is a couple of things going on here:

1. .editorconfig files are not currently supported in Razor. Add editorconfig support in Razor #4406 tracks that, but the underlying issue is a VS platform issue, where we are having to workaround a limitation in VS, but that workaround breaks .editorconfig support.
2. Web Tools doesn't look like they're honouring the formatting options passed through with the formatting request. If I set indent size in Tools > Options > Text editor > Razor to 2, then I can see that we are correctly passing that in the Option of a formatting request to the Web Tools delegating server, but somewhere in there it seems like Web Tools is using the values from Tools > Options > Text editor > Html for its formatting. @jimmylewis is that a known issue on your side? Do you want me to log something?

It seems like if I do set Tools > Options > Text editor > Html, that is what is used for Javascript formatting, so that is a workaround for the issue you might like to try @tsu1980

[tsu1980]

@davidwengier Thank you for investigation.

I checked my Tools > Options settings again. However, the tab size and indent size for HTML was already set to 2.

I also tried setting the tab size and indent size to 2 for the following file types, but unfortunately nothing changed.

• ASP.NET Web Forms
• HTML
• JavaScript/TypeScript
• Razor (ASP.NET Core)
• Plain Text

[davidwengier]

You might need to close and reopen the document window after changing those settings. For JavaScript/TypeScript, there is actually another layer of indirection, where Razor calls the Html formatter (part of "Web Tools" I mentioned above) and they then call the JavaScript formatter, which is another team entirely! Not sure if, on their side, they pass the formatting options through to JavaScript that we sent them, or the ones they read from Tools > Options, or something else entirely. We'll see what they say.

[tsu1980]

Oh okay, I tried again. I had restart VS after change settings this time. Unfortunately it was same, nothing changed.

[jimmylewis]

I just opened a PR for the HTML and CSS LSPs in VS to respect the size given to us from Razor (or from VS if called directly). The issue is that VS differentiates the size of a tab from the size of an indent, so we weren't using the TabSize value passed in the LSP format request for indentation. However, even with my changes, I'm still seeing 4-space indents returned from the TypeScript formatter.

[davidwengier]

Thanks @jimmylewis

I logged https://devdiv.visualstudio.com/DevDiv/_workitems/edit/1637829/ for TypeScript to follow suit. FYI @zkat