<p>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.</p>
<h3>Extensions</h3>
<p>I use <a href="https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2" rel="nofollow noreferrer">Twig Language 2</a> – 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.</p>
<p>I can reproduce this error only with <a href="https://marketplace.visualstudio.com/items?itemName=mblode.twig-language" rel="nofollow noreferrer">Twig Language</a> (version 1), this one doesn't seem great at handling CSS / JS inside Twig files.</p>
<p>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.</p>
<h3>Language configuration</h3>
<p>Make sure the file is configured to use the correct language. For Twig Language 2, it should say <code>HTML (Twig)</code> on the right of the bar at the bottom. If it shows the wrong language, press <kbd>CMD</kbd> + <kbd>k</kbd>, then <kbd>m</kbd> to bring up the language menu and select the right language.</p>
<p>You can also change the associated language for <code>*.twig</code> files in the settings (search for <code>files.associations</code>).</p>

CC BY-SA 4.0
2021-11-05T14:43:38.257Z
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
CC BY-SA 4.0
2021-11-05T14:52:23.970Z
@Wally You mean the autocomplete / snippet expansion for HTML? That's provided by [Emmet](https://code.visualstudio.com/docs/editor/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](https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2) plugin.
MoritzLost
CC BY-SA 4.0
2021-11-05T15:14:22.663Z
Yeah that solved it thank you - For future uses - VS code command pallet > Settings > Extensions > Emmet > Include Languages - add twig and html
Wally
CC BY-SA 4.0
2021-11-05T08:56:38.740Z
2021-11-05T08:56:38.740Z
MoritzLost
<p>I've come across this a few times in my code / and others.</p>
<p>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.</p>
<p>CODE:</p>
<pre><code>{% if imgE.focalPoint|length %}
          style=&quot;object-position: 
          {# Set X #}{{ imgE.focalPoint | first * 100 ~ '% ' }}{# Set Y #}{{ imgE.focalPoint | last * 100 ~ '%' }};&quot;
          {% endif %}
          /&gt;
</code></pre>
<p>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.</p>
<p>any suggestions?</p>
<p>Thank!</p>
<p><a href="https://i.sstatic.net/sv4Go.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/sv4Go.png" alt="enter image description here" /></a></p>

<templating><vscode>
Remove red error lines in VS code for TWIG
# Remove red error lines in VS code for TWIG

(Asked by: username_0 on 2021-11-04)

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!

**Tags:** templating, vscode


---

## 1 answers

### Answer by username_1 on 2021-11-05. Score: 2 | Accepted answer

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](https://marketplace.visualstudio.com/items?itemName=mblode.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](https://marketplace.visualstudio.com/items?itemName=mblode.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`).

> **Comments:**
> **username_0**: 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 :)  
> **username_1**: @username_0 You mean the autocomplete / snippet expansion for HTML? That's provided by [Emmet](https://code.visualstudio.com/docs/editor/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](https://marketplace.visualstudio.com/items?itemName=mblode.twig-language-2) plugin.  
> **username_0**: Yeah that solved it thank you - For future uses - VS code command pallet > Settings > Extensions > Emmet > Include Languages - add twig and html  

---

