Support for Angular control flow formatting

[thaoula]

Hi Team,

As mentioned previously in this issue - #198390

Angular 17 introduced control flow which is a better alternative to *ngIf.
For example, we can now write:

<div>
   @if (condition) {
      <div>...</div>
   } @ else {
      <div>...</div>
   }
</div>

However, by default, Visual Studio Code does not support this new syntax in a sense that the indentation is not correct:

<div>
   @if (condition) {
   <div>...</div>
   } @ else {
   <div>...</div>
   }
</div>

Support for Angular Control Flow was added to js-beautify recently
beautifier/js-beautify#2221

It is my understanding that js-beautify is used by the builtin vscode plugin: vscode.html-language-features.

I have not found anyway to update the version of js-beautify used by the plugin. Furthermore, even if the built in js-beautify was updated there is no apparent way to enable the configuration required for Angular Control Flow formatting which is disabled by default.

I could not find a repository for the vscode.html-language-features plugin so I raised the issue here. I hope that is ok.

Regards,
Tarek

[vscodenpa]

We try to keep VS Code lean and we think the functionality you're asking for is great for a VS Code extension. Maybe you can already find one that suits you in the VS Code Marketplace. Just in case, in a few simple steps you can get started writing your own extension. See also our issue reporting guidelines.

Happy Coding!

[bitwiseman]

microsoft/vscode-html-languageservice#177