📖
Vue + Storybook: テンプレートをシンタックスハイライト & 自動フォーマット
概要
Vue で Storybook のストーリーを書く際、template に Vue テンプレートを記述します。
しかし、ただの文字列のため以下の画像のようにシンタックスハイライトも自動フォーマットも適用されません。
書き換え頻度は低いと思いますし、記載するコード量も多くはないと思いますが、
シンタックスハイライトや prettier による自動フォーマットになれたエンジニアには少しつらい物があるかと思います。
本記事では VSCode の拡張によるシンタックスハイライトと prettier による自動フォーマットを有効にする方法を紹介します。
方法
以下の VSCode 拡張のいずれかをインストールしてください。
template: のあとに /\* HTML \*/ とコメントを追加し、文字列をバッククオート(``)で囲むテンプレートリテラル表記で記述します。
例:
template: /* HTML */ `<FooBar> sample </FooBar>`
これにより、文字列が HTML として認識され、シンタックスハイライトが有効になります。
また prettier が導入されている場合、上記のコメントを追加するだけで自動フォーマットも適用されます。
ただし、、/* HTML */ の HTML 部分は大文字でなければなりませんのでご注意ください。
以下が /* HTML */ を追加して、シンタックスハイライト&自動フォーマットされた例です。
余談ですがこれは prettier の embedded-language-formatting オプションに該当するようです。
Discussion