如何在Django-html中正常使用Emmet的!快捷缩写？

开发者阿泽

2026-8-26

问题原因

配置"emmet.includeLanguages": {"django-html": "html"}仅能让Django-HTML语言模式识别常规Emmet标签缩写。!触发HTML基础模板属于Emmet内置初始化片段的特殊触发逻辑，默认触发校验白名单未纳入Django-HTML语言模式，自定义语言映射不会自动继承原生HTML语言的全量片段触发权限，因此常规缩写可用但!缩写失效。

修复方案

方案1：自定义Emmet片段（兼容性最好，100%生效）

唤起编辑器命令面板：Windows/Linux按Ctrl+Shift+P，Mac按Cmd+Shift+P
搜索选中Preferences: Configure Emmet Snippets，打开Emmet片段配置文件snippets.json
在配置中补充Django-HTML的片段继承规则，以及!对应的基础模板内容，参考配置如下：

{
  "html": {
    "snippets": {
      "!": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>${1:页面标题}</title>\n</head>\n<body>\n    ${0}\n</body>\n</html>"
    }
  },
  "django-html": {
    "extends": "html",
    "snippets": {}
  }
}

保存配置后重启编辑器，在Django-HTML文件中输入!按触发展开键（Tab/回车）即可生成基础模板。

方案2：补全Emmet全局配置（操作更简单）

打开编辑器settings.json配置文件，在原有Emmet配置基础上补充语法关联和触发权限配置：

{
  "emmet.includeLanguages": {
    "django-html": "html"
  },
  "emmet.syntaxProfiles": {
    "django-html": "html"
  },
  "emmet.triggerExpansionOnTab": true
}