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

[cesco69]

Which @angular/* package(s) are the source of the bug?

language-service

Is this a regression?

No

Description

In visual studio code 1.84.1 with Angular Extension at version 17.0.0, indenting control flow like this:

@if(true){
    foo
} else {
    bar
}

after document format become

@if(true){
foo
} else {
bar
}

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.0.0
Node: 18.18.2
Package Manager: pnpm 8.6.3
OS: win32 x64

Angular: 17.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, material-date-fns-adapter
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0 (cli-only)
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            17.0.0 (cli-only)
@angular-devkit/schematics      17.0.0 (cli-only)
@schematics/angular             17.0.0 (cli-only)
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

No response

[atscott]

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

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

[atscott]

Reopening until investigation into exploration of a language contribution for the extension is complete. language configuration allows for defining indentation rules https://code.visualstudio.com/api/language-extensions/language-configuration-guide#indentation-rules
There is a potential that this would negatively impact the existing html language features.

[atscott]

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.

[ssougnez]

Hello, this is a bit gibberish to me :-)

I'm using vscode without any specific extension for formatting HTML template of Angular.
Do I have to install Prettier for the control flow to be formatted correctly or is Prettier shipped with Visual Studio Code?

[JeanMeche]

You need to install the extension and use its formatter !

[atscott]

Do I have to install Prettier for the control flow to be formatted correctly or is Prettier shipped with Visual Studio Code?

Prettier is a formatting library that has extensions for various editors. You can find the one for VSCode here.

[ssougnez]

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 :-))

[JeanMeche]

VScode has a default formatter for several filetypes. The new control flow syntax introduces a new flavor that VSCode isn't able to "prettity". So it will format it as standard HTML.

This is why prettier is important here, because it provide a formatter that is able to pretity HTML which has the new control flow syntax.

[ssougnez]

Ok now it makes sense to me :-)

Thanks for the explanation.

[atscott]

A slight correction to what @JeanMeche said - formatting is controlled by extensions which register as formatting providers. VSCode ships with a built-in "HTML Language Features" extension. If you disable that (and any other formatting extensions you might have in addition to that one) and try to format an HTML document, it will not work.

Getting into the formatting game is out of scope for the Angular extension at the moment. We could consider adding prettier as a dependency to our extension, registering ours as a formatting provider for HTML, and delegating to prettier (see extensionDependencies here).

[mhov]

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?

[ssougnez]

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.

[gergely-gyorgy-both]

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.

[SpeedoPasanen]

Still seems to be no indentations, but after using the new control flow for a while, I've got used to it and I think it's much better without indents. Adding more tabs would just add unnecessary pyramidization because the control flow @-operators are very easy to spot anyway, as they are highlighted with different color :)

[ssougnez]

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

} }

Wondering what is what ^^

[MrBns]

Hi, pretty late in the perty..

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

[SpeedoPasanen]

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

} }

Wondering what is what ^^

Did, and yeah that's ugly. Also } @if(...) { 🤣
I do hope we get solutions for these soon.

[rickvandermey]

when using prettier, update your prettierrc file

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

[tsenguunchik]

when using prettier, update your prettierrc file

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

Couldn't make this work.

[tsenguunchik]

Any working solutions? It has been a while

[schulzi66]

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.

@tsenguunchik see here the open issue mentioned by @gergely-gyorgy-both

[rojasjandro89]

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...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}