Emmet 是 VSCode 内置的高效代码补全工具，支持 HTML/CSS 缩写展开、自定义片段及按需启用或禁用。
如果您在使用 vscode 进行前端开发时希望快速生成 html 和 css 代码结构，则 emmet 是内置的高效代码补全工具。以下是启用和运用 emmet 的具体方式：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用 Emmet 自动展开
VSCode 默认已集成 Emmet，但需确认其在对应文件类型中处于激活状态，以确保缩写语法能被正确识别并展开。
1、打开 VSCode 设置界面，可通过菜单栏选择 Code → Settings 或使用快捷键 Cmd + ,。
2、在设置搜索框中输入 emmet.includeLanguages，点击右侧的 Edit in settings.json 链接。
立即学习“前端免费学习笔记（深入）”；
3、在 settings.json 文件中添加或确认存在如下配置项："emmet.includeLanguages": {"javascript": "html", "vue": "html"}。
二、使用 HTML 缩写快速生成结构
Emmet 支持通过类似 CSS 选择器的语法快速构建嵌套 HTML 元素，输入缩写后按 Tab 键即可展开为完整代码。
1、在 .html 文件中输入 ul>li*5，然后按下 Tab 键。
2、光标所在位置将自动生成一个包含五个列表项的无序列表结构。
3、输入 div.container>header+h1{首页}+main>p{欢迎来到主页}+footer©2024 后按 Tab，可生成带类名、文本内容与符号的完整页面骨架。
三、CSS 属性缩写补全
在 CSS 或 style 标签内，Emmet 可将简短属性缩写自动转换为完整声明，提升样式编写效率。
1、在 style 块或 .css 文件中输入 m10，按下 Tab 后生成 margin: 10px;。
Twitter Bootstrap无疑是最好用的前端开发框架，其中对表格的预设样式也是非常的好看，可以满足我们日常的界面风格，但是实际项目中，我们可能需要动态的加载Table表格里面的内容，然后需要有个排序的功能。
2、输入 w100p 并按 Tab，得到 width: 100%;。
3、输入 d:f 后按 Tab，展开为 display: flex;。
四、自定义 Emmet 用户片段
用户可通过创建自定义缩写映射，扩展 Emmet 对项目特有组件或结构的支持。
1、通过菜单栏选择 Code → Preferences → Configure User Snippets。
2、在弹出菜单中选择 html，打开 html.json 文件。
3、在 "body" 数组中添加新条目，例如："my-header": {"prefix": "hdr", "body": ["$1
", "
五、禁用特定文件类型的 Emmet
当 Emmet 在非预期语言环境中干扰输入时，可通过排除配置关闭其自动触发行为。
1、打开 settings.json 文件。
2、添加配置项："emmet.excludeLanguages": ["markdown", "json"]。
3、保存后，在 Markdown 或 JSON 文件中输入缩写将不再响应 Tab 展开。
