Django模板引入静态文件时触发Invalid Token Error问题求助

问题详情 #

在Django项目的HTML模板中引入静态CSS和图片时，VS Code鼠标悬停在包含{% static %}标签的行上，触发如下错误提示：

ERROR: Invalid Token. Expected stringEnd but found tag start "{%" instead.

模板代码如下：

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
  </head>
  <body>
    <h1>This is a pic</h1>
    <img src="{% static 'images/pic.jpg' %}" alt="pic">
  </body>
</html>

已尝试但无效的操作：

• 将{% load static %}放在模板最顶部
• 排查模板语法错误
• 核对settings.py中的静态文件配置
• 确认模板后端设置正确性
• 检查静态文件目录结构
• 重启服务器并清除缓存

解决办法 #

这个错误是VS Code的HTML语法检查工具误判导致的——Django模板的{% ... %}标签不属于标准HTML语法，编辑器会把它识别成无效的字符串内容。可以通过以下方式处理：

1. 安装Django模板支持插件 #

在VS Code中安装专门适配Django模板的插件，比如Django（Batuhan Coşkun开发）或Djaneiro，这类插件会替换默认的HTML语法规则，正确识别模板标签，消除误报。

2. 关联文件为Django HTML格式 #

• 打开模板文件，点击VS Code右下角的HTML语言标识
• 在弹出菜单中选择Configure File Association for '.html'...，然后选择Django HTML
• 或者手动在设置中添加关联：按下Ctrl+,打开设置，搜索files.associations，添加配置：

  "files.associations": {
      "*.html": "django-html"
  }
  

3. 直接忽略误报（若项目运行正常） #

如果实际运行Django服务器时，静态文件能正常加载，说明模板代码本身没有问题，这个错误只是编辑器的语法检查报错，完全可以忽略。

额外验证 #

确保settings.py中的静态文件配置无误：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

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