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

1 min read

概要

なんてことないないようなのですが、 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 は素敵!

Discussion

ログインするとコメントできます