Add new angular templating option from js-beautify v1.15.1

[bitwiseman]

js-beautify v1.15.1 added a new setting to support indenting of Angular at-string syntax (beautifier/js-beautify#2247).

Previous additions were on-by-default. This new feature causes problems for non-angular users, so it is off by default.

It looks like the settings will need to be updated to allow supplying a list of templating formatters and add angular as an option:

vscode-html-languageservice/src/htmlLanguageTypes.ts

Lines 31 to 48 in 81cf18f

	export interface HTMLFormatConfiguration {
	tabSize?: number;
	insertSpaces?: boolean;
	indentEmptyLines?: boolean;
	wrapLineLength?: number;
	unformatted?: string;
	contentUnformatted?: string;
	indentInnerHtml?: boolean;
	wrapAttributes?: 'auto' | 'force' | 'force-aligned' | 'force-expand-multiline' | 'aligned-multiple' | 'preserve' | 'preserve-aligned';
	wrapAttributesIndentSize?: number;
	preserveNewLines?: boolean;
	maxPreserveNewLines?: number;
	indentHandlebars?: boolean;
	endWithNewline?: boolean;
	extraLiners?: string;
	indentScripts?: 'keep' | 'separate' | 'normal';
	templating?: boolean;
	unformattedContentDelimiter?: string;

vscode-html-languageservice/src/beautify/beautify-html.d.ts

Line 119 in 81cf18f

templating?: ('auto' | 'none' | 'django' | 'erb' | 'handlebars' | 'php')[];

[simon-knu]

Can we have some news about this ? Do you consider it ?

@bitwiseman did all the hard work 👍 Thanks for that BTW

It's been weeks since Angular 17 was released and the only option we have now is to change our code formatter... or do it manually

I just want to know if you plan to add the option shortly, could you provide some info ?

[parliament718]

Can we have some news about this ? Do you consider it ?

@bitwiseman did all the hard work 👍 Thanks for that BTW

It's been weeks since Angular 17 was released and the only option we have now is to change our code formatter... or do it manually

I just want to know if you plan to add the option shortly, could you provide some info ?

Weeks? It's been 5 months since Angular 17 was released and still no basic formatting support. Sad. I wonder how many thousands of teams had no choice but to switch to Prettier and now hate their lives.

[bitwiseman]

@bitwiseman did all the hard work 👍 Thanks for that BTW

Thank you, but I should point out that the implementation in the library was done by a Beautifier contributor, @gergely-gyorgy-both .

My intent in providing the links to the code locations above was to help another contributor zero in on the code that needs updating here. I hope someone has time to submit a PR for this soon.

[ssougnez]

I don't mean to be rushing this, but can this PR be reviewed or merged? Control flow are available in Angular for months now and we're still unable to use it without this feature. This is pretty blocking in the Angular upgrade path.

Thanks

[NesTeRDGIT]

I created an extension where you can change the templating option for js-beautify.
As a temporary solution to the problem. While VSCode finishes the PR
ps this is my first extention for VSCode, possible errors..

link: https://marketplace.visualstudio.com/items?itemName=nesterenok.js-beautify-extentions
For support for Angular control flow formatting: set parameters:
[js-beautify-for-vscode:html.templating] = ['angular']
[html.format.indentHandlebars]: true

[thaoula]

I created an extension where you can change the templating option for js-beautify. As a temporary solution to the problem. While VSCode finishes the PR ps this is my first extention for VSCode, possible errors..

link: https://marketplace.visualstudio.com/items?itemName=nesterenok.js-beautify-extentions For support for Angular control flow formatting: set parameters: [js-beautify-for-vscode:html.templating] = ['angular'] [html.format.indentHandlebars]: true

Many thanks @NesTeRDGIT

[ssougnez]

I created an extension where you can change the templating option for js-beautify. As a temporary solution to the problem. While VSCode finishes the PR ps this is my first extention for VSCode, possible errors..

link: https://marketplace.visualstudio.com/items?itemName=nesterenok.js-beautify-extentions For support for Angular control flow formatting: set parameters: [js-beautify-for-vscode:html.templating] = ['angular'] [html.format.indentHandlebars]: true

You're a life saver !

[fhuttere]

Hi, any traction on this? While the extension above is a nice workaround, this syntax was introduced almost a year ago at this point.

[jonnomk]

Hello. Has there been any movement on this? It seems like a fairly major issue. Formatting for Angular Control Flow Syntax is a must, so I'm surprised this hasn't been dealt with sooner?

[Smankusors]

AFAIK when I'm reading microsoft/vscode#208316, there is a major issue blocking this from being resolved. The fix is out of scope of the html language service, and should instead be handled by the Angular language service.

On the other hand, since js-beautify already supports this feature, it could be handled by the HTML language service instead.
(I'm more agree to put this to the HTML language service, as I can't run the Angular language service due to my limited RAM)

Alternatively, there's an extension for this https://marketplace.visualstudio.com/items?itemName=nesterenok.js-beautify-extentions

[jonnomk]

This seems to be all I read, no one seems to be taking responsibility for this. Personally, I think this issue belongs to VSCode and therefore the native js-beautify extension, hence the 'polyfill' offered very kindly by nesterenok. I don't believe the issue lies with the Angular Language Service.

The extension provided by nesterenok was indeed a lifesaver, but I come across one or two minor issues when formatting docs that contain some special characters inside the blocks that contain additional curly braces, and while I can ignore those rare occurrences, I really am surprised an official solution hasn't been offered by VSCode.