Any option to disable - Multi-line CSS formatting (TailwindCSS) - Screenshot attached

vuejs / vetur

Vue tooling for VS Code.

https://vuejs.github.io/vetur/

MIT License

5.75k stars 593 forks source link

Any option to disable - Multi-line CSS formatting (TailwindCSS) - Screenshot attached #3156

Open anburocky3 opened 3 years ago

anburocky3 commented 3 years ago

Uhh! It is very difficult in using Tailwind CSS with vetur extension, Every CSS is formatted in a single line, Face with rolling eyes

How to make it a single line?

Problems:

Since Tailwind is Utility first framework, we write lots of CSS class names and does it is aligning in multi-line which makes the development screen tough.
If there is any solution for this, please let me know.

gekkedev commented 3 years ago

They updated Prettier in Vetur's 0.34 to Prettier 2.3. Naturally, such an update should be downwards-compatible, but it requires you to reformat most of your templates based on a new, breaking change. You should be good if you stick with Vetur 0.33.1 for a while which still uses Prettier 2.2. The issue and its major impact on others can be tracked here; maybe they manage to resolve it.

yoyo930021 commented 3 years ago

You can customize format options. https://vuejs.github.io/vetur/guide/formatting.html

anburocky3 commented 3 years ago

Prettier is for JS right? For Tailwind CSS, which format do i use to collapse it in single line, instead of multiple class lines.?

yoyo930021 commented 3 years ago

Prettier is for JS right? For Tailwind CSS, which format do i use to collapse it in single line, instead of multiple class lines.?

Prettier also can format HTML templates. Prettier doesn't have option to disable it in this issue. https://github.com/prettier/prettier/issues/10918 I think you can modify it to another formatter or use the prettier plugin.

iKlsR commented 2 years ago

This was reverted a few days ago so vetur just needs to update to 2.5