Visual Studio Code での .njk ファイル編集で HTML シンタックスハイライトや補完が効かせるメモです。

背景

Eleventy で Nunjucks テンプレート記法をいざ使おうとするときに、HTML シンタックスハイライトや補完が効いておらず、開発がしにくいときがあります。

そのときは Visual Studio Code の設定ファイルへ設定をする

.vscode\settings.json に以下の設定を追記します。

{
  // *.njk を HTML として扱う
  "files.associations": {
    "*.njk": "html"
  },
  // Emmet も njk で HTML スニペットを効かせる
  "emmet.includeLanguages": {
    "nunjucks": "html"
  }
}

これによって、

• .njk ファイルが HTML としてシンタックスハイライトや補完が効く
• Emmet も HTML のスニペット展開が有効になる

が可能になって、

このようの通常の HTML 編集と同じように開発できます！