angular: Angular 17: visual studio code doesn't format control flow

Unfortunately prettier has a TON of extra html formatting rules which, to me, are garbage. We just want default vscode html formatting + angular control flow, and I don’t want to spend hours configuring prettier to ignore 90% of it’s rules just so we can get indentation on @if (..) { } Most angular development is probably done on VSCode and the shiny new control flow syntax is busted (as in it looks bad when it’s whole purpose was to look better) unless you configure an aftermarket overpowered formatting tool?

VSCode uses the HTML Language Features extension by default, as stated before. This extension uses js-beautify to format the code, as stated here. There is an ongoing issue in the js-beautify repository about the formatting of the new syntax.

Any working solutions? It has been a while

Then I guess I’m missing something. I don’t have this extension installed, however, everything works as expected in vscode (except control flow).

This issue is about control flow formatting in vscode and the given solution is to install an extension.

According to me, it does not answer the original question. Who is responsible to implement control flow in vscode without using Prettier then? vscode itself then?

(I’m not saying it’s not a good solution, I’m just trying to understand who is responsible for what 😃)

There’s gotta be a more flexible solution for this. When the cyclomatic complexity starts growing, the template becomes unreadable. The lack of proper formatting is holding this great new feature back…

Then I guess you never used an “if” in a “for” and ended up with something like

} }

Wondering what is what ^^

Formatting is not controlled by our extension. Closing as out of scope.

The Prettier teams is working on formatting with control flow in Angular.

when using prettier, update your prettierrc file

"overrides": [
		{
			"files": ["*.html"],
			"options": {
				"parser": "angular"
			}
		}
	],

Couldn’t make this work.

when using prettier, update your prettierrc file

"overrides": [
		{
			"files": ["*.html"],
			"options": {
				"parser": "angular"
			}
		}
	],

Hi, pretty late in the perty…

I have noticed that Vscode doesn’t highlight the new syntax. what is the solution for that.

Exact same situation here. I don’t like prettier but then I guess an issue should be created on the vscode GitHub repo, but I fear they’ll say that they can implement that as it is not standard html.

Ok now it makes sense to me 😃

Thanks for the explanation.

Closing again. Contributing a language does not affect the formatting command, which is controlled by the formatting provider. This is out of scope for our extension. That said, we have been in contact with Prettier to support them in making this work in their extension.