Multiline class name to single line in PhpStorm/VSCode/Sublime

Question

Not sure if this relevant question or not

Here is an example HTML block

                <div
                  class="
                    ltr:ml-auto
                    rtl:mr-auto
                    relative
                    max-w-xs
                    w-full
                    h-full
                    bg-white
                    shadow-xl
                    py-4
                    pb-12
                    flex flex-col
                    overflow-y-auto
                  "
                >
               </div>

Is there any easy way that I can change all those class names to a single line?

Expected output:

<div class="ltr:ml-auto rtl:mr-auto relative max-w-xs w-full h-full bg-white shadow-xl py-4 pb-12 flex flex-col overflow-y-auto">
</div>

Answer 1

In PhpStorm or any other JetBrains IDE:

1. Select the lines
2. Invoke "Code | Join Lines" (Ctrl + Shift + J here on a Windows keymap)

Final result:

            <div class=" ltr:ml-auto rtl:mr-auto relative max-w-xs w-full h-full bg-white shadow-xl py-4 pb-12 flex flex-col overflow-y-auto"></div>

Notes:

• first line indent will remain
• may have an extra space in some places (in this case before the first class name: <div class=" ltr:ml-auto)