js-beautify
js-beautify copied to clipboard
Wrap HTML attributes on their own lines, but only if the line length is exceeded
Description
Currently, I can choose between auto
, which puts multiple attributes on the same line when wrapping, and force
, which always inserts a new line.
Input
With this new feature, when I give like this input:
<a x-data="{ open: false }" x-init="alert(1)" @click="open = true" @click.away="open = false"
class="bg-red-500 placeholder-gray-600 text-gray-700 p-8 text-white text-xs font-semibold uppercase tracking-wider hover:text-gray-800 focus:text-gray-800 focus:outline-none">
Test
</a>
<button class="text-red" @click="alert(1);">Inner text</button>
Expected Output
I'd like to see this output:
<a
x-data="{ open: false }"
x-init="alert(1)"
@click="open = true"
@click.away="open = false"
class="bg-red-500 placeholder-gray-600 text-gray-700 p-8 text-white text-xs font-semibold uppercase tracking-wider hover:text-gray-800 focus:text-gray-800 focus:outline-none">
Test
</a>
<button class="text-red" @click="alert(1);">Inner text</button>
I would also like to see an attribute that produces the above output. But only if the line length exceeds the wrap-line-length
Maybe you could add an additional attribute named expand-multiline
, which respects wrap-line-length
By using force-expand-multiline
, you get the above output, but it ignores wrap-line-length