VS Code中Django扩展与HTML模板(!)快捷键冲突问题排查与解决

冲突原因 #

VS Code安装Django扩展后，扩展会自动把HTML文件识别为django-html语言模式，而默认的!生成HTML模板是Emmet针对普通html语言模式的功能，Emmet在Django模板模式下默认未启用，或者快捷键被Django扩展的功能覆盖，导致无法正常触发。

解决方案 #

1. 让Emmet支持Django模板文件 #

• 打开VS Code设置（按Ctrl+,或Cmd+,）
• 搜索emmet.includeLanguages，点击「编辑 in settings.json」
• 在配置中添加：

  "emmet.includeLanguages": {
    "django-html": "html"
  }
  

  保存后，Emmet会将Django模板文件当成普通HTML处理，!快捷键就能恢复生成模板的功能。

2. 排查并修复快捷键冲突 #

• 打开键盘快捷键设置（按Ctrl+K Ctrl+S或Cmd+K Cmd+S）
• 搜索emmet.expandAbbreviation，查看当前绑定的快捷键
• 如果发现Django扩展的快捷键占用了回车或相关组合，右键点击冲突的绑定项，选择「Remove Keybinding」移除冲突，也可以重新绑定到其他不冲突的快捷键。

3. 临时切换语言模式（应急方案） #

• 打开目标HTML文件，点击右下角的语言模式标识（显示「Django HTML」）
• 临时切换为「HTML」，输入!按回车生成模板后，再切回「Django HTML」即可兼顾模板生成和Django语法提示。

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