Emmet插件可让Sublime Text快速生成HTML骨架：输入html:5按Tab即输出标准HTML5结构，需确保语法设为HTML且Emmet已启用；常用缩写如div.container、ul>li*5等大幅提升编码效率，但须注意语法上下文与符号规范。
如何用 Emmet 快速生成 HTML 骨架
Sublime Text 默认不带完整 HTML 模板生成能力，但装上 Emmet 插件后，html:5 就能一键输出带 <!DOCTYPE html>、<html>、<head>、<body> 的标准骨架。
操作很简单：新建文件 → 切换语法为 HTML（菜单栏 View → Syntax → HTML）→ 输入 html:5 → 按 Tab 键。别输错冒号，也别用空格代替。
- 如果按 Tab 没反应，大概率是语法没切对，或 Emmet 未启用（可按
Ctrl+Shift+P输入Emmet: Enable Languages确保 HTML 已勾选） -
html:4s生成 HTML4 Strict 版本，html:xx是 XHTML，日常开发基本用不到 - 生成后光标默认停在
<title>标签内，方便立刻填页面标题
常用 Emmet 缩写及实际用途
缩写不是炫技，是为减少重复敲标签。比如写一个带 class 的 div 容器：div.container + Tab → <div class="container"></div>；再加子元素：div.container>h1+p + Tab → 自动嵌套成 <div class="container"><h1></h1><p></p></div>。
-
.header→class="header"，#app→id="app"，[data-id="1"]→ 直接加属性 -
ul>li*5生成 5 个<li>，div{Hello}+div{World}生成两个带文本的并列 div - 缩写中不能含中文或全角符号，否则解析失败，报错提示通常只是“no matching abbreviation”
为什么有时候缩写不生效？常见卡点
最常被忽略的是语法上下文。Emmet 只在支持的语言模式下工作，即使你写的是 HTML 内容，如果当前文件语法是 Plain Text 或 JavaScript，html:5 按 Tab 就不会触发。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“前端免费学习笔记（深入）”；
- 检查右下角状态栏显示的语法名，必须是
HTML（不是HTML (Rails)或HTML (Twig)，部分衍生语法需手动启用 Emmet 支持） - 快捷键冲突：某些插件（如 SideBarEnhancements）会劫持
Tab，可临时禁用排查；也可改用Ctrl+E强制触发 Emmet - 文件扩展名影响行为：.htm 文件有时不自动识别为 HTML 语法，建议统一用
.html
自定义代码块比缩写更灵活的场景
Emmet 适合通用结构，但项目里常有固定头部、脚部、Vue 组件模板等。这时该用 Sublime 原生 snippets（代码块），而不是硬记缩写。
例如建一个 vue-comp 代码块：菜单栏 Tools → Developer → New Snippet…，填入内容后保存为 Packages/User/vue-comp.sublime-snippet，之后输入 vue-comp + Tab 就能展开完整 Vue 单文件组件结构。
- 代码块支持多行、变量占位（如
$1表示第一个光标位置）、条件逻辑，Emmet 做不到 - 代码块文件名决定触发关键词，但必须放在
Packages/User/下才默认生效 - 修改代码块后无需重启 Sublime，保存即生效；但新增代码块可能需要重启或执行
Tools → Command Palette → Reload Snippets
html:5 解决入门骨架，Emmet 缩写覆盖 80% 标签编写，真正省时间的是把项目高频结构做成代码块。别在缩写上死磕，优先确保语法识别正确——这点卡住，后面所有技巧都白搭。 
