html.format.wrapAttributes: auto-force aligned?

So, formatting in HTML is kinda frustrating...

disclaimer using VSCode

there are a lot of cases, especially in SPA's (angular, vue, etc)... where a component has many attributes...

and for me, in a scenario like this: <mat-progress-spinner *ngIf="isSavingData" mode="indeterminate" diameter="18" color="accent"></mat-progress-spinner>

I am using html.format.wrapAttributes": "force-expand-multiline", which does the work quite well for me... where it produces:

<mat-progress-spinner
  *ngIf="isSavingData"
  mode="indeterminate"
  diameter="18"
  color="accent"
>
</mat-progress-spinner>

(except the closing tag, feel should be like ></mat-progress-spinner>

it is in the scenarios like this:

<my-comp
  class="f-panel"
  *ngIf="isFinished"
></my-comp>

... that I am frustrated. While breaking attributes in multi-line is good for the readability, it is also working against it...

this is more readable to me....

<my-comp class="f-panel" *ngIf="isFinished"></my-comp>

not only this line, but also sparing 3 other lines... which makes my code less vertically long and can see it more at the first glance...

So what I would like, and I am sure there are many others that agree with me... to have some kind of hybrid of a system...

right now the "html.format.wrapLineLength": 80, only works when the wrapAttributes is set to 'auto' ... I wish it would work with force-expand-multiline, or in this case would be names 'expand-multiline' ... or 'auto-expand-multiline' ...

so instead of going

<my-comp class="f-panel" *ngIf="isFinished"></my-comp>
<mat-progress-spinner *ngIf="isSavingData" mode="indeterminate" diameter="18"
  color="accent">
</mat-progress-spinner>

on settings

"html.format.wrapLineLength": 80,
"html.format.wrapAttributes": "auto",

it would go:

"html.format.wrapLineLength": 80,
"html.format.wrapAttributes": "auto-expand-multiline",

and would produce something like this:

<my-comp class="f-panel" *ngIf="isFinished"></my-comp>
<mat-progress-spinner
      *ngIf="isSavingData"
      mode="indeterminate"
      diameter="18"
      color="accent"
></mat-progress-spinner>

if I could get something like this, would be amazing!

Environment

OS: Windows

beautifier / js-beautify

html.format.wrapAttributes: auto-force aligned? #1714

Environment