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が使えるようになりました。