VSCode配置Emmet高级技巧_HTML标签一键生成的万能缩写手册-VSCode-PHP中文网

emmet可靠展开需语言模式正确、语法精准、上下文匹配；最常见失效原因是vscode未识别为html模式，如状态栏显示plain text或javascript，或插件劫持tab键，或配置中emmet.triggerexpansionontab设为false。

vscode配置emmet高级技巧_html标签一键生成的万能缩写手册

Emmet 不是万能缩写手册，它只在语言模式正确、语法精准、上下文匹配时才可靠展开；所谓“万能”其实是误读，真正高效的是掌握三类结构逻辑 + 两个关键配置。

最常见原因不是缩写写错，而是 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"

符号位置和花括号紧贴性直接决定输出内容是否带文本：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

ul>li*5 → 生成 5 个空 <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 默认不启用 Emmet，必须显式映射语言模式：

Vue 的 <template></template> 区域：需在 settings.json 中添加 "vue-html": "html"
JSX（.jsx/.tsx）中写元素：添加 "javascriptreact": "html"，不是 "javascript"
Vue 的 <script></script> 块内写 JSX 片段（如 render() 函数），同样依赖 javascriptreact 映射
Volar 插件已取代 Vetur，确保已安装并启用；否则 <template></template> 可能被识别为 vue 而非 vue-html，导致 Emmet 不响应

VSCode 内置的 ! 缩写默认输出的是精简版 html:5，不含 charset 声明——这不是 bug，是设计选择：

它等价于 html:5，输出结构为 <title></title>
若需强制插入 <meta charset="UTF-8">，可在 settings.json 中覆盖变量："emmet.variables": { "charset": "UTF-8" }
注意不要误删或覆盖整个 emmet.variables 对象，否则可能影响其他自定义变量（如 lang）
修改后无需重启，但需新建一个 .html 文件再试 !，已有文件可能缓存旧行为