VSCode 默认支持 Emmet，但需确保文件语言模式正确（如 HTML）、启用对应语言的 Emmet 支持（如 JSX 需配置 includeLanguages），并遵循官方 CSS 缩写规则（如 d:f ✅，flex ❌）。
VSCode 默认就支持 Emmet，不需要额外安装插件，但必须确保文件类型识别正确、语法启用到位，否则 Tab 或 Enter 按下后毫无反应——这是最常被误认为“Emmet 不工作”的原因。
为什么输入 div.container 按 Tab 没反应？
根本原因通常是 VSCode 没把当前文件当成 HTML/CSS 处理：
- 检查右下角状态栏，确认语言模式是
HTML（不是Plain Text或JavaScript）；点击它可手动切换 - 如果是
.vue或.svelte文件，需在设置中启用对应语言的 Emmet 支持："emerald: true无效，应查emmet.includeLanguages - 某些自定义文件扩展名（如
.tpl）需显式映射："emmet.includeLanguages": {"tpl": "html"} - 禁用其他干扰插件（如某些 snippet 插件会劫持
Tab行为）
ul>li*5 能展开，但 flex 写成 d:f 却不补全？
Emmet 的 CSS 缩写有固定规则，并非所有简写都支持。它只认官方预设的缩写词，比如：
-
d:f✅ 展开为display: flex; -
d:if✅ 展开为display: inline-flex; -
bgc:#f00✅ 展开为background-color: #f00; -
flex❌ 不是 Emmet 缩写，不会补全（得手动输或靠 CSS IntelliSense） - 缩写对大小写敏感：
Mt20→margin-top: 20px;，但mt20就不触发
如何让 Emmet 在 JSX/TSX 中也生效？
JSX 默认不启用 Emmet，因为标签语法和 HTML 有差异（如 className 替代 class），但可以安全开启：
立即学习“前端免费学习笔记（深入）”；
- 打开设置（
Ctrl+,），搜索emmet includeLanguages - 添加配置：
"emmet.includeLanguages": {"javascriptreact": "html", "typescriptreact": "html"} - 注意：此时
div.container会展开为<div classname="container"></div>，不是class= - 若想用
cls缩写生成className，需额外配置emmet.variables，但原生不支持，建议直接用cn+ 自定义 snippet
Emmet 最容易被卡住的地方，其实是语言模式和缩写边界——它不报错，只是沉默，所以第一反应不该是重装插件，而是看右下角那个小标签。
