Skip to Main Content

Craft Twig Cheatsheet for Visual Studio Code

I recently started using Visual Studio Code as my text editor after hearing a lot of chatter about it. So far I like this editor and one of the best features, imo, is the integrated command line. Now I can run my task runner (grunt or gulp or whatever) right in the editor as well as any git commands. Amazing.

After installing I immediately looked for a twig and craft extension to help with auto complete. First you need to install this Twig extension and then Twig for Craft 2.

You'll want to also set .html files to use twig formatting by default and ensure that emmet works with twig by opening up your settings and pasting the following into the users section

    "files.associations": {
      "*.html": "twig"
    "emmet.includeLanguages": {

In order to help memorize all the shortcuts I wanted to print the list of commands but it's not very printable in the format available in the marketplace or on github. I took a few minutes and made it more readable and set it to fit on two pages for easy printing.

More Articles You May Like