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

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:

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

1 Like