Prettier prints 1 attribute per line

[themafia98]

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 ?

[lydell]

The <link> case is intended. There are several long attributes and they don’t fit on a single line, so Prettier put them on separate lines.

The <div> case looks odd though. If there’s just one attribute we don’t gain much from moving it to a new line.

Prettier 1.15.3 Playground link

--parser html

Input:

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

Output:

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

Compare with JSX:

Prettier 1.15.3 Playground link

--parser babylon

Input:

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

Output:

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

Maybe we should bring that special case to HTML as well.

[ikatyang]

The issue here is that we don't know if the content of the attribute can be broken into multiple line so we did not force one attribute to be single line, for example we may add support for class (#5482), which should break it into multiple line if it does not fit the print width.

[duailibe]

@ikatyang None of the examples have multiline attributes though so it's not the case of forcing them to be single line.

I think what @lydell is suggesting is that we keep tags with a single attribute and no children in a single line even if it exceeds print width:

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

[ikatyang]

I meant if we force 1 attr to be single line, the breakParent magic would no longer work:

Prettier 1.15.3 Playground link

--parser html

Input:

<img srcset="/assets/[email protected]  400w, /assets/visual.png      805w,	/assets/[email protected]   1610w,	/assets/[email protected]   2415w" />

Output:

<img
  srcset="
    /assets/[email protected]  400w,
    /assets/visual.png      805w,
    /assets/[email protected]  1610w,
    /assets/[email protected]  2415w
  "
/>

Output if we force 1 attr to be single line:

<img srcset="
    /assets/[email protected]  400w,
    /assets/visual.png      805w,
    /assets/[email protected]  1610w,
    /assets/[email protected]  2415w
  "/>

[duailibe]

Yeah obviously in that case we wouldn't force it to be single line, just like we don't force it with JSX:

Prettier 1.15.3 Playground link

--parser babylon

Input:

<Foo bar="foo
	bar" />;

Output:

<Foo
  bar="foo
	bar"
/>;

[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.

[j-f1]

That’s not the way Prettier works. We decided it’s usually more readable to split each thing onto its own line.

[mpro7]

Could be this feature possible as optional @j-f1 ? If not, could somebody suggest please another tool/solution to get expected result?

[duailibe]

@mpro7 No, it's been suggested in the past and we've already ruled out. An alternative is to fork Prettier and change this behavior.

[mpro7]

@duailibe thanks for your suggestion. I may have a try, will be this possible to release with prettier or as forked side-project only?

[duailibe]

As forked side-project only.

[mpro7]

@duailibe, so maybe there is an option to disable just Prettier line wrapping - I cannot see it right now? I do not want to remove Prettier at all, because I like it's other features, but I think that with this option I would get what I want with inbuilt Visual Studio Code formatting rules.

[lydell]

Correct. Line wrapping is at the heart of Prettier and cannot be disabled.

[clumsyChef]

I had the same issue and realized @lydell is right. So I went op my settings, searched prettier and found 'Prettier: Print Width' option which was set to 80. I increased it to 150 and it worked for me. This answer is late but maybe someone else will find this.

[andrew-ma]

Thanks sjMonsta, it works. "prettier.printWidth": 150

[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?

[silvermario]

why break things in a new line?

I would say fewer merge conflicts and cleaner change history. Though i would love if there was some threshold and until reaching it prettier wouldn't break attributes into multiline format.

[amcolash]

This is exactly what printWidth (default: 80) does @silvermario, per the docs:

Print Width
Specify the line length that the printer will wrap on.

[mhamri]

@silvermario it should be a separate option, html.respectLineBreak:false if not the line break is a rule, it shouldn't behave two different way for two different file type

[Lonli-Lokli]

I cannot understand the reason for putting every attribute on separate line. With the new version I see changes which will be valid for this case as well

// Prettier 1.19
if (
  foo
    .one()
    .two()
    .three() ===
  bar
    .four()
    .five()
    .six()
) {
  // ...
}

// Prettier 2.0
if (foo.one().two().three() === bar.four().five().six()) {
  // ...
}

[lydell]

@Lonli-Lokli Hi! Have you read through the thread? As mentioned, if the attributes don’t fit in a single line they’re split into one per line. That’s how Prettier works. If you don’t like that, Prettier is probably not the tool you are looking for.

[Lonli-Lokli]

@lydell my concern is not about splitting single attribute into several lines but splitting each attribute on separate line, like mentioned in https://github.com/prettier/prettier/issues/5751#issuecomment-454776010.

That's the way how Js works before 2.0

[lydell]

@Lonli-Lokli I’m sorry, I don’t understand what you mean.

[IRediTOTO]

https://github.com/prettier/prettier/issues/5751#issuecomment-454776010

This will work. Go to setting and find html.format.wrapLineLength and prettier.printWidth change to 300 :) Work perfect. Ex:

<input 
className="input disabled" 
type="number" 
placeholder="Origin price " 
value="59" />

will change to <input className="input disabled" type="number" placeholder="Origin price " value="59" /> No hurt to your eyes

[tahonaPL]

problem still exist does someone has solution for this ?

[EvelRus]

up = )

[liudonghua123]

It's almost 2.5 years. 😢

[iantearle]

problem still exist does someone has solution for this ?

Its not clear, but printWidth fixes this https://github.com/prettier/prettier/issues/5751#issuecomment-576096259

[chen-ccy]

不确定我的案例是否涉及这个问题，但看起来有点相似。我已将Prettier VSC 扩展 html.format.wrapLineLength和prettier.printWidth属性设置为相同的值。每次行长大于定义的长度时，都会导致不需要的格式 - 每个属性都进入新行：

<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>

我希望只将行换行到必要的行数，这意味着超过行长度的下一个属性转到下一行等：

<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 think you're right, when there are many properties, it will take up a lot of rows. Even each item of the array wraps. I think it makes sense to wrap when the property doesn't fit in one line