javascriptvisual-studio-codetera

False errors in VS Code

I am writing Tera code.

{% extends "base" %}

{% block content %}
<main>
    <h1>{{ title }}!</h1>
    <div class="telkiniu-sarasas">
        <div class="row">
            <div class="telkinio-pavadinimas headeris">Pavadinimas</div>
            <div class="telkinio-adresas headeris">Adresas</div>
        </div>
        {% for telkinys in telkiniai %}
        <div class="row" onclick="telkinys( {{ telkinys.id }} )">
            <div class="telkinio-pavadinimas">{{ telkinys.pavadinimas }}</div>
            <div class="telkinio-adresas">{{ telkinys.adresas }}</div>
        </div>
        {% endfor %}
    </div>
</main>
{% endblock content %}

And I get 3 errors on line with JavaScript code

<div class="row" onclick="telkinys( {{ telkinys.id }} )">

enter image description here

Here are no problems on HTML only lines. But runing code everything works as expected. Because {{ telkinys.id }} is replaced with a number.

<div class="row" onclick="telkinys( 1 )">

How should I remove error message from VS Code? I think VS Code interpret Tera code inside JavaScript as JavaScript code. And VS Code don't know it will be replaced with a number.

I can't think of anything to fix it.

P.S. After searching I have found .tera is associated to HTML, So I opened Settings -> Extensions -> HTML and searched here. Found two locations: HTML > Format: Indent Handlebars Format and indent {{#foo}} and {{/foo}} not selected, so I have selected it and got error about wrong index or something (But I use not Handlebars, but Tera, so it may not have effect on my code).

And second: HTML > Format: Templating Honor django, erb, handlebars and php templating language tags. Selecting this one also got same error. And this also don't have Tera.

And I could not get it to work.

Solution

  • I found solution for my problem. Tera templates are based on Jinja2, so I removed Tera extension from VS Code and added "Better Jinja" extension. After it I associated .tera extension to jinja using this answer https://stackoverflow.com/a/51228725/3857286

    Now I have good syntax highlighting and here are no problem with tera tags in javascript code.