在VSCode中配置Emmet自定义HTML缩写可提升效率，需创建snippets.json文件并定义快捷方式（如cc生成版权注释），通过emmet.extensionsPath指向配置路径，保存后在HTML中输入缩写按Tab展开，注意避免与默认缩写冲突且修改后需重启编辑器生效。
在 VSCode 中使用 Emmet 配置自定义 HTML 缩写，可以大幅提升编写 HTML 的效率。默认情况下，Emmet 已经支持许多常用缩写（如 div → div、ul>li*3 → 列表结构），但你也可以根据项目或团队习惯添加自己的快捷方式。
1. 创建 Emmet 配置文件
VSCode 使用 emmet.includeLanguages 和自定义缩写配置来扩展功能。要添加自定义 HTML 缩写，需在用户或工作区设置中配置 emmet.extensionsPath 指向一个包含自定义 snippets 的 JSON 文件。
步骤如下：
2. 编写自定义缩写规则
在 snippets.json 中，你可以为 HTML 定义新的缩写。格式如下：
立即学习“前端免费学习笔记（深入）”；
{ "html": { "snippets": { "cc": "", "hdr": "header>h1{Header Title}", "ft": "footer>p{© ${TM_YEAR} }", "btn-primary": "button.btn.btn-primary[type=button]{Click Me}" } } }
说明：
- cc 输入后按 Tab 会生成注释版权信息
- hdr 快速生成 header 结构
- ${TM_YEAR} 是变量，自动插入当前年份
- 支持嵌套和 class 写法（类似 Bootstrap）
3. 在 VSCode 中启用自定义配置
打开 VSCode 设置（Ctrl + ,），搜索 emmet extensions path，填写你创建的路径，例如：
${workspaceFolder}/.vscode/emmet
或者在 settings.json 中手动添加：
{ "emmet.extensionsPath": ".vscode/emmet" }
保存后，在 HTML 文件中输入你定义的缩写（如 btn-primary），按 Tab 即可展开。
4. 注意事项与技巧
- 确保文件保存为 UTF-8 编码
- 修改 snippets.json 后需重新加载 VSCode（或重启编辑器）才能生效
- 避免与现有 Emmet 缩写冲突（如不要覆盖 ul、table 等）
- 可在不同项目中使用不同的 snippets 配置，便于团队协作统一代码结构
基本上就这些。合理利用 Emmet 自定义缩写，能让你写 HTML 更快更顺手。不复杂但容易忽略的是路径配置和文件命名必须准确。试试看吧！
