Visual Studio Codeで「.html」拡張子以外のファイルでもEmmetを使えるようにする

最近はVue（.vue）やReact（.jsx）など、.html拡張子以外のファイルにもHTMLを直接記述する機会が多くなってきました。

そうなってくると、Emmetに慣れすぎてしまっているため普通にHTMLを書くのが非常に面倒に感じてしまいます。
設定すればどの拡張子でもEmmetは使えるようになるので、今回はEmmetを使うファイル拡張子の設定方法についてまとめておきます。

Emmetを使う言語の設定

Visual Studio Codeのメニューバーから［Code］→［基本設定］→［設定］で設定画面を表示して、検索ボックスに「emmet」と入力すると、Emmet関連の設定が絞り込まれます。

その中にある「Emmet: Include Languages」が、Emmetを使う言語の設定なので、「項目の追加」をクリックして使いたい言語と、Emmetを指定します。

指定は「language id」と呼ばれるidで指定する必要があって、言語モードの指定時に括弧の中に表示されているのがlanguage idです。

settings.jsonで指定する場合

「settings.json」で指定したい場合は「emmet.includeLanguages」に「項目: 値」の形式で設定を追加します。

"emmet.includeLanguages": {
  "vue-html": "html"
}

これで指定した言語モードのファイルでもEmmetが使えるようになりました。