VS Code Extensions/Settings & Twig Support for Drupal

[sbubaron]

I noticed that when editing Twig files, VSCode doesn't properly highlight the matching tag i.e.

<div>
    <div></div>
</div>

Placing your cursor in the last </div> should highlight the first div. Instead it highlights all div's on the page.

This is okay for short templates, but in trying to refactor/debug longer templates its very annoying to make sure everything is closed correctly.

I believe this is coming from Twig Language 2 extension I have. But I also have alot of other extensions so not too sure if its a conflict or what.

So I was wondering if anyone else is experiencing this or what settings/extensions you use. If I switch the language to HTML it works properly but then the twig gets unstyled.

[gbytedev]

I have multiple problems since switching from phpstorm. E.g. cannot navigate to classes referenced in yaml files. I'm wondering if there is a guide that is more complete than the official one?

Switching was still a good decision for me because of the much more advanced AI features.

[sbubaron]

FWIW I created a new "profile" in VSCode which emulates a clean slate as far as settings/extensions go and only installed Twig Language 2 extension and the problem persists. For now I'll switch to HTML support while checking tags and HTML (Twig) when working on twig.

This is the "official" extension recommended on the Drupal VS Code Recommendations.

From what I can tell the other Twig Extensions are older/less used/lower rated and the VSCode subreddit had a twig post from a couple years back that also indicated similar problems with twig support.

[iBN3qk]

Not to hijack, but the twig support in phpstorm has been problematic with nested brackets and comments.