Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prettier - Break html classes in multiple lines

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>
like image 568
Bruno M. Silva Avatar asked Feb 15 '26 19:02

Bruno M. Silva


2 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>
like image 59
Lin Weiye Avatar answered Feb 17 '26 07:02

Lin Weiye


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.

like image 37
Dago A Carralero Avatar answered Feb 17 '26 08:02

Dago A Carralero



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!