emmet 默认启用但仅在 html 语言模式下生效，新建文件需先保存为 .html 并确认右下角状态栏显示 html；缩写严格解析，空格、大小写、引号均会导致 tab 失效；核心是模板、嵌套、属性+文本三类结构；tab 失效主因是语言模式错误或缩写格式不规范。

Emmet 默认启用，但语言模式必须是 HTML

VS Code 自带 Emmet，不需要额外安装插件——只要当前文件被识别为 html 或 htm，缩写就自动生效。真正卡住人的不是功能没开，而是右下角状态栏显示的是 Plain Text、JavaScript 或空白。

• 新建文件后务必先保存为 index.html，否则语言模式不会切换
• 点击右下角状态栏的当前语言名 → 选择 Configure File Association for '.xxx' → 设为 HTML
• 在 .js 或 .vue 文件里写 HTML 缩写，默认不触发；强行开启（如通过 "emerald.emmetExtensions"）容易和 Prettier 等扩展冲突，不推荐

缩写写法容错极低，空格和大小写都会失效

Emmet 不是模糊匹配，它是严格按语法解析的。哪怕多敲一个空格、字母大小写不对，或者用了中文标点，Tab 就不会展开。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• div.container ✅ 有效；div .container ❌（中间有空格）
• UL>LI*3 ❌（大写标签名在部分旧配置下可能失败）；统一用小写 ul>li*3 ✅
• img[src=logo.png alt=Logo] ✅；但 img[src="logo.png" alt="Logo"] ❌（引号会阻断解析）
• a[href=#]{Click me} ✅；a[href=#] {Click me} ❌（属性和花括号之间不能有空格）

高频缩写组合，不用死记但得懂结构逻辑

真正要熟练的不是全部语法，而是三类核心模式：模板生成、嵌套关系、属性+文本填充。它们覆盖 90% 的日常需求。

• ! 或 html:5 → 生成完整 HTML5 骨架（! 更快，且无需记忆）
• ul>li*5 → 先父后子，> 表示嵌套；* 表示重复数量
• div#app.main[data-id="123"]{Hello} → # 定 id，. 定 class，[] 写属性，{} 填文本，全部连写无空格
• lorem10 → 直接生成 10 个单词占位文本，比手敲   或复制粘贴快得多

Tab 键失效？先查设置再动快捷键

绝大多数“Tab 没反应”问题，根源不在快捷键绑定，而在编辑器配置或输入上下文。

• 确认 "editor.tabCompletion": "on" 是启用状态（默认就是 on，除非手动关过）
• 光标必须停在缩写末尾才能触发展开；如果光标在缩写中间，Tab 可能调出其他补全项
• 不要轻易改 Emmet: Trigger Expansion On Tab 开关——它影响全局补全行为，容易引发意外交互
• 真要换快捷键，优先用键盘快捷键设置绑定 emerald.expandAbbreviation，而非关闭 Tab 触发

实际写的时候，最常被忽略的是语言模式和空格——这两点不解决，再多技巧也白搭。缩写不是“写完再按 Tab”，而是“写对了才值得按 Tab”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！