Emmet语法可大幅提升VSCode中HTML/CSS编写效率：默认启用但需确认设置；支持HTML嵌套缩写（如ul>li*5）、CSS属性简写（如m10→margin:10px）；可通过settings.json自定义配置并调整触发行为。
如果您在VSCode中编写HTML或CSS代码时希望大幅提升效率，Emmet语法能将重复性标签输入转化为快捷缩写。以下是掌握这一功能的核心操作：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用Emmet支持
VSCode默认已集成Emmet，但需确认工作区设置未禁用该功能，确保HTML和CSS语言模式下缩写可被识别并展开。
1、打开VSCode设置界面，可通过菜单栏【Code】→【Preferences】→【Settings】进入。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入emmet，检查Emmet: Include Languages设置项是否为空。
3、若需为其他文件类型启用Emmet，点击Add Item，输入语言标识符如vue，值设为html。
二、HTML基础缩写展开
Emmet使用类似CSS选择器的语法定义嵌套结构与属性，输入后按Tab键即可生成完整HTML代码块。
1、在HTML文件中输入ul>li*5，按下Tab键，生成含5个列表项的无序列表。
2、输入div.container>h1{标题}+p{段落内容}，按下Tab键，生成带类名的容器及内部标题与段落。
3、输入a[href="https://example.com"]{链接文本}，按下Tab键，生成带href属性与文本内容的超链接。
三、CSS属性快速补全
在CSS或style标签内，Emmet提供属性名缩写映射，输入简写后按Tab可自动补全为标准属性及冒号空格结构。
1、在CSS规则块中输入m10，按下Tab键，展开为margin: 10px;。
2、输入bgc#f00，按下Tab键，展开为background-color: #f00;。
3、输入d:f，按下Tab键，展开为display: flex;。
四、自定义Emmet配置
通过修改settings.json可扩展Emmet对特定语法的支持，例如添加Vue模板缩写或调整输出格式。
1、按下Cmd + Shift + P（macOS）调出命令面板，输入Preferences: Open Settings (JSON)并回车。
2、在JSON对象内添加"emmet.variables"字段，定义常用变量如"lang": "zh-CN"。
3、添加"emmet.preferences"对象，设置"output.format"为true以启用自动换行缩进。
五、禁用自动闭合与调整触发行为
部分场景下默认的自动闭合或Tab触发可能干扰编辑节奏，可通过配置关闭或切换为Enter触发。
1、在设置中搜索emmet.triggerExpansionOnTab，将其设为false以禁用Tab展开。
2、搜索html.autoClosingTag，设为false可停用HTML标签自动闭合。
3、如需仅在特定语法中启用Emmet，将emmet.showExpandedAbbreviation设为inMarkupAndStylesheetFilesOnly。
