VS Code Setup and Extensions

Setup

When we’re working with Eleventy, we will use Markdown and Nunjucks files. Markdown files have their own syntax but you can also use normal HTLM. Nunjucks are template files and we will mostly be writing HTML with some of the Nunjucks template syntax as well. However VS Code will not recognize these as HTML files either.

To be able to use Emmet with both we will change the settings.

1. Type Shift+Command+P (macOS) or Shift+Ctrl+P (Windows) to bring up the Command Palette
2. Type in User Settings in the prompt that appears.
3. Select Preferences: Open User Settings
   • don’t select the one with (json) at the end
4. In Search Settings box type in files.associations
5. YOu should see an area titled Files: Associations
6. Click the Add Item button
7. There is space to put in a item and a value. Type in the following (note that the * asterisk in front of the item is important
   • item: *.njk value: html then click OK
   • item: *.md value: html then click OK
   • 
8. This will now have VS Code see all Nunjucks (.njk) and all Markdown (.md) files as HTML and allow you to use Emmet.

Extensions

Extensions add abilities to VS Code. On order to make our work with VS Code Easier I recommend the following extensions:

• GitLens
• Nunjucks
• Live Server (only on the first project. We do not need this when working with Eleventy)
• Prettier