🦾 Better Nunjucks Syntax and Snippets Extension for Visual Studio Code
JavaScriptMIT
Better Nunjucks Syntax and Snippets Extension for Visual Studio Code
Syntax Highlighting:
For .njk, .html, and .md files the grammar is auto-detected.
All .njk files will default to html and provide syntax highlighting for Nunjucks tags, filers, and variables which are injected into the default html grammar. This attempts to keep the developer experience (DX) as simple as possible, without having to configure global or workspace settings with files.association. Hopefully this will provide the least amount of friction between other extensions that support Markdown or HTML.
Nunjucks inside of Markdown + frontmatter support
Complex example of Nunjucks inside of HTML + frontmatter support
Nunjucks inside of HTML + frontmatter support
Using Nunjucks with Eleventy + frontmatter support
Using the Nunjucks grammar also support highlighting and frontmatter
Snippets:
The snippets are a combined fork of other Nunjucks snippet extensions but is extended to include all of Nunjucks built-in tags and provide support for multiple file extensions – .njk, .html, & .md
The reason for the fork is to avoid conflicts and behavior issues when editing njk, html, and/or md files or when altering files.association
Note: If you would rather not use the snippets provided in this extension, no worries - I highly recommend installing Control Snippets to enable or disable VS Code's built-in or manually installed snippets.
Nunjucks Snippets in Markdown 😍
Nunjucks Snippets in HTML 😍
Nunjucks Snippets in Nunjucks 😊
Known Issues
One "gotcha" is code folding support. You will need to include the below to enable code folding for Nunjucks tags:
//"_comment": "add this to your Global or Workspace settings.json""editor.foldingStrategy": "indentation"
Another is when selecting the nunjucks grammar, enabling support for emmet is provided though the editor or the workspace settings: