用 html:5 缩写加 tab 键可快速生成标准 html 模板；自定义 snippet 需正确设置 scope（如 text.html.basic）、保存至 user 包、用 tabtrigger 触发，且确保语法模式为 html。
怎么用 Sublime Text 快速插入 HTML 模板
Sublime Text 本身不带“一键生成完整 HTML 页面”的默认快捷键，但通过 html:5 这个 Emmet 缩写就能秒出标准模板——前提是 Emmet 插件已启用（新版 Sublime 默认内置）。
在空文件中输入 html:5，然后按 Tab 或 Ctrl+E（Windows/Linux）/ Cmd+E（macOS），立刻生成带 、<code>、 和 的结构。
- 如果没反应，先确认是否在
HTML语法模式下（右下角显示HTML，不是Plain Text） -
html:5是 Emmet 的约定缩写，不是 Sublime 原生命令，禁用 Emmet 后失效 - 想改默认语言行为？可编辑
Preferences → Package Settings → Emmet → Settings，调整"syntax_scopes"映射
如何配置自定义 HTML 代码段（snippet）
Emmet 覆盖常用结构，但项目特定模板（比如含 Vue 根节点、Tailwind 预设 class、或公司内部脚手架）得靠自定义 .sublime-snippet 文件。
路径必须放对：通过 Tools → Developer → New Snippet… 创建，保存为 xxx.sublime-snippet，默认位置即用户 snippet 目录（Windows：%APPDATA%\Sublime Text\Packages\User\；macOS：~/Library/Application Support/Sublime Text/Packages/User/）。
立即学习“前端免费学习笔记（深入）”；
- 文件名不影响触发，关键在
<tabtrigger></tabtrigger>内容（如设为myhtml，输入后按Tab即展开） - 必须指定
<scope></scope>，例如text.html.basic，否则在 HTML 文件里不会激活 -
<description></description>仅用于命令面板提示，不影响功能
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>${1:页面标题}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app">${2: }</div>
</body>
</html>
]]></content>
<tabTrigger>myhtml</tabTrigger>
<scope>text.html.basic</scope>
<description>Vue + 中文基础 HTML</description>
</snippet>
为什么写完 snippet 不生效？常见排查点
自定义 snippet 最常卡在作用域（scope）和文件类型匹配上，不是“没保存”就是“没认对语法”。
- 检查当前文件右下角是否显示
HTML—— 若显示Plain Text或Text，右键选择Set Syntax → HTML - 打开
Tools → Developer → Show Scope Name，光标放在行首，看输出的 scope 是否包含你 snippet 里写的<scope></scope>（例如text.html.basic） - Snippet 文件名不能含空格或特殊符号，且必须以
.sublime-snippet结尾（少一个字母都不行） - 修改 snippet 后无需重启 Sublime，但若之前已加载过，可尝试
Ctrl+Shift+P输入Reload Packages强制刷新
Emmet 缩写 vs 自定义 snippet：什么时候该用哪个
Emmet 解决通用、组合式结构（比如 ul>li*3 生成三个列表项），snippet 更适合固定、不可拆解的整块模板（比如含特定 meta、script、CDN 链接的管理后台首页）。
- 需要参数化占位（如 ${1}、${2}）且顺序固定 → 用 snippet
- 要动态生成重复结构（
div.item*5）、嵌套推导（section>header+h1+p）→ 用 Emmet - 想让团队统一用某套模板？把 snippet 文件放进项目目录 + README 说明，比教大家记缩写更可靠
- 注意：Emmet 在 Vue/Svelte 文件中默认不工作，需在
Emmet → Settings里补充"vue": ["text.html.vue"]等 scope 映射
真正卡住的往往不是“怎么配”，而是 scope 写错、语法没切对、或者以为输入完就该自动展开——它永远只响应 Tab，不是回车也不是空格。
