VSCode 中 Emmet 未生效需启用自动触发、掌握缩写语法、自定义片段并排查语言模式与设置冲突。具体包括勾选 emmet.triggerExpansionOnTab、配置 includeLanguages、练习 ul>li*5 等缩写、添加 user snippets，以及确认语言模式和排除扩展干扰。
如果您在使用 VSCode 编写 HTML 或 CSS 时频繁手动输入重复标签、属性或样式结构，则可能是由于未启用或未熟练运用 Emmet 的快捷展开机制。以下是提升编码效率的具体操作路径：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用 Emmet 自动触发
VSCode 默认已内置 Emmet 支持，但部分工作区设置可能禁用自动缩写展开功能，需确认其处于激活状态。
1、点击左下角齿轮图标，选择“设置”。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 emmet.triggerExpansionOnTab。
3、勾选该选项，确保值为 true。
4、在设置中搜索 emmet.includeLanguages，点击“在 settings.json 中编辑”。
5、添加以下键值对以支持 .vue 或 .jsx 文件中的 Emmet："vue-html": "html", "javascriptreact": "jsx"。
二、掌握核心缩写语法
Emmet 通过类 CSS 选择器语法快速生成嵌套结构，理解其符号含义是高效编码的前提。
1、输入 ul>li*5 后按 Tab 键，生成含 5 个列表项的无序列表。
2、输入 div.container>h1{标题}+p{段落内容} 后按 Tab，生成带类名、文本和兄弟节点的结构。
3、输入 a[href="#"][title="链接"]{点击这里} 可一次性插入带多个属性与文本的锚点。
4、在 CSS 文件中输入 m10-20 并按 Tab，展开为 margin: 10px 20px;。
三、自定义 Emmet 用户片段
当内置缩写无法覆盖项目特有组件结构时，可通过自定义片段扩展 Emmet 能力，适配团队规范。
1、按下 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows），输入并选择“Preferences: Configure User Snippets”。
2、选择“html.json”，在右侧代码块中插入新条目，例如：
3、键名为 comp-header，前缀设为 header，body 值为 ["${1:页面标题}
", " ", "
4、保存后，在 HTML 文件中输入 header 并按 Tab 即可调用该结构。
四、修复 Emmet 不生效问题
当缩写不响应 Tab 或回车时，常因语言模式识别错误或扩展冲突导致，需逐项排查。
1、确认当前文件右下角显示的语言模式为 HTML 或 CSS；若显示为 Plain Text，点击切换。
2、打开命令面板，执行 “Developer: Toggle Developer Tools”，在 Console 中检查是否存在 Emmet: failed to expand abbreviation 报错。
3、禁用所有非必要插件，仅保留官方 Emmet 扩展（已内置，无需额外安装），重启 VSCode。
4、检查用户设置中是否存在 emmet.excludeLanguages，若有，移除其中的 html 或 css。
