emmet缩写功能在vscode中默认支持，但需正确设置并掌握语法。首先确保已启用：打开设置搜索emmet，检查html是否在enabled syntaxes中，或手动在settings.json添加”emmet.includelanguages”: {“html”: “html”}；其次掌握常见语法如div.container生成带类的标签，ul>li*3创建列表，input[type=text]添加属性；若不生效需检查文件类型是否为.html、是否在代码区触发、快捷键是否冲突、以及emmet.triggerexpansionontab是否开启；最后可自定义模板如输入form-login生成登录表单结构，从而大幅提升html编写效率。
Emmet 缩写功能是 vscode 中非常实用的一个工具，能大幅提升 HTML（以及 css）代码编写效率。如果你刚接触它，可能会疑惑为什么别人敲几下就能生成一整块结构，而自己还在一个标签一个标签地打。其实只要设置正确，Emmet 在 VSCode 中默认就已经支持了，只是有些细节容易被忽略。
确保 Emmet 已启用
VSCode 默认是开启 Emmet 支持的，但有时候因为配置改动或者插件冲突，可能没生效。你可以通过以下方式确认是否已经启用：
- 打开 VSCode 设置（快捷键 Ctrl + , 或 Cmd + ,）
- 搜索关键词 emmet
- 确认 Emmet: Enabled Syntaxes 中包含 html（以及其他你希望支持的语言）
如果没看到相关选项，也可以直接打开 settings.json 文件，在里面添加或检查如下配置：
立即学习“前端免费学习笔记（深入）”；
"emmet.includeLanguages": { "html": "html" }
这样可以确保你在 HTML 文件中能够正常使用 Emmet 缩写。
正确使用 Emmet 缩写语法
Emmet 的核心在于“缩写”，输入完缩写后按 Tab 键即可展开成完整的 HTML 结构。比如输入 div.container 再按 Tab，就会变成：
<div class="container"></div>
常见用法包括：
- ul>li*3 → 生成带三个列表项的无序列表
- section#main>h1+p → 创建一个 section 包含 h1 和 p 标签
- input[type=text placeholder=请输入] → 快速创建带属性的 input 元素
这些写法看起来像简写公式，但一旦熟悉之后，写起结构来速度会快很多。
遇到不生效？检查几个关键点
有时候 Emmet 不工作，不是它坏了，而是你忽略了下面几点：
- 文件类型是否正确识别：确保当前文件保存为 .html 后缀，或者语言模式选的是 HTML。
- 是否在正确的编辑区域触发：Emmet 只在代码区域生效，不能在注释、字符串或某些插件界面里使用。
- 快捷键冲突：如果你装了一些扩展，可能会占用 Tab 键。可以尝试改用 Ctrl + E（windows/linux）或 Cmd + E（Mac）来手动触发展开。
- 禁用了 Emmet 自动提示：在设置中搜索 emmet.triggerExpansionOnTab，确保它是开启状态。
小技巧：自定义 Emmet 缩写模板
如果你经常写特定结构，比如表单、导航栏等，可以自定义 Emmet 缩写模板。例如：
"emmet.userSnippets": { "html": { "snippets": { "form-login": "form[action='/login']>(input[type=text name=username]+input[type=password name=password])+button[type=submit]{登录}" } } }
这样你只需要输入 form-login 并按 Tab，就能快速生成登录表单结构。
基本上就这些。Emmet 功能本身不复杂，但确实很容易因为配置或操作习惯问题导致无法使用。掌握好基本语法和设置要点，你的 HTML 编写效率会提升一大截。
