VSCode 的 Emmet 功能可大幅提升前端开发效率：启用自动补全、掌握 HTML/CSS 缩写、自定义片段、并在 JSX/TSX 中配置语言映射。
如果您在使用 VSCode 进行前端开发时希望快速生成 HTML 和 CSS 结构，则 VSCode 内置的 Emmet 功能可大幅缩短编码时间。以下是掌握并高效运用 Emmet 语法的关键操作方式：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用 Emmet 自动补全
VSCode 默认已启用 Emmet，但部分自定义设置可能影响其触发行为。需确认相关配置处于激活状态，确保缩写输入后能即时响应。
1、打开 VSCode 设置界面，可通过快捷键 Cmd + , 实现。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 emmet，定位到 Emmet: Include Languages 设置项。
3、点击右侧的 Edit in settings.json，检查是否存在类似 "html": "html" 或 "javascript": "javascriptreact" 的映射条目。
4、若缺失，手动添加对应语言支持，例如为 Vue 文件启用："vue-html": "html"。
二、HTML 基础缩写展开
Emmet 使用简洁的类 CSS 选择器语法描述结构，输入后按 Tab 键即可生成完整标签树，适用于快速搭建页面骨架。
1、在 HTML 文件中输入 ! + Tab，生成标准 HTML5 文档模板。
2、输入 ul>li*5 后按 Tab，生成包含 5 个列表项的无序列表。
3、输入 div.container>header+h1{首页}+main>p{内容} 后按 Tab，生成带语义化结构与文本内容的嵌套元素。
三、CSS 属性缩写速写
在 CSS 或 style 属性内，Emmet 提供大量属性简写，减少键盘输入量，提升样式编写效率。
1、在 CSS 文件中输入 m10 后按 Tab，展开为 margin: 10px;。
2、输入 bd1-s#f00 后按 Tab，展开为 border: 1px solid #f00;。
3、输入 d:f 后按 Tab，展开为 display: flex;。
四、自定义 Emmet 片段
用户可通过配置 snippets.json 文件扩展 Emmet 缩写库，适配项目特定组件命名规范或框架语法。
1、打开命令面板（Cmd + Shift + P），输入并选择 Emmet: Edit Snippets。
2、在弹出的 snippets.json 文件中，于 html 节点下添加新条目，例如："ccard": "
3、保存文件后，在 HTML 中输入 ccard + Tab 即可插入预设卡片结构。
五、在 JSX/TSX 中启用 Emmet
React 开发中常需在 JSX 语法中使用 Emmet，但默认不识别 .jsx 或 .tsx 文件类型，需显式声明语言映射。
1、打开 VSCode 设置，搜索 emmet include languages。
2、点击 Add Item，在 Item 栏输入 javascriptreact，在 Value 栏输入 javascript。
3、再次点击 Add Item，输入 typescriptreact 作为 Item，typescript 作为 Value。
