Prettier prints 1 attribute per line

Input:

<div class="main__image-list main-image-list--margin main__image-list-one"></div>

Output:

<div
      class="main__image-list main-image-list--margin main__image-list-one"
    ></div>

Another example Input:

   <link
      rel="stylesheet"href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"  integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />

Output:

   <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
      crossorigin="anonymous"
    />

And more others tags (img…)

this is a bug or a trick? What do you think about ?

[mpro7]

Not sure if my case refers to this issue, but it seems kinda similar. I’ve set Prettier VSC extension html.format.wrapLineLength and prettier.printWidth properties to the same value. Every time the line length is larger that defined, it causes not needed formatting - each property goes into the new line:

<grid-column
	field="formatCode"
	title="Format"
	width="65"
	class="status-column cell-with-button"
	*ngIf="width > 1"
	[class]="{ codeColumn: true }"
	[hidden]="columns[7].hidden"
></grid-column>

I would like to have the line wrapped only to necessary number of lines, which means the next property which exceed the line length goes to next line etc.:

<grid-column field="incoTermCode" title="Incoterm" width="65"
	class="status-column cell-with-button" *ngIf="width > 1"
	[class]="{ codeColumn: true }" [hidden]="columns[7].hidden"
></grid-column>

I’m not sure if this feature already exists, but it would be nice to have it.

[mhamri]

+1, breaking 100 attribute to 100 line doesn’t make sense. the printWidth rule should be respected and when there is still room to fill in one line, why break things in a new line?

here for a small text like icon=something & size="m" spared one line each?