✨

Prettier の HTML の自動整形がたまに気持ち悪い理由

2021/05/20に公開

概要

なんてことないないようなのですが、 Prettier の自動整形を使っていて、
Vueなどで、属性の種類が多くなると、HTMLが以下のような形になることないでしょうか。

<v-btn
  block
  outlined
  color="primary"
  @click="dialog = false"
  >閉じる</v-btn
>

＿人人人人人人人人人人人＿
＞　何だこれ気持ち悪い　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^￣

と思ってそのたびに以下のように修正していました。

<v-btn
  block
  outlined
  color="primary"
  @click="dialog = false"
>
  閉じる
</v-btn>

しかしこれ、見栄えは良いが、たまにレイアウト崩れを起こしたり、
white-space: pre-warp など使うと困ることになります。

上記の例だと、> から 閉じる までの 改行&スペース と、
閉じる から < までの 改行&スペース が影響しちゃいます。

よくよく考えれば、わかりきった話だったのですが、同じようにもやもやした人がいたらと思い書きました。

Prettier は素敵!