VSCodeでeditor.formatOnSaveをtrueにしたらNuxtのprettierとVeturのprettyhtmlが競合した話

Webサービス開発

三行で

  • Nuxtで静的サイトを作ろうとしてVSCodeでeditor.formatOnSaveをtrueにした
  • Veturによる保存後の整形とNuxtのprettierが矛盾する整形結果を出してエラーが出た
  • 結論としては"vetur.format.defaultFormatter.html": "prettier"

ここから本文

先日自分のアイマス周辺の活動をまとめたサイトを作ったんですが、これはgithubのリポジトリで公開している内容からもわかる通りNuxtを使っています。

まずyarn create nuxt-appしたあとにVSCodeの勧めに従ってVeturを入れました。

フォーマットをいちいち考えるのが面倒だったのでeditor.formatOnSaveをtrueにしたところ、Nuxtのprettierはself closing tag1の末尾のスラッシュの手前にスペースを入れることを要求してくるのに、保存時の整形ではスラッシュの手前のスペースが削除されてしまう状態になってしまいました。

"self closing tag" nuxt prettierとか"self closing tag" prettier ruleとかで小一時間検索してたどり着いたのが下記のprettierのIssue。

github.com

最後に「settings.jsonに"vetur.format.defaultFormatter.html": "prettier"」って書くとうまくいったよという書き込みがあったので試したところエラーが出なくなりました。

要するにVSCode拡張のVeturが使用するフォーマッタのデフォルトがprettierではなくprettyhtmlで、それがvueのスタイルガイドと矛盾するフォーマットで出力していたのでエラーが出ていた、ということでした。
これについてはprettyhtmlのリポジトリにissueが立っていたんですが、残念ながら特に動きはなくcloseされたようで。

Veturではなくprettier-vscodeのほうにissueが立っていたことからもわかる通り、判明してしまえばなんでもないもののハマる人は多そうな罠だったので、ここに書き残しておきます。

  1. img要素などの内側にテキストを入れる必要がなく、末尾にスラッシュを書いてその場で閉じる要素。実際には自分で作ったcopyableStringコンポ―ネントでしたが↩