eseom / nunjucks-template Goto Github PK

Hello!

First of all, this is the best looking nunjucks formatter available, well done!

I was wondering if there is any way to tweak the underlying formatter either via a config file in projects or via VS code settings? I don't see that in the current README.

Hello,

If I focus the first "div" tag all occurrences are selected instead the first one. see screenshot

thank you

I'm using nunjucks to create templated SQL queries. Historically I've named these files .njk.sql, and just used the SQL syntax highlighting. It's really nice to get the nunjucks highlighting for things inside braces though, so I tried out this extension. This makes the nunjucks much easier to read, but the SQL much harder.

I was wondering if there could be some way to specify the fallback language for things not inside braces. I know that it will be hard/impossible to actually fully parse that, since a nunjucks template may conditionally insert some keywords into it, but at least highlighting keywords / string literals where possible would be great (essentially highlight it as if everything nunjucks-related resolved to an empty block).

Right now I have to choose between these two:

SQL	NJK

Describe the bug
Frontmatter inside njk (nunjucks) is formatted as gray comment color.

To Reproduce
Steps to reproduce the behavior:

1. Create an .njk file
2. Create a fontmatter using ---
3. See error

Expected behavior
It works fine on markdown

Screenshots
but not on .njk file

I have contacted material theme. But they says:
material-theme/vsc-material-theme#497

This is an issue related to the nunjucks language highlights. As you can see, the MD language extension assign the correct (YAML) tokens to the front-matter elements:

While the nunjucks language extension doesn't assign any specific token, so vscode uses the text color fallback:

From what i understand i just need to type n-* and it should trigger the template creation, correct? given that i am in a valid file, which in my case is a *.njk

Am i missing any configuration?

For me it just closes the tag.
e.g. n-block -> <n-macro></n-macro>

Could this be another extension conflict?

below configuration will automatically detect nunjucks and mode formatting with this plugin.

.vscode/settings.json

"files.associations": { "*.njk": "njk", "*.nj": "njk" },
  "emmet.syntaxProfiles": {
    "njk": "html"
  },
  "emmet.includeLanguages": {
    "ejs": "html",
    "njk": "html",
    "nunjucks": "html"
  }
}

HTML snippets don't work inside .njk files with this extension.
I expect snippets to work just like in .php files.

Hello,
tag name and attribute href is joined while formatting, resulting ahref
with the following code :
<ul> <li><a href="{{ '/a/'|url }}">a</a></li> <li><a href="{{ '/b/'|url }}">b</a></li> <li><a href="{{ '/c/'|url }}">c</a></li> </ul>

becomes

`<ul>
    <li><ahref="{{ '/a/'|url }}">a</a></li>
    <li><ahref="{{ '/b/'|url }}">b</a></li>
    <li><ahref="{{ '/c/'|url }}">c</a></li>
</ul>`

The extension seems to enforce conversion to tab indentation on file save.

It also inserts an empty line after the frontmatter.

please add n-include shortcode

Highlight is not right when I assign values in script tags

If nunjucks-template is installed, good syntax highlighting appears, but broken auto-indent after pressing "Enter" between tags

I have:

By pressing "Enter", "Shift + Enter" and "Shift".

But I need by pressing "Enter":

Like default .html.

Is there a way to fix it?

This extension is not present in the open-vsx.org store, which means that it is missing when trying to install it from any open source vscodium build. Please add it to open-vsx.org when publishing versions. Thank you!

Expected:
searching for "nunjucks" shows this extension so that it can easily be installed

Actual:
searching for "nunjucks" does not show this extension

Note:
There is no license file in this repo; if you tell me which license you'd prefer, I can make a PR and add the correct information; MIT? ALv2? Other preferences?

if i remove these 2 dashes inside string then formatter work

hello,
very useful extension :-)

any chance to have autoclose tags in njk templates? emmet is ok but not autoclose tags

thank you

I have my max line length set to 80 characters.
But when I format it.
It gets put on the same line.

While the expected result should be the same as the input where it wraps when possible.

Input

<a href="{{ item.url }}"
  {% if page.url == item.url %} aria-current="page" class="is-active" {% endif %}
  {% if item.external %} rel="external" target="_blank" {% endif %}>
  {{ item.text }}
</a>

Output

<a href="{{ item.url }}" {% if page.url == item.url %} aria-current="page" class="is-active" {% endif %} {% if item.external %} rel="external" target="_blank">{{ item.text }}</a>

It seems this extesion has a few unused contributed things in it's package.json. I think it would be best to remove the configuration and commands properties inside contributes, since they do not seem to have any purpose?

// package.json
{
  // ...snip...
  "contributes": {
    "commands": [
      {
        "command": "extension.sayHello",
        "title": "Hello World"
      }
    ],
    "configuration": {
      "type": "object",
      "title": "nunjucks-template",
      "properties": {
        "nunjucks-template.sample": {
          "type": "boolean",
          "default": true,
          "description": "a sample configuration"
        }
      }
    }
  }

How to add more file extensions to auto detects?
Like .tpl and so on

I believe this extension should highlight {{, }}, {%, %} like e.g. this one. Thanks!

Hi @eseom,
unfortunately your plugin is currently unusable for me as it conflicts somehow with (all) Angular-Templates Language Packages (.html). As I only use .njk-files for my Nunjucks-Templates I would like to configure your plugin to only detect these files.

I really hope for your help.

Thanks and regards from Germany :)
Dennis

Despite all reinstallations and "editor.defaultFormatter" changes I still get

There is no formatter for 'njk' files installed

So, how do I enable it?
Or did I get it wrong & this extension can not serve as a language formatter?

HTML tags that don't have a corresponding closing tag (ex: <img>, <br>, ...) cause the following elements to be indented, as if they were children.

For example, this:

<a><img></a>
<div>
    ...
</div>

Formats to this:

<a>
    <img></a>
    <div>
        ...
    </div>

Perhaps add some exceptions for specific tags?

Edit: fixed code styling.

When i format the document which has YAML front matter, it becomes like this

The category "Language Packs" is for localized display languages such as German and Japanese. Please use the category "Programming Languages" for extensions that provide programming language features.

Caso seja instalado essa extensão ela quebra o live server e muitos outros recursos tem como consertar ?

You can repro with a new file named index.njk with the following contents:

<pre>{{item.codeJs}}</pre>

On format, the extension changes the casing on codeJs to codejs

Specifically, looks like this is an issue when calling prettydiff2:

const prettydiff = require("prettydiff2");

const input = "<pre>{{item.codeJs}}</pre>";

const output = prettydiff({
  source: input,
  lang: "twig",
  mode: "beautify"
});

console.log({ input, output });
// input:  '<pre>{{item.codeJs}}</pre>'
// output: '<pre>{{item.codejs}}</pre>'

Looks like prettydiff languages has support for both twig and nunjucks.

Updating extension.ts:13 seems to fix it

-     lang: "twig",
+     lang: "nunjucks",

vscode-icons is a popular way to associate custom icons to files within vs code

However, they match icons by language ids and have historically rejected tickets to update their manifest to include nunjucks by extension:

• #1819 - Nunjucks icon missing extension .njk
• #1812 - Icon Request Support for nunjucks .njk
• #118 - Nunjucks file icon

According to their wiki - list of supported icons:

Icons that are supported via Language ID, require a syntax highlighting extension [(like this one)], that registers that id, to be installed, for the icon to show.

The available language ids are:

• nunjucks
• nunj
• njs

However this extension registers nunjucks under the abbreviated extension:

• njk

One option is to swap out the language id or maybe add an alias, but I'm not sure how much work this would require.

Another workaround, if you wanted to provide support, is to add a section to the readme settings configuration to add the following setting (according to their fine tuning wiki) :

"vsicons.associations.files": [
  { "icon": "nunjucks", "extensions": ["njk"], "format": "svg" }
],

And then run Apply Icon Customization which should update the icons like this:

Not a super high priority, and not sure how ubiquitous vscode-icons is amongst other users, but just documenting in case it's helpful

Since the version v0.3.4 my project has lost HTML coloring, nunjuck template syntax still works but not html. There is nothing in output or problem tab that may lead me to the cause of the issue.
Is there something I need to configure additionally for this update?

Tried reverting to v0.3.1 - this one works.

System info

VSCODE Version: 1.54.1 (system setup)
Date: 2021-03-04T22:38:31.419Z
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
OS: Windows_NT x64 10.0.19041

This extension currently inlines any frontmatter at the beginning of the template.

This can cause issues like: 11ty/eleventy#1208

It would be great if frontmatter could be properly formatted or ignored.

When I format this piece of code it removes the endif.
Adding more after it will also be removed.

Not sure why.
But formatting should never remove code like this.

Input

<header>
  {% if navigation.main %}
    <nav class="menu -row">
      {% for item in navigation.main %}
        <a href="{{ item.url }}"
          {% if page.url == item.url %} aria-current="page" class="is-active" {% endif %}
          {% if item.external %} rel="external" target="_blank" {% endif %}>
          {{ item.text }}
        </a>
      {% endfor %}
    </nav>
  {% endif %}
</header>

Output

<header>
  {% if navigation.main %}
    <nav class="menu -row">
      {% for item in navigation.main %}
        <a href="{{ item.url }}" {% if page.url == item.url %} aria-current="page" class="is-active" {% endif %} {% if item.external %} rel="external" target="_blank">{{ item.text }}</a>
      {% endfor %}
    </nav>
  {% endif %}
</header>