VS Code 的 Emmet 开箱即用但需配置：启用“Emmet: Trigger Expansion On Tab”，切换英文输入法或用 Ctrl/Cmd+Enter 触发；CSS 缩写仅在 style 属性值或 style 标签内生效；层级缩写如 .card>h2+p 严禁空格。
VS Code 的 Emmet 不需要额外安装，开箱即用——但默认配置对中文输入法、缩写触发和 CSS 属性补全有明显干扰，直接敲 div.container 可能没反应，不是你手速慢，是它被“卡住了”。
为什么 div.container 按 Tab 没生成？
VS Code 默认把 Tab 绑定给普通缩进，Emmet 缩写必须显式启用。另外，中文输入法激活状态下，Tab 常被输入法劫持，导致缩写根本没被识别。
- 打开设置（
Ctrl+,），搜emmet trigger，确保Emmet: Trigger Expansion On Tab是勾选状态 - 写 HTML 时临时切换到英文输入法，或改用
Ctrl+Enter（Windows/Linux）或Cmd+Enter（macOS）手动触发 Emmet - 如果仍无效，检查当前文件语言模式是否为
HTML（右下角状态栏），不是Plain Text或JavaScript
flex、pos:a 这类 CSS 缩写为什么不补全？
Emmet 的 CSS 缩写只在 style 属性值内或 <style> 标签中生效，且需在冒号后、分号前触发。单独写一行 flex 不会自动转成 display: flex;。
- 正确姿势：在
<div style="|">中光标停在引号内，输入flex再按Tab→ 补全为display: flex; - 在
<style>块里，输入pos:a+Tab→ 补全为position: absolute; - 注意：CSS 缩写不支持嵌套语法（如
bgc:#f00有效，但div{bgc:#f00}无效）
如何让 .card>h2+p 生成带 class 的嵌套结构？
Emmet 支持层级运算符，但符号优先级和空格敏感——> 前后不能有空格，+ 和 ~ 同理；而 .、# 必须紧贴标签名。
立即学习“前端免费学习笔记（深入）”；
-
.card>h2+p→ 正确，生成：<div class="card"><h2></h2><p></p></div> -
.card > h2 + p→ 错误，空格导致解析失败，只生成<div class="card > h2 + p"></div> - 想加文本内容？用
{}：例如h2{标题}+p{段落}→<h2>标题</h2><p>段落</p>
真正卡住人的往往不是语法记不住，而是输入法、语言模式、空格和触发键这四个点同时出问题。调通一次，后面就全是肌肉记忆了。
