Turning On Emmet For Nunjuck Files on VSCode
Introduction
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">
</div>
Problem
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.
Fix
1) Open up your settings.json file by pressing Shift+Cmd+P
. This may be different for Windows users.
![](https://www.michael1e.com/content/images/2021/03/Screen-Shot-2021-03-11-at-10.50.43-PM.png)
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.
![](https://www.michael1e.com/content/images/2021/03/Screen-0ARecording-0A2021-03-11-0Aat-0A10.52.51-0APM.gif)