HTML
blade
VSCode
Nunjucks

[VSCode]HTMLファイル以外でもEmmetを使えるようにしたい!

テンプレートエンジン用のファイルを書くときに少し困った

 最近、必要に迫られてJS用のテンプレートエンジンnunjucksを触っております。
 そこでテンプレート用のファイル(.njk)を書き始めようと思い、新規作成していつものようにEmmet記法を使ってみたら、さっぱり動いてくれなかったのです。

 HTMLを書くのにEmmetが動いてくれないのは結構面倒なので、やり方はないかなーと調べてみたらありました。

解決策1 - 各種ファイルをHTMLに関連付ける。

 中身はほぼHTMLならば、何でもかんでもHTMLと認識させればいいわけで……
 画面右下にある「言語モードの選択」をクリック→「HTML」を選択する。
 これで対象のファイルはHTMLモードで書けますので、普通にEmmetが使えます。ただしこの解決策だと、テンプレート固有の構文( {% extends "hoge.html" %} みたいなの)は全くハイライトされません。せっかくテンプレートファイルをいじるんだから、そういったものもハイライトして欲しいです。

解決策2 - emmet.includeLanguagesで設定する。

 拡張機能もしっかり効かせたい方はこちら。というか今回の記事はこちらがメインです。
 設定ファイルに"emmet.includeLanguages"というプロパティがありますので、そこをいじればいけるみたいです。

settings.json
{
    "emmet.includeLanguages": {"nunjucks": "html"}
}

 この要領で、他のテンプレートエンジン用のファイルタイプも指定すれば行けるみたいですね。(例えばLaravel bladeテンプレートとか……)

参考サイト

Emmet is not working with nunjucks files · Issue #7 · ronnidc/vscode-nunjucks
https://github.com/ronnidc/vscode-nunjucks/issues/7

Emmet | 非公式 - Visual Studio Code Docs #他のファイルタイプで Emmet 略語
https://vscode-doc-jp.github.io/docs/userguide/emmet.html#%E4%BB%96%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%97%E3%81%A7-Emmet-%E7%95%A5%E8%AA%9E