Emmet可靠展开需语言模式正确、语法精准、上下文匹配；最常见失效原因是VSCode未识别为HTML模式，如状态栏显示Plain Text或JavaScript，或插件劫持Tab键，或配置中emmet.triggerExpansionOnTab设为false。
Emmet 不是万能缩写手册，它只在语言模式正确、语法精准、上下文匹配时才可靠展开；所谓“万能”其实是误读，真正高效的是掌握三类结构逻辑 + 两个关键配置。
为什么 div.container>h2.title+ul.list>li*3 按 Tab 没反应
最常见原因不是缩写写错，而是 VSCode 根本没把它当 HTML 处理：
- 右下角状态栏显示的是
Plain Text或JavaScript，不是HTML—— 点击它手动切为 HTML - 文件未保存，后缀为空（如 Untitled-1），VSCode 默认识别为 Plain Text
- 装了 Prettier、Auto Rename Tag 等插件，劫持了
Tab键行为；检查settings.json是否存在"emerald.emmetEnabled": false或残留的旧配置 -
emmet.triggerExpansionOnTab被设为false（默认是true），或editor.tabCompletion设成了"onlySnippets"
ul>li*5 和 ul>li{Item $}*5 的实际差异
符号位置和花括号紧贴性直接决定输出内容是否带文本：
-
ul>li*5→ 生成 5 个空<li></li> -
ul>li{Item $}*5→ 生成<li>Item 1</li>到<li>Item 5</li>，$是计数符，必须紧跟在{}内部，li {Item $}*5（带空格）会失效 -
a[href="#"]{Click}✅ 有效；a [href="#"]{Click}❌ 失效——空格中断解析，Emmet 把a当成独立标签，后面部分被忽略
在 Vue/JSX 中让 section>div>p 正常展开
Vue 单文件组件和 JSX 默认不启用 Emmet，必须显式映射语言模式：
立即学习“前端免费学习笔记（深入）”；
- Vue 的
<template>区域：需在settings.json中添加"vue-html": "html" - JSX（.jsx/.tsx）中写元素：添加
"javascriptreact": "html"，不是"javascript" - Vue 的
<script>块内写 JSX 片段（如render()函数），同样依赖javascriptreact映射 - Volar 插件已取代 Vetur，确保已安装并启用；否则
<template>可能被识别为vue而非vue-html，导致 Emmet 不响应
! 生成的 HTML5 模板为什么缺 <meta charset="UTF-8">
VSCode 内置的 ! 缩写默认输出的是精简版 html:5，不含 charset 声明——这不是 bug，是设计选择：
- 它等价于
html:5，输出结构为<!DOCTYPE html><html lang="en"><head><title></title></head><body></body></html> - 若需强制插入
<meta charset="UTF-8">，可在settings.json中覆盖变量："emmet.variables": { "charset": "UTF-8" } - 注意不要误删或覆盖整个
emmet.variables对象，否则可能影响其他自定义变量（如lang） - 修改后无需重启，但需新建一个 .html 文件再试
!，已有文件可能缓存旧行为
真正卡住人的从来不是缩写记多少，而是光标停在哪、语言模式对不对、输入法是不是中文、以及 settings.json 里那几行看似无关的配置有没有悄悄改过。Emmet 的“快”，只建立在这些细节都对齐的基础上。
