Emmet 在 VSCode 中默认启用，但需确保文件语言模式为 HTML 等支持类型并开启 Tab 触发；缩写如 div>ul>li*3 按 Tab 展开，非 Enter 或空格；常见失效原因主要是语言模式错误或未勾选 Emmet: Trigger Expansion On Tab。
Emmet 在 VSCode 中默认已启用，不需要额外安装插件，但必须确保文件语言模式是 html 或 jsx 等支持 Emmet 的类型，否则缩写完全不生效。
确认当前文件语言模式为 HTML
VSCode 左下角状态栏会显示当前语言（如 Plain Text），点击它可切换。若显示不是 HTML，输入 html 并回车，否则所有 Emmet 缩写（如 div>ul>li*3）都只会原样输出，不会展开。
- 新建文件后默认是
Plain Text，必须手动设为HTML - 保存为
.html后缀通常会自动识别，但未保存前仍需手动设置 - 在
.vue或.jsx文件中，需在对应模板区域（如内）才支持 HTML 类 Emmet
常用 Emmet 缩写写法与触发方式
输入缩写后按 Tab 键展开（不是 Enter，也不是空格）。VSCode 默认禁用 Ctrl+Space 触发，避免和智能提示冲突。
-
div.container>ul.nav>li*3>a{Item $}→ 展开为带文本和序号的嵌套结构 -
img[src="logo.png" alt="Logo"]→ 生成带双引号属性的标签（注意等号前后不加空格） -
p{Hello}+p{World}→ 生成两个并列段落，{}包裹文本内容 -
section#main.container→ 生成
自定义 Emmet 配置或修复不生效问题
如果缩写始终不展开，大概率是用户设置了错误的 emmet.includeLanguages 或禁用了 emmet.triggerExpansionOnTab。
立即学习“前端免费学习笔记（深入）”；
- 打开设置（
Ctrl+,），搜索emmet trigger，确保Emmet: Trigger Expansion On Tab已勾选 - 若要在
.md文件中使用 Emmet，需在settings.json中添加："emmet.includeLanguages": { "markdown": "html" } - 禁用其他可能劫持
Tab的插件（如 Auto Rename Tag、Prettier 某些旧配置）
HTML 特定场景下的注意事项
Emmet 对语义化标签和自闭合标签有隐式规则，容易写出不符合预期的结构。
-
img、input、br等默认生成自闭合形式（ -
script:src展开为，而script: defer才加defer属性 - 写
ul>li后按Tab，只生成一个；要多个需显式写li*5
最常被忽略的是语言模式和 Tab 触发开关——90% 的“Emmet 不工作”问题都卡在这两步，而不是缩写写错了。
