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

URL: https://webrandum.net/vscode-emmet-include-languages/
公開日: 2022-11-29
更新日: 2022-11-29
カテゴリー: コーディング
タグ: Emmet, Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

最近は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」](https://webrandum.net/mskz/wp-content/uploads/2022/11/image_1-11.png)

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

![言語モードの表示](https://webrandum.net/mskz/wp-content/uploads/2022/11/image_2-9.png)

### settings.jsonで指定する場合

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

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

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