VSCode 默认支持 Emmet，需确保文件后缀为.html或.css且语言模式设为HTML/CSS；缩写须按Tab键触发，非Enter；JSX/TSX需配置emmet.includeLanguages；CSS缩写遵循预设映射（如mt10有效、m10无效）；自定义缩写用emmet.variables配置。
VSCode 默认就支持 Emmet，不需要额外安装插件——只要文件后缀是 .html 或 .css，且语言模式正确设为 HTML/CSS，就能直接用。
确认 Emmet 是否已启用并识别当前文件类型
很多人敲了缩写没反应，其实是 VSCode 没把当前文件当成 HTML 或 CSS 处理。检查右下角状态栏：
- 如果显示
Plain Text，点击它 → 选择HTML（或CSS） - 如果显示
HTML但仍不生效，打开命令面板（Ctrl+Shift+P/Cmd+Shift+P），运行Developer: Toggle Developer Tools，看控制台有没有报emmet相关错误 - 确保设置中未禁用 Emmet：在
settings.json中检查是否有"emmet.triggerExpansionOnTab": false或"emmet.showExpandedAbbreviation": "never"这类覆盖项
HTML 缩写必须以 Tab 键触发，不是回车
这是最常踩的坑：输入 div.container>ul>li*3 后按 Enter，结果只是换行；按 Tab 才会展开成完整结构。原因在于：
- Emmet 的默认触发键是
Tab，和 VSCode 的智能补全冲突时，它会退让 - 若想用
Enter触发，需显式配置："emmet.triggerExpansionOnTab": true（注意这个值是true才启用 Tab，名字有迷惑性） - 在 JSX/TSX 文件中，Emmet 默认关闭，需手动加配置：
"emmet.includeLanguages": {"javascript": "javascriptreact"}
CSS 属性缩写要记对前缀，比如 m10 不生效但 mt10 可以
CSS Emmet 不是自由联想，它依赖预设的属性映射表。常见误区：
立即学习“前端免费学习笔记（深入）”；
-
m10❌（不识别通用简写），mt10✅（mt=margin-top） -
dib✅（display: inline-block），但db是display: block，df是display: flex - 单位默认是
px，写w100p才是width: 100%；w100→width: 100px - 颜色缩写如
@m展开为margin: ;，不是margin+ 颜色值，别和主题变量混淆
自定义缩写需要改 emmet.variables，不是改 snippets
想让 myheader 展开成特定 HTML 片段？不能靠 User Snippets，得走 Emmet 的变量机制：
- 在
settings.json中添加："emmet.variables": {"myheader": "<header class='\"site-header\"'></header>"} - 然后在 HTML 文件中输入
myheader+Tab即可 - 注意：变量值必须是合法 HTML 字符串，引号要用反斜杠转义，
和 <code>>不能省略 - 全局自定义缩写（如新增一个
btn）要用emmet.snippets，但格式更复杂，日常建议优先用变量
Emmet 看似简单，真正卡住的往往不是语法，而是语言模式、触发键、或配置被其他插件覆盖。调通的第一步永远是看右下角那个小标签是否写着你想要的语言名。
