「Storybook」最近やっと使い始めました。

「Storybook for Vue」も使わせてもらってるんですが、インラインテンプレート（文字列テンプレート？）のシンタックスハイライトが効かず、やりづらさを感じていました。

example.story.js

export default { title: "example story" }

export const example `<example-component some-prop="value"></example-component>`

調べたら、拡張機能ありました。VueのインラインテンプレートをSyntax Highlightしてくれます。

Vue Inline Template

が、実は依存関係としてこちらの拡張機能のインストールも必要です。

lit-html

こちらは、lit-htmlというライブラリで使われるhtmlというテンプレートリテラルのタグに対して、HTMLのシンタックスハイライト等を効かせてくれるライブラリなのですが、こちらに相乗りした形のようです。

2つともインストールして、htmlタグを使うと、ちゃんとシンタックスハイライトが効きます。

example.story.js

export default { title: "example story" }

// vscodeで見ると、シンタックスハイライト効いているはずです
export const example html`<example-component some-prop="value"></example-component>`

このままだとhtmlタグなんて存在せずエラーになるので、受け取った文字列をそのまま返すタグを定義します。

example.story.js

// 受け取った文字列をそのまま返すタグ
const html = String.raw;

export default { title: "example story" }

export const example html`<example-component some-prop="value"></example-component>`

紹介させて頂いたVue Inline Templateですが、TODOのところにインテリセンスのサポートもほのめかしていますので、期待しておきましょう。

以上、小ネタでした。