VSCode 11ty Setup

When we’re working with Eleventy there are some new file types that VS Code will not handle as you expect. Follow these steps to set up VS Code to work with them.

Nunjucks

This is the templating language we will use (11ty actually lets you use a number of them). Install the Nunjucks extension to show syntax highlighting on your files.

  1. Click Extensions icon
  2. Type in Nunjucks
  3. Select the extension that just says Nunjucks

Extend Emmet

This will allow you to use emmet in your Markdown and Nunjucks files.

  1. Click on Manage Icon
  2. Click Settings
  3. Type Emmet where it says “Search Settings”
  4. Scroll down to Emmet: Include Languages
  5. Click the Add Item button
  6. type nunjucks in the item and html in the value
  7. click OK
  8. Repeat this for the following item:value pairs
    1. njk:html
    2. markdown:html

It should look something like this

This is a visual way to change your settings.json file in VS Code. You can also go in and just add JavaScript. See this tutorial from Stephanie Eckles to see the type of code you would write.