VSCode & Twig: What's your setup

[dolphiq-allard]

Just finished reading the Craft CMS Developer Benchmark Results 2022 and it stated that 57.2% of the respondents used VSCode as their go-to IDE.

I absolutely love VSCode, but I can't seem to get it working in a nice manner with Twig files. Just can't get file formatting to work the way it should work. Either it doesn't format at all or it just ruins tags spanning multiple lines by indenting X spaces on every save, resulting in code starting at column 100 after multiple saves. IN other occasions, HTML is formatting just fine, however Javascript isn't formatting or highlighted at all. Removed all my settings multiple times but ended up using PhpStorm every time.

I've tried the following extensions, both single as well as combined:

• Twig (whatwedo)
• Twig Language (mblode)
• Twig Language 2 (mblode)
• Twig Pack (Bajdzis)
• Twig Language (junstyle)

Since so many of you are using VSCode: What's your setup guys?

Love to hear from you.

[alinnert]

I also struggled with this but I found there's a Twig plugin for Prettier: zackad/prettier-plugin-twig.

It works very well with the exception that it formats empty blocks like this:

{% block content %}

{% endblock %}

But if that's all I'm fine with it.

You can even configure it to support non-default tags:

// .prettierrc
{
  // ...
  "twigMultiTags": [
    "nav,endnav",
    "switch,case,default,endswitch",
    "ifchildren,endifchildren",
    "cache,endcache",
    "apply,endapply"
  ],
  "plugins": [
    "@zackad/prettier-plugin-twig"
  ]
}

[dolphiq-allard]

Thanks for pointing this out. Will have a look at this!

[curtishenson]

Along with the prettier plugin mentioned above I've also been using moetelo/twiggy which has been working well for quite a while.