テンプレートエンジン用のファイルを書くときに少し困った
最近、必要に迫られてJS用のテンプレートエンジンnunjucksを触っております。
そこでテンプレート用のファイル(.njk)を書き始めようと思い、新規作成していつものようにEmmet記法を使ってみたら、さっぱり動いてくれなかったのです。
HTMLを書くのにEmmetが動いてくれないのは結構面倒なので、やり方はないかなーと調べてみたらありました。
解決策1 - 各種ファイルをHTMLに関連付ける。
中身はほぼHTMLならば、何でもかんでもHTMLと認識させればいいわけで……
画面右下にある「言語モードの選択」をクリック→「HTML」を選択する。
これで対象のファイルはHTMLモードで書けますので、普通にEmmetが使えます。ただしこの解決策だと、テンプレート固有の構文（ {% extends "hoge.html" %} みたいなの）は全くハイライトされません。せっかくテンプレートファイルをいじるんだから、そういったものもハイライトして欲しいです。
解決策2 - emmet.includeLanguagesで設定する。
拡張機能もしっかり効かせたい方はこちら。というか今回の記事はこちらがメインです。
設定ファイルに"emmet.includeLanguages"というプロパティがありますので、そこをいじればいけるみたいです。
{
"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