emmet缩写不生效需检查emmet.includelanguages配置，将jsx、vue等语言id映射到html或css；再通过emmet.variables注入变量、emmet.snippets自定义片段；注意语言模式切换、json格式正确及重启vscode生效。

Emmet缩写不生效？先检查 emmet.includeLanguages 配置

VSCode 默认只在 HTML、CSS 等少数语言中启用 Emmet，遇到 .jsx、.vue 或自定义后缀文件时缩写直接“失灵”，不是插件坏了，是没告诉 VSCode 该在哪用。

实操建议：

• 打开设置（Cmd+, 或 Ctrl+,），搜 emmet.includeLanguages
• 点击「编辑 in settings.json」，添加映射关系，比如：

  "emmet.includeLanguages": {
    "javascriptreact": "html",
    "typescriptreact": "html",
    "vue-html": "html",
    "astro": "html"
  }

• 注意键名必须是 VSCode 识别的语言 ID（不是文件后缀），可用 Ctrl+Shift+P → 「Change Language Mode」确认当前文件真实语言 ID
• 值填 "html" 表示复用 HTML 缩写规则；填 "css" 则走 CSS 规则（如 m10 → margin: 10px;）

想改 ul>li*5 的输出结构？改 emmet.variables 和 emmet.snippets

默认 ul>li*5 生成的是无 class 的裸 <li>，但项目里往往需要带 class 或 data 属性。这不是靠“扩展包”解决的，而是靠变量注入和片段重写。

实操建议：

• 在 settings.json 中加 emmet.variables，让缩写动态插入项目级常量：

  "emmet.variables": {
    "lang": "zh-CN",
    "charset": "UTF-8",
    "customClass": "list-item"
  }

  然后写 ul>li.item$*5 就能产出 <li class="list-item1">
• 若要彻底替换行为（比如把 ul>li*3 变成带 key 的 React 列表），用 emmet.snippets 自定义片段：

  "emmet.snippets": {
    "html": {
      "ul>li*": "ul.list-unstyled>li.list-item[key='$!']{$0}"
    }
  }

  注意：该配置会覆盖默认缩写，慎用通配符
• 自定义片段只对指定语言生效，"html" 键名不能写成 "javascriptreact" —— 后者需单独配，且值里只能用 HTML 片段语法

Vue 单文件组件里 template 区域缩写无效？语言模式没切对

很多人在 .vue 文件里敲 div.container 没反应，其实是 VSCode 把整个文件当成了 vue 语言，而 Emmet 默认不认这个 ID；它只认 vue-html（template 区）和 vue（script 区）。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

实操建议：

• 光标落在 <template></template> 内，按 Ctrl+Shift+P → 输入「Change Language Mode」→ 选 Vue HTML（ID 就是 vue-html）
• 确保 emmet.includeLanguages 已包含 "vue-html": "html"（上文已提）
• 别依赖文件后缀自动识别：VSCode 有时会把 .vue 错判为 vue 语言（即 script 区模式），此时 template 区缩写必然失效
• 可装官方插件 Volar 替代旧版 Vetur，Volar 原生支持 vue-html 语言模式自动切换

自定义缩写被忽略？优先级和 JSON 格式是关键

改了 emmet.snippets 却没效果，大概率是配置位置错了，或者语法不合法。VSCode 的 Emmet 配置有明确加载顺序：用户设置 > 工作区设置 > 扩展默认值，且只认标准 JSON。

实操建议：

• 务必在 settings.json（用户或工作区）里修改，不要在 GUI 设置界面点“添加项”——GUI 不支持嵌套对象如 snippets
• 检查 JSON 语法：结尾不能多逗号，字符串必须双引号，snippets 是对象不是数组
• 如果同时用了 emmet.extensionsPath 指向本地 snippets 目录，注意该路径下 html.json 的格式必须严格符合 Emmet v2 规范（键名小写、无注释、无多余字段）
• 改完重启 VSCode 或重载窗口（Ctrl+Shift+P → 「Developer: Reload Window」），仅保存 settings.json 不触发 Emmet 重载

最常被忽略的一点：Emmet 的语言映射和片段定义是静态加载的，改了配置不重启，等于没改。还有就是 emmet.variables 里的变量名不能含连字符或空格，否则 $var-name 这种写法会静默失败。