I have the Prettier VSCode extension enabled and my local .prettierrc file has "printWidth": 70 as one of the options, however, when I have a long list of classNames in my JSX (or plain HTML) file, Prettier does not honor the printWidth setting and lets the list of classes run on indefinitely without breaking the line. This is only an issue because I use Headwind, which is a Tailwind class sorting extension and when running Headwind:Sort it takes my multi line classes and puts them back on one line. Running Prettier:Format should then split this long line up again, but alas, it does not.
Example starting code:
<div className="flex flex-col w-full p-6 border-r-2 items-start
w-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100">
Then Headwind:Sort is run which puts all the classes on a single, long line:
<div className="flex flex-col w-full p-6 border-r-2 items-start w-1/2 bg-white rounded shadow h-1/3 hover:bg-slate-50 active:bg-slate-100">
Then after running Prettier:Format all of the code is still one one line even though my printWidth option is set to 70 characters.
Is there a way to get Prettier to split these lines up again? And if not, is there another solution?
Thank you!
There isn't currently a solution for this directly from Prettier. But here is what the creator of Tailwind does to get around this.
TLDR: Use Headwind in VSCode or just enable Word Wrap in your editor