🤬

TailwindCSSでPrettier使うとclassが一行になってキレた話

2024/01/14に公開

vue + tailwind cssのフォーマッタについて

tailwind cssを使っているとHTMLのclass属性が横にものすごく長くなってしまう。これでは読みづらい...
formatterで何とか解決できないものかと、いろいろ試して落ち着いたので残しておきます。
理想は、class属性の属性値のスペースで改行してほしい。縦に長くなる分にはOK。

フォーマッタをVolarに変更しました。それともろもろの設定

お前はTailwindと一緒にいちゃだめだ。
カスタマイズ出来なかった。
.prettierignoreでvueファイルを指定して除外しました。

基本的にはVScodeのHTMLフォーマッターの設定を参照してくれるみたい。

これはclass属性のフォーマットは行わない。書いたままになる。
プラスで属性の折り返しの設定を入れる。

{
    "html.format.wrapAttributes": "force-expand-multiline"
}