VSCode提示Django模板JS中{{}}语法错误，如何解决？

架构老林

2026-7-9

问题

我有一段可在HTML文件中正常运行的代码：

{% for stocks_and_pair_data in stocks_and_pair_data_list %}
    <script>
        var ctxClose = document.getElementById('ChartOfClosePrices{{ forloop.counter }}');

        new Chart(ctxClose, {
            type: 'line',
            data: {
                labels: {{stocks_and_pair_data.dates|safe}},
                datasets: [{
                    label: '{{ stocks_and_pair_data.stock1_name|safe }}',
                    data: {{stocks_and_pair_data.stock1_close_prices|safe}}
                },{
                    label: '{{ stocks_and_pair_data.stock2_name|safe }}',
                    data: {{stocks_and_pair_data.stock2_close_prices|safe}}
                }]
            }
        });
    </script>
{% endfor %}

但VSCode在labels行及两个data行（即未加引号的{{}}模板变量处）提示“Property assignment expected”错误。由于这些变量对应的数据是列表而非字符串，我不能给它们加引号。请问即便代码能正常运行，我是否操作有误？该如何修正这个提示？

解决方法

你没有操作错误，这个提示只是VSCode的语法检查工具（如ESLint或内置JavaScript校验）无法识别Django模板变量导致的假阳性错误。模板渲染后，这些变量会被替换为合法的JavaScript数组，所以代码运行逻辑完全正常。

可以通过以下几种方式消除错误提示：

添加注释标记屏蔽校验：在模板变量前后添加JavaScript注释，让语法检查工具跳过该位置的校验，示例：
```
labels: /* template variable */ {{stocks_and_pair_data.dates|safe}},
```
这种方式不会影响最终渲染结果，仅用于规避语法检查的误判。
调整VSCode语法检查配置：如果使用ESLint，可在项目的.eslintrc配置文件中添加规则，忽略模板语法相关的错误；也可以直接在VSCode设置中降低内联JavaScript的校验严格程度。

使用json_script模板标签优化代码：这是更规范的做法，既能消除错误提示，还能提升代码安全性。后端传递的dates、close_prices等数据会被渲染为安全的JSON脚本，再在JS中读取解析：

{% for stocks_and_pair_data in stocks_and_pair_data_list %}
    <!-- 用json_script将数据嵌入页面 -->
    {{ stocks_and_pair_data.dates|json_script:"dates-{{forloop.counter}}" }}
    {{ stocks_and_pair_data.stock1_close_prices|json_script:"stock1-prices-{{forloop.counter}}" }}
    {{ stocks_and_pair_data.stock2_close_prices|json_script:"stock2-prices-{{forloop.counter}}" }}

    <script>
        var ctxClose = document.getElementById('ChartOfClosePrices{{ forloop.counter }}');
        // 读取并解析JSON数据
        var dates = JSON.parse(document.getElementById('dates-{{forloop.counter}}').textContent);
        var stock1Prices = JSON.parse(document.getElementById('stock1-prices-{{forloop.counter}}').textContent);
        var stock2Prices = JSON.parse(document.getElementById('stock2-prices-{{forloop.counter}}').textContent);

        new Chart(ctxClose, {
            type: 'line',
            data: {
                labels: dates,
                datasets: [{
                    label: '{{ stocks_and_pair_data.stock1_name|safe }}',
                    data: stock1Prices
                },{
                    label: '{{ stocks_and_pair_data.stock2_name|safe }}',
                    data: stock2Prices
                }]
            }
        });
    </script>
{% endfor %}

这种方式无需使用|safe过滤器也能避免XSS风险，同时让VSCode的语法检查工具能正确识别JavaScript代码结构。

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