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.