Prettier - Break html classes in multiple lines

user_18134217 0
Viewed 1032

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>
prettier tailwind-css visual-studio-code format html
3 Answers

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

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.

user_117330060

You should add printWidth to .prettierrc

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

user_40938720
Related