What rule should be used to fix multiple whitespaces inside a class attribute in Vue components?

[stefanobartoletti]

I'm using your config as a base for mine, and I'd like to lint and fix multiple whitespace that may be present inside a class attribute in Vue components (and unneeded ending or starting spaces as well)

Basically this:

<!-- Good -->
<div class="flex gap-4">

<!-- Bad -->
<div class=" flex  gap-4 ">

I tried to check all available rules, but I'm not finding what I'm looking for.

The closest one seems to be vue/no-multi-spaces, but it only lints spaces between each attribute and not inside them.

Is it possible somehow? Thanks!

[antfu]

I don't know - maybe you can write one your own. Honestly this repo is not the right place to ask for new rules. If you end up found/made one, I am open to discuss whether to bring it to this config. Thanks.

[stefanobartoletti]

Thanks for your reply! I was not asking for a new rule to be written from scratch,just if there was something already available that I might have missed in your config, since it already packs several plugins.

I will look around for something then, thank you.

[thenbe]

eslint-plugin-unocss has a rule (no-excessive-whitespaces) that accomplishes this.

eslint-plugin-tailwindcss has an open issue for it.

[hallucinogenizer]

eslint-plugin-unocss has a rule (no-excessive-whitespaces) that accomplishes this.

eslint-plugin-tailwindcss has an open issue for it.

---

eslint-plugin-unocss's README says:

Not ready for production use yet