Prettier - Break html classes in multiple lines

Question

I'm trying to achieve a behavior using prettier formatter plugin on vscode that, when a html tag has several classes it breaks every class in a line for each , but only when that class line reach the "Word Wrap Column" limit (vscode config). Is it possible?

Current behavior

    <div                                                                                             | - LINE LIMIT
        class="m-10 flex min-h-screen items-center justify-center rounded-2xl border-2 border-red-500
        bg-indigo-500 p-10 shadow-2xl"
    ></div>
    <div class="flex items-center justify-center"></div>

Expected behavior

    <div                                                                           | - LINE LIMIT
        class="
            m-10
            flex
            min-h-screen
            items-center
            justify-center
            rounded-2xl
            border-2
            border-red-500
            bg-indigo-500
            p-10
            shadow-2xl
        "
    ></div>
    <div class="flex items-center justify-center"></div>

Answer 1

You should add printWidth to.prettierrc

 { "printWidth": 100, "endOfLine": "lf", "semi": true, "singleQuote": true, }

Answer 2

We can use Prettier 2.4. It is Disabling in Prettier 2.5

Disabling "smart formatting" of HTML class attribute

2.5.0 release notes

Collapse HTML class attributes onto one line ( #11827 by @jlongster )

<!-- Input -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.4 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

<!-- Prettier 2.5 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

Answer 3

As today (Prettier 3.5) you just need to break the line your self wherever you needed, Prettier then will respect that. You could see how this came to light in this issue comment , it should be easier to find this stuff ha.

Answer 4

Follow following steps to avoid Break html classes in multiple lines.

1. Go to Prettier Extension Settings.
2. Set printWidth:600