VS Code中Tera模板代码的错误提示如何消除？

问题场景 #

我正在编写Tera模板，代码片段如下：

{% 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 %}

其中<div class="row" onclick="telkinys( {{ telkinys.id }} )">这一行被VS Code标记了3个错误，但实际运行时模板渲染后会生成合法的telkinys( 1 )这类代码，功能正常。尝试开启HTML扩展的Handlebars缩进、模板识别设置后无效，需要消除这些错误提示。

解决方案 #

1. 安装Tera语法扩展 #

VS Code默认的HTML语法识别无法正确解析Tera模板，安装专门的Tera语法支持扩展（比如Tera Syntax），编辑器会自动识别模板中的{{ ... }}占位符，不会将其当作JavaScript语法错误。安装完成后重启VS Code即可生效。

2. 关闭HTML内联脚本验证 #

如果不想安装额外扩展，可以调整VS Code设置关闭内联脚本的语法检查：

• 打开设置（快捷键Ctrl+,/Cmd+,）
• 搜索html.validate.scripts，将其设置为false

注意：此方法会关闭所有HTML内联脚本的语法验证，可能遗漏真正的JavaScript语法问题，按需使用。

3. 替换内联onclick为数据属性+外部JS #

从代码规范和兼容性角度，推荐用数据属性存储ID，再通过外部JS绑定点击事件：

• 修改模板中的行：

  <div class="row" data-telkinys-id="{{ telkinys.id }}">
  

• 在独立的JS文件中添加事件监听：

  document.querySelectorAll('.row').forEach(element => {
    element.addEventListener('click', function() {
      const telkinysId = this.dataset.telkinysId;
      telkinys(telkinysId);
    });
  });
  

这种方式既避免了模板变量与内联JS的语法冲突，也更符合现代前端开发规范，同时不会触发VS Code的错误提示。

内容的提问来源于stack exchange，提问作者Donatas