Wht is your vscode setup to handle HTML + NJK + YAML formatting correctly?

#1

Hi,

I’ve never managed to have the perfect vscode setup to work with Eleventy and I’d like to improve it.

Here is my setup to have correct HTML formatting in my .njk files:

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

It works great for HTML formatting but there are 2 pain points for me:

  1. In my base layout file, I have some code that is broken on save:
    {% set css %}
    {% include "css/style.css" %}
    {% endset %}
    <style> 
      {{ css | safe }}
    </style>

So I have to manually set this file as a Nunjunck one instead of HTML (thanks to vscode-nunjucks extension) in order to save without breaking code.

But I loose HTML formatting and have to keep the file open because default file association comes back if I close and reopen it.

I can live with it as it’s only one or two layout files but it’s not ideal.

  1. The worst issue is with YAML frontmatter:

If I want to use computedData or pagination, the indentation is lost on save.

So usually, I save and have an error, then remember I have to manually set Nunjuck language to keep YAML indentation.

But after closing the file and reopening it later on, I always forget and repeat the same cycle.

So, sorry for the long story but I was wondering if someone managed to setup vscode to handle correctly HTML formatting/emmet + specific njk formatting + YAML formatting in .njk files.

Thanks in advance :wink:

1 Like
#2

I’d love to be helpful on this one but I use Vim for all of my stuff!

1 Like
#3

Heya! I had the same issue. Crazy annoying.

I have a twig extension installed (Twig language 2) and then I popped this in settings.

"files.associations": {
    "*.njk": "twig"
}

It’s not ideal but it’s the best solution I’ve found so far.

5 Likes
#4

Thank you Cassie!

I will try this :wink:.

#5

Well it seems to be a little better than my actual setup but the Prettier formatting is weird so I’ll have to investigate further :wink:

#6

Good shout on Twig, Cassie. Nunjucks and twig are so close, it’s unreal!

#7

So, now that I’ve finished Learn Eleventy from Scratch, I’m tweaking my usual website starter to use html layouts and markdow files for pages instead of njk files with frontmatter for pages.

Therefore I don’t have any issue with frontmatter formatting in md files :sweat_smile:.

2 Likes