veturでHTMLのフォーマットを有効にする

vue.js VSCode

VSCode上で、Vue.jsシングルファイルコンポーネントのフォーマッタはveturが良いらしく、なんとなく入れて放置していたのですがHTMLがフォーマットされない。

VSCode の Vetur 用の設定を参考に、settings.jsonに以下の設定をしてみたところ編集できるようになった。

"vetur.format.defaultFormatter.html": "js-beautify-html"

詳細はveturのチェンジログに記載されていて、

  • デフォルトではHTMLのフォーマットは無効にしているよ
  • 理由は、内部的にjs-beautify-htmlっていうのを使ってるけど、致命的なバグがある上に治る予定がなさそうだよ
  • 将来的にはprettierっていうのに乗り換える予定だよ

とのこと。

手で段組み変えるよりは断然ましなので、とりあえず使うことにする。