WebDesigner's Memorandumウェブデザイナーの備忘録

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

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を指定します。

「Emmet: Include Languages」

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

言語モードの表示

settings.jsonで指定する場合

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね