douglaszaltron / nunjucks-vscode-extensionpack

This is the nunjucks supporting extension for vscode with complete features.

Nunjucks Visual Studio Code Extension Pack

This is the nunjucks supporting extension for vscode with complete features.

vscode-nunjucks support these file extensions

.nunjucks, .nunjs, .nj, .njk, .html, .htm, .template, .tmpl, .tpl

snippets

Prefix	HTML Snippet Content
block	{% block name %} {% endblock %}
{%	{% %}
{{	{{ variable }}
extends	{% extends "template" %}
include	{% include "template" %}
filter	{% filter filter %} {% endfilter %}
for	{% for item in sequence %} {% endfor %}
asyncEach	{% asyncEach item in sequence %} {% endeach %}
asyncAll	{% asyncAll item in sequence %} {% endeach %}
if	{% if condition %} {% endif %}
ife	if else
ifel	if elif
elif	elif
else	else
set	set
macro	macro
import	import
from	from import
raw	raw
call	call
var	alt variable
super	super
or	or
pipe	pipe

Install extension in marketplace (recomended method)

To install extension directly from VSCode you need to proceed with theese four simple steps:

1. Go to View > Command Palette (Mac OSX: cmd+shift+P, Windows: ctrl+shift+P)
2. Run the following command in the Command Palette field: >ext install extension and hit enter.
3. Then type nunjucks-vscode-extensionpack and hit enter.
4. After instalation is complete restart the Code app and you are all set up for start writing nunjucks templates in VSCode.

install extension manually

To install extension manually you need to proceed with theese five steps:

1. Download this nunjucks-vscode-extensionpack repo from GitHub
2. Navigate to the <user home>/.vscode/extensions directory on your computer.
3. Create a new folder and name it nunjucks-vscode-extensionpack
4. Copy all content of this repository into the <user home>/.vscode/extensions/nunjucks-vscode-extensionpack directory.
5. Restart the Code app and you are all set up for start writing nunjucks templates in Code.

Settings

{
    "html.suggest.html5": true,
    "emmet.includeLanguages": {
        "njk": "html"
    },
    "files.associations": {
        "*.njk": "njk"
    }
}

nunjucks-vscode-extensionpack's Issues

How do you apply the settings (How to enable/disable support for html)

With this installed all the "default" emmet abbreviatrion's for html disapears. Yes theres a settings.json example but how do I apply them? What object in the settings.json do I put them under.

Can I get HTML & NJK abbreviatrion's in the same file?

enabling nunjucks hides 'open with Live Server' context menu

When I enable nunjucks, the right-click context menu item "Open with Live Server" belonging to the Live Server extension is no longer available:

Disabling nunjucks brings the option back:

Formats with excessive indentation

For some reason, this extension creates excessive indentation when the template file is saved.

I know VScode uses beautify but I can't think what would cause this to create 4 indents per line.

{% for rule in rules -%}
				{%- if rule.props -%}
								.{{rule.abbr}}
								{
								{%- for prop in rule.props %}
												{{prop.name | kebabcase}}:
												{{prop.value}};
								{%- endfor %}
								}
				{%- endif -%}
				{% for modifier in rule.modifiers %}
								{% if modifier.name === 'default' %}
												.{{rule.abbr}}
												{
								{%- else -%}
												.{{rule.abbr}}-{{modifier.name}}
												{
								{%- endif -%}
								{%- for prop in modifier.props %}
												{{prop.name | kebabcase}}:
												{{prop.value}};
								{%- endfor %}
								}
				{%- endfor -%}
{%- endfor -%}

Extension does not respect YAML front matter

If I'm editing a *.njk file using a static site generator like Eleventy, I have a need to include YAML front matter in the file, like so:

---
layout: main
---

<p>This is a page</p>

When I save, the YAML is compressed and made to be invalid, like so:

--- layout: main ---

<p>This is a page</p>

This is not ideal. Can we disable this behavior, or at least put it behind a checkbox?