Prevent wrapping inline CSS lines in VS Code

Viewed 315

I've been working with tailwind for a while, and I'm starting to get annoyed by VS Code wrapping class names to one per line. This is what I mean

                        <div
                          class="
                            absolute
                            inset-y-0
                            right-0
                            pr-3
                            flex
                            items-center
                            pointer-events-none
                          "
                        >

It is indeed more readable, but even short snippets become incredibly long to scroll. I tried every single setting in VScode, (Settings > Html > Format) to no avail. That one specific div does not wrap if I cut the content where "items" ends in items-center. I'd really like to increase the limit if possible.

2 Answers

You need to put them back togather and then use VS code extinsion called: beautify for your codes.

try some extensions like Beautify and Prettier.

I personally use Prettier. enter image description here

enter image description here

Related