Recommended Nunjucks plugins for VS Code

[charlesroper]

Hello.

Today I installed 11ty and the base blog starter because I have been invited to work on a project with a team using 11ty and wanted to try it out. I installed and opened the starter in VS Code and found it uses Nunjucks (in .njk files). I think Nunjucks is quite a popular templating system in the 11ty community, right? I know 11ty can use any templating system, but Nunjucks seems to be somewhat go-to (as evidenced by its use in the blog starter). I didn't have Nunjucks syntax or any other plugins installed, so I popped open the Extensions pane in VS Code and searched and found.... a hot mess. Behold:

This is one of those unpleasant and gritty situations in VS Code where it is not at all clear how to proceed. Should I use the old but popular but only 3 star extension at the top of the list? Everyone knows 3 star really means ⚠ ZERO STAR ⚠ HEALTH HAZARD ⚠ AVOID ⚠, right? What about one of the others? Why so many snippets extensions?

My needs are quite simple: I want syntax highlighting (obvs) and auto-formatting (e.g., Prettier, because it makes life better for teams). Some snippets are probably nice but not that bothered at this stage. I'd also like to have all the nice HTML writing features available (like Emmet and Intellisense).

I ended up going with Better Nunjucks and djLint, but only after spending, I think, about 2 hours noodling with the various extensions, configuring them and trying them out. These two extensions work well for my needs, but it was a bit of a slog getting there. It kind of negates the approachable, zero-config vibe of 11ty. But this isn't a critisism of 11ty! It's not 11ty's fault that the Nunjucks tooling story for VS Code is so gnarly. But I reckon it would be useful if there could be a recommendation or two in the docs and a touch of guidance for new users like me so that it doesn't trip anyone up.

So does there exist any advice or guidance already on this? Would you be amenable to adding some? If necessary, I could write it (although I feel vastly unqualified to be recommending 11ty related tooling to anyone).

[darthmall]

The Nunjucks docs recommend vscode-nunjucks (which is what I use): https://mozilla.github.io/nunjucks/templating.html#syntax-highlighting

[charlesroper]

Yes, that's the one I tried first. The point I'm making is that it's not very good compared to other plugins and that the whole process of getting started with Nunjucks in VS Code is a bit messy and stressful. I got there in the end but wanted to offer to write some guidance if none existed already in the interests of smoothing the 11ty "onboarding" experience.