emmet 自定义缩写需语言映射、变量注入、片段重写三者协同生效；漏任一环如 btn-primary 均不展开，且必须确认语言 id（如 vue-html）、正确配置 includelanguages、variables 和 snippets，并重启 vscode。
Emmet 自定义缩写词不是靠“装插件”或“点按钮”生效的，而是靠三类配置协同作用：语言映射、变量注入、片段重写。漏掉任一环，btn-primary 或 section-main 都不会展开。
确认语言模式并配置 emmet.includeLanguages
缩写不触发，90% 是因为 VSCode 根本没把当前文件当成 Emmet 能处理的语言。比如在 .vue 文件里敲 div.container 没反应，不是 Emmet 坏了，是它默认不认识 vue 这个语言 ID。
- 光标放在
<template></template>区域，按Ctrl+Shift+P→ 输入Change Language Mode→ 选Vue HTML（ID 是vue-html，不是vue） - 打开
settings.json，确保有类似这样的映射：
"emmet.includeLanguages": {
"javascriptreact": "html",
"typescriptreact": "html",
"vue-html": "html",
"astro": "html"
}
注意：javascriptreact 是 JSX 文件的真实语言 ID，不是 .jsx 后缀；填 "html" 表示复用 HTML 缩写规则，填 "css" 则走 CSS 规则（如 m10 → margin: 10px;）
用 emmet.variables 注入动态值
想让 ul>li.item$*3 输出带项目级 class 名或年份的代码？不用写死，用变量更灵活。
- 在
settings.json中加emmet.variables：
"emmet.variables": {
"customClass": "list-item",
"TM_YEAR": "2026"
}
然后写 ul>li.$customClass$*3 就生成 <li class="list-item1">；写 cc（配合后续 snippets）可自动插入 <!-- Copyright (c) ${TM_YEAR} -->
- 变量名必须全小写、下划线分隔（
base_url✅，BASE_URL❌） - 不能覆盖内置变量如
lang、charset，否则可能影响 HTML 模板生成
通过 emmet.snippets 定义全新缩写结构
想让 form-login 直接输出带 label + input 的完整表单？或者把默认 ul>li*3 改成带 key 和 class 的 React 友好结构？得靠 emmet.snippets。
- 只对指定语言生效，
"html"键名不能写成"javascriptreact"——后者要单独配，且值里只能用 HTML 片段语法 - 示例（加到
settings.json）：
"emmet.snippets": {
"html": {
"form-login": "form:post>.field>input:text+label+input:password+label+input:submit",
"ul>li*": "ul.list-unstyled>li.list-item[key='$!']{$0}"
}
}
注意："ul>li*" 是通配写法，会覆盖所有 ul>li*N 行为，慎用；$! 表示唯一 key（React 场景常用），$0 是光标最终位置
- 自定义缩写和默认缩写共存，但同名时自定义优先
- 改完必须重启 VSCode，热重载不生效
用 emmet.extensionsPath 加载外部 snippets.json
多人协作或项目级统一规范时，把缩写集中管理比塞进 settings.json 更可控。
- 在项目根目录建
.vscode/emmet/snippets.json - 内容格式必须严格：
{
"html": {
"snippets": {
"btn-primary": "button.btn.btn-primary[type=button]{Click Me}",
"hdr": "header>h1{Header Title}"
}
}
}
再在 settings.json 中指定路径：
"emmet.extensionsPath": ".vscode/emmet"
注意：emmet.extensionsPath 不支持 ${workspaceFolder} 变量，必须写相对路径；Windows 下路径分隔符用 /，不是 \；文件名必须是 snippets.json，大小写敏感
真正容易被忽略的是语言 ID 的准确性——VSCode 识别的不是后缀，是编辑器内部语言模式。一个 .vue 文件里，<template></template>、<script></script>、<style></style> 区域各自有不同的语言 ID，Emmet 只响应其中被明确映射的那一部分。
