VSCode内置Emmet无需安装插件，但需确保文件语言模式为HTML/CSS（如.vue中须在template/style内），并用Tab触发（Enter需手动开启emmet.triggerExpansionOnTab）；缩写如div.container、ul>li*3有效，CSS属性缩写仅在CSS文件生效，插件冲突或语言模式错误是常见失败原因。
VSCode 内置 Emmet，无需安装插件就能用，但默认行为和常见缩写习惯不完全一致——比如 div.container 能展开，但 ul>li*3 在某些文件类型下可能不触发，关键在文件语言模式和触发方式。
确认当前文件语言模式是 HTML 或 CSS
Emmet 缩写只在对应语言上下文中生效。如果打开一个无后缀的文件或 .txt，div 按 Tab 不会展开。
- 右下角查看状态栏，确认显示为
HTML或CSS；如果不是，点击它，选择Change Language Mode→ 选HTML或CSS - 对
.vue文件，需确保光标在<template></template>或<style></style>区域内，Emmet 才能识别上下文 - 在
.js或.ts文件中写字符串内的 HTML（如html`<div>...`），默认不启用 Emmet，需手动配置 <code>"emerald.languageGroups"或改用html`片段语法常用缩写写法与 Tab / Enter 触发差异
VSCode 默认用 Tab 触发 Emmet 展开，但部分用户习惯按 Enter，结果没反应——这不是 bug，而是设置未开启。
-
div.container→ Tab → 展开为<div class="container"></div> -
ul>li*5→ Tab → 生成带编号的 5 个<li> -
span{Hello}+span{World}→ Tab → 相邻两个带文本的<span></span> - 若想用 Enter 替代 Tab，需在设置中搜索
emmet.triggerExpansionOnTab，勾选它；否则 Enter 只换行 - 缩写中含
:（如m10表示margin: 10px）仅在 CSS 文件中生效，在 HTML 中会被忽略
自定义缩写和禁用冲突插件
有些插件（比如 Auto Rename Tag、Prettier）会在你按 Tab 时抢先响应，导致 Emmet 不触发；也有用户想把
fl定义为float: left，但默认不支持。立即学习“前端免费学习笔记（深入）”；
- 检查是否被其他插件劫持：临时禁用所有插件，只留 VSCode 自带功能，测试
div+ Tab 是否正常 - 添加自定义缩写：在设置中搜
emmet.variables，添加键值对，例如"fl": "float: left"；注意这仅对 CSS 生效 - 扩展缩写能力：修改
emmet.syntaxProfiles，比如设"vue-html": "html"，让.vue模板区支持完整 HTML 缩写 - 避免缩写歧义：不要用
h1当缩写（它本就是标签），而h$*3是合法的，会生成<h1></h1> <h2></h2> <h3></h3>
真正卡住人的往往不是“怎么写缩写”，而是光标位置不对、语言模式没切对、或者某个插件悄悄屏蔽了 Tab 响应——建议先关插件、切语言模式、用最简缩写（如
div）验证基础链路是否通。Emmet 很强，但也很依赖上下文干净。 -
