Emmet插件可让Sublime Text快速生成HTML骨架：输入html:5按Tab即输出标准HTML5结构，需确保语法设为HTML且Emmet已启用；常用缩写如div.container、ul>li*5等大幅提升编码效率，但须注意语法上下文与符号规范。

如何用 Emmet 快速生成 html 骨架

sublime Text 默认不带完整 HTML 模板生成能力，但装上 Emmet 插件后，html:5 就能一键输出带 、、、 的标准骨架。

操作很简单：新建文件 → 切换语法为 HTML（菜单栏 View → Syntax → HTML）→ 输入 html:5 → 按 Tab 键。别输错冒号，也别用空格代替。

• 如果按 Tab 没反应，大概率是语法没切对，或 Emmet 未启用（可按 Ctrl+Shift+P 输入 Emmet: Enable Languages 确保 HTML 已勾选）
• html:4s 生成 HTML4 Strict 版本，html:xx 是 xhtml，日常开发基本用不到
• 生成后光标默认停在 标签内，方便立刻填页面标题

常用 Emmet 缩写及实际用途

缩写不是炫技，是为减少重复敲标签。比如写一个带 class 的 div 容器：div.container + Tab →

；再加子元素：div.container>h1+p + Tab → 自动嵌套成

。

• .header → class="tuc-19bc10f7-42da51-0 header tuc-19bc10f7-42da51-0"，#app → id="app"，[data-id="1"] → 直接加属性
• ul>li*5 生成 5 个
• ，div{Hello}+div{World} 生成两个带文本的并列 div
• 缩写中不能含中文或全角符号，否则解析失败，报错提示通常只是“no matching abbreviation”

为什么有时候缩写不生效？常见卡点

最常被忽略的是语法上下文。Emmet 只在支持的语言模式下工作，即使你写的是 HTML 内容，如果当前文件语法是 Plain Text 或 javaScript，html:5 按 Tab 就不会触发。

立即学习“前端免费学习笔记（深入）”；

• 检查右下角状态栏显示的语法名，必须是 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% 标签编写，真正省时间的是把项目高频结构做成代码块。别在缩写上死磕，优先确保语法识别正确——这点卡住，后面所有技巧都白搭。