[HTML] -> Extend the "templating" option to allow an array of options.

[simon-knu]

This pull request is tightly coupled to PR #181, where we need to introduce a new "templating" configuration.
It's needed to resolve the bug describe in this issue

We need to have the possibility to accept not only boolean, but also arrays of determined options for the "templating" configuration.
To not break existing configuration, I propose to allow both scenario (and keep the legacy boolean option).

This option is needed for the new control-flow syntax released in Angular 17. Thank's to that, we will be able to format ours documents properly with the "html.format.templating": ["angular"]" configuration. At the moment, the format of documents in Angular 17 is broken...

As I don't often submit pull requests, I would appreciate any feedback on the implementation and/or description.

[simon-knu]

@microsoft-github-policy-service agree company="Corellia SRL"

[hugoterelle]

Same problem here, our Angular 17 projects are broken.

[XhmikosR]

Could someone have a look at this PR please? It's been months since Angular 17 was released and VS Code's built-in HTML highlighting doesn't support the new syntax. Thanks!

[simon-knu]

@aeschli Can you give some feedback about this PR please ? (or review it ? 😄)

Even if it was not intended to support differents languages at first, it is possible.
It's seems odd to not allow VsCode user's to specify some options supported by the Html Language Service

[aeschli]

I'm not in favor of complicating the settings of the HTML formatter in VS Code with a list of templating languages. That would give the impression that the HTML language extension is also for these languages, which it isn't.

For developing Angular, don't you use a Angular extension?

[aeschli]

Is there away to quickly detect that a HTML file uses Angular syntax? We could then, behind the scenes, add the angular item when we use the HTML formatter.

[XhmikosR]

Well, yeah, but the only plugin that supports the new syntax is prettier, which I personally dislike.

All these years VS Code's built-in formatting does the job quite fine and it'd be a degradation IMHO having to switch to prettier.

If you meant another plugin, there's the Angular Language Service plugin, which I'm not sure if it could/should provide support for the new control flow syntax

[NesTeRDGIT]

I'm not in favor of complicating the settings of the HTML formatter in VS Code with a list of templating languages. That would give the impression that the HTML language extension is also for these languages, which it isn't.

For developing Angular, don't you use a Angular extension?

May be...
Html formatter setting in vscode include abstacts temlating as string array. And any formatter can use this information.

[simon-knu]

#Is there away to quickly detect that a HTML file uses Angular syntax? We could then, behind the scenes, add the angular item when we use the HTML formatter.

@aeschli I don't think so, some HTLM files in Angular can be very basic without any Angular syntax...

Also @bitwiseman said here that it could cause issue with non-angular users if wrongly detected

That's why I proposed this PR, because the only way to activate the correct formatting is by specify the "angular" option in the Html Language Service

TBH I just want to know if we will have a solution (with this PR or with another one) really soon because it's just not maintainable atm
If not, we will switch to something else, but it's not what my team want

[aeschli]

See here for an alternative: https://marketplace.visualstudio.com/items?itemName=nesterenok.js-beautify-extentions

[aeschli]

The proper thing if if the angular extension provides a formatter for Angular HTML files. That can be based on jsbeautify.

[Tortila90]

That would give the impression that the HTML language extension is also for these languages, which it isn't.

@aeschli But it's already supported under the hood. This option is just for additional tuning for those who know what it's for. Proper words can be added to the description so that no one gets the wrong impression.

The proper thing if if the angular extension provides a formatter for Angular HTML files.

Extensions tend to be abandoned after a while. And this particular one is just for a feature that is one step away from being natively supported.

[Tortila90]

Also @bitwiseman said here that it could cause issue with non-angular users if wrongly detected

@simon-knu This may no longer be the case. I've asked the person who encountered the performance issue and he can't reproduce it, so we may be able to detect angular by default again.

[wedgebert]

Is this still being actively looked at? As our teams add more of the new syntax, as others have said, it's becoming unreadable without proper formatting. And it's kind of crazy to expect all the developers to install a new extension that is just "default behavior with two parameters exposed"

If the issue is detecting Angular vs non-Angular html files, is that really a problem? I know we'd be fine using the same formatting settings for all files based on a workplace setting or something. No need to say foo.html is angular, but its sibling bar.html is not.

[Harpush]

Any news concerning this?

[wedgebert]

Any news concerning this?

As far as I can tell, it's still an issue. But I did find a workaround. While VSCode's GUI doesn't support the setting, it will take the correct setting in your settings or workspace file.

I added this last tine to my project.code-workspace file and while VSCode shows a warning while the file is open, the built-in formatter will correctly format the new control flow

{
	"folders": ...,
	"settings": {
		"typescript.tsdk": "node_modules\\typescript\\lib",
		"html.format.wrapAttributes": "force-aligned",
		"html.format.templating": ["angular"],

[vivodi]

Is this still relevant?