VSCode中Emmet功能需确认语言模式、配置JS支持、自定义缩写、禁用冲突插件并掌握快捷操作。例如设HTML模式后输入div.container按Tab生成对应标签，通过settings.json添加javascriptreact支持JSX，配置html.json自定义ul-aria片段，关闭Prettier相关干扰选项，并用Cmd+Shift+P调用Emmet: Balance Tag等指令提升效率。
如果您在使用 VSCode 编写 HTML 或 CSS 时希望快速生成结构化代码片段，则可能是由于未正确启用或配置 Emmet 功能。以下是激活并高效使用该功能的操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、确认 Emmet 默认启用状态
VSCode 自 1.80 版本起默认启用 Emmet 支持，但需确保当前文件语言模式被识别为 HTML、CSS、SCSS、JSX 等 Emmet 兼容类型，否则缩写无法触发。
1、打开一个新文件，点击右下角语言模式显示区域（如“Plain Text”）。
立即学习“前端免费学习笔记（深入）”；
2、在弹出菜单中选择HTML或CSS。
3、输入div.container后按Tab键，观察是否生成。
二、手动启用 Emmet 对 JavaScript 文件的支持
Emmet 默认不作用于 .js 文件，但可通过设置扩展其在 JSX 或模板字符串中的补全能力。
1、按下 Cmd + ,（macOS）打开设置界面。
2、在搜索框中输入emmet include languages。
3、点击“在 settings.json 中编辑”，添加如下条目：
"emmet.includeLanguages": {"javascript": "javascriptreact"}。
三、自定义 Emmet 缩写行为
通过修改用户代码片段或 Emmet 配置，可让缩写适配团队规范或个人习惯，例如将ul默认生成带aria-label的语义化列表。
1、执行命令面板：Cmd + Shift + P，输入并选择“Preferences: Configure User Snippets”。
3、在"body"数组内插入新片段，例如：
"ul-aria": {"prefix": "ul-a","body": ["","
"]}。
四、禁用冲突插件以保障 Emmet 触发稳定性
部分格式化插件（如 Prettier）或旧版 HTML 语法高亮扩展可能拦截 Tab 行为，导致 Emmet 缩写无响应。
1、打开扩展视图：Cmd + Shift + X。
2、搜索关键词prettier，点击其右侧齿轮图标，选择“扩展设置”。
3、关闭选项Prettier: Tab Key Move Focus与Prettier: Require Config（若启用）。
五、使用 Emmet 快捷操作提升效率
Emmet 不仅支持缩写展开，还提供行内操作指令，例如平衡标签、更新图像尺寸、合并行等，无需离开键盘即可完成常见编辑任务。
1、将光标置于任意 HTML 标签名内（如 2、按下Cmd + Shift + P，输入“Emmet: Balance Tag”并回车。 3、光标自动包裹当前标签及其全部子内容，形成完整闭合结构。div上）。
