Turning On Emmet For Nunjuck Files on VSCode
1 min read

Turning On Emmet For Nunjuck Files on VSCode


Emmet is the essential toolkit for web developers. I am able to code html quickly by using Emmet abbreviations. It's hands down one of my favorite plugins and tools, I can't explain how much time it has saved me.

VSCode comes with Emmet built in. So typing .michael.container<tab> will turn in it into the snippet below.

<div class="michael container">


The issue was I was using the nunjucks templating system from Mozilla. I use nunjucks for creating static sites with eleventyjs. Emmet abbreviations were disabled for nunjuck files.


1) Open up your settings.json file by pressing Shift+Cmd+P. This may be different for Windows users.

settings.json file

2) Add the following snippet to the bottom of your settings.json file.

  "emmet.includeLanguages": {
    "nunjucks": "html"

You should be able to use Emmet in VSCode for .njk files now.

Emmet turned on for nunjucks file