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>
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With