Flask中JS使用Jinja变量时VS Code报错的解决求助

架构老林

2026-7-29

解决Flask模板中JS引用Jinja变量的VS Code语法提示问题

错误原因

VS Code的JavaScript语法检查器无法识别Jinja模板语法，会把{{ content|tojson }}判定为非法JS语法，所以抛出错误。但实际运行时Jinja会将这段模板代码替换为合法的JSON结构，因此功能本身正常。

解决方法

方法一：用`JSON.parse`包裹模板变量（快速修复）

修改你的JS函数，给模板变量添加单引号并配合safe过滤器，再用JSON.parse转换为数组：

function printData(nb) {
  const jsArrayOfItems = JSON.parse('{{ content|tojson|safe }}');
  var str = JSON.stringify(jsArrayOfItems[nb][1], null, 2);
  document.write(str);
}

tojson：将Python列表转为标准JSON格式
safe：告诉Jinja不要转义JSON中的特殊字符，保证字符串格式合法
外层单引号：让VS Code识别这是一个合法的字符串字面量，消除语法提示错误
JSON.parse：将字符串转回JavaScript数组，确保功能正常

方法二：通过DOM元素传递数据（更规范的方案）

彻底分离模板语法和JS代码，避免语法检查冲突：

在HTML中添加一个隐藏的DOM元素存储数据：

<div id="content-data" style="display: none;" data-content="{{ content|tojson|safe }}"></div>

修改JS函数从DOM读取数据：

function printData(nb) {
  const dataElement = document.getElementById('content-data');
  const jsArrayOfItems = JSON.parse(dataElement.dataset.content);
  var str = JSON.stringify(jsArrayOfItems[nb][1], null, 2);
  document.write(str);
}

这种方式不仅解决了语法提示问题，还更符合前端开发规范，同时降低了直接注入模板代码带来的安全风险。