1

I've come across this a few times in my code / and others.

Basically - there is no error, this is valid syntax and works, but is there a way I can highlight this and tell VS code - this is ok, dont display the error for this one specific section.

CODE:

{% if imgE.focalPoint|length %}
          style="object-position: 
          {# Set X #}{{ imgE.focalPoint | first * 100 ~ '% ' }}{# Set Y #}{{ imgE.focalPoint | last * 100 ~ '%' }};"
          {% endif %}
          />

Obviously I really don't want to disable error highlighting, but I also do not want to have this eye sore which might also distract me from a real error.

any suggestions?

Thank!

enter image description here

2

It depends on what extension you're using for the Twig syntax highlighting and which language the file is set to use in VS Code.

Extensions

I use Twig Language 2 – this extension can handle the code you posted without errors. It also comes with snippets, formatting and everything you need to work with Twig and Craft.

I can reproduce this error only with Twig Language (version 1), this one doesn't seem great at handling CSS / JS inside Twig files.

Make sure you have only one extension for Twig files installed, since having multiple plugins for syntax highlighting for the same language can lead to problems. I would use Twig Language 2 and uninstall all other plugins.

Language configuration

Make sure the file is configured to use the correct language. For Twig Language 2, it should say HTML (Twig) on the right of the bar at the bottom. If it shows the wrong language, press CMD + k, then m to bring up the language menu and select the right language.

You can also change the associated language for *.twig files in the settings (search for files.associations).

3
  • So that did remove the error lines - but has also created another issue - now I have lost the HTML inteliesense which makes it was easier to write html faster.... any suggestions for keeping HTML while using the TWIG 2 plugin? Thanks for you help :)
    – Wally
    Nov 5 '21 at 14:43
  • 1
    @Wally You mean the autocomplete / snippet expansion for HTML? That's provided by Emmet. By default, it's not active in Twig files, you need to change your settings as mentioned in the README for the Twig Language 2 plugin.
    – MoritzLost
    Nov 5 '21 at 14:52
  • Yeah that solved it thank you - For future uses - VS code command pallet > Settings > Extensions > Emmet > Include Languages - add twig and html
    – Wally
    Nov 5 '21 at 15:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.