Nunjucks installs statistics

Nunjucks for Visual Studio Code

Full editor support for Nunjucks templates: syntax highlighting, HTML IntelliSense, Emmet, formatting and snippets, in .njk files and in vscode.dev.

Features

• Syntax highlighting built on VS Code's own HTML grammar. Nunjucks tags, expressions, filters, tests, comments and whitespace control are highlighted everywhere they can appear: in markup, inside attribute values, inside <script> and <style> blocks, and in inline styles. {% raw %} and {% verbatim %} blocks are left alone.
• HTML IntelliSense. Tag and attribute completion, hover documentation, auto-closing and auto-renaming of tags, matching tag highlighting, document outline and folding, straight from VS Code's HTML language server. CSS and JavaScript inside <style> and <script> get their own completion too.
• Emmet. Abbreviations such as ul>li*3 expand in Nunjucks files out of the box.
• Formatting that understands templates. Format Document keeps {% %}, {{ }} and multi-line {# #} blocks intact instead of folding them into one line.
• Front matter. A YAML, ---js or ---json block at the top of the file is highlighted as YAML, JavaScript or JSON, the way Eleventy and other static site generators expect.
• Comment toggling that follows the cursor. Ctrl+/ or Cmd+/ gives {# #} in markup, // inside <script> and /* */ inside <style>.
• Smart indentation. Pressing Enter between <div></div> or between {% if %}{% endif %} indents the way it does in HTML.
• Auto-closing delimiters. Typing {{, {% or {# inserts the closing pair with the cursor in the middle.
• Snippets for every Nunjucks tag, see the table below.
• Works everywhere. No native code and no build step, so the extension runs in VS Code desktop, vscode.dev, github.dev and remote workspaces.

Install

Search for Nunjucks by ronnidc in the Extensions view, or run

code --install-extension ronnidc.nunjucks

VSCodium, Cursor, Windsurf and other Open VSX based editors: open-vsx.org/extension/ronnidc/nunjucks. The first Open VSX release is waiting for the ronnidc namespace to be handed over (claim request). Until then, download the .vsix from the latest GitHub release and install it with code --install-extension nunjucks-1.0.1.vsix or your editor's "Install from VSIX" command.

File extensions

.njk, .nunjucks, .nunj and .nj open as Nunjucks. The Nunjucks community and Eleventy use .njk.

The extension deliberately does not take over .html files, so plain HTML keeps its own comments, IntelliSense and formatter. If your templates are .html files, associate them yourself in settings.json, for the whole workspace or for one folder:

"files.associations": {
  "*.html": "nunjucks",
  "src/_includes/**/*.html": "nunjucks"
}

Settings

The extension changes two VS Code defaults so that the features above work without configuration. Both are ordinary settings you can override.

Setting	Default set by this extension	Why
emmet.includeLanguages	{ "nunjucks": "html" }	Enables Emmet in Nunjucks files. If you already define this object yourself, add the "nunjucks": "html" entry to it, VS Code does not merge the two.
html.format.templating	true	Makes the HTML formatter honour {% %}, {{ }} and {# #} instead of reflowing them.

Everything else is inherited from your HTML settings. For example, to format Nunjucks files on save:

"[nunjucks]": {
  "editor.formatOnSave": true
}

Snippets…