Sublime Text 通过原生 html 片段(输入 html + Tab)或 Emmet 插件(输入 ! + Tab)可快速生成标准 HTML 模板;需确保文件为 .html 后缀且语法设为 HTML,否则片段不触发。

Sublime Text 本身不内置 HTML 模板生成功能,但通过 html 片段(snippets)和 Emmet 插件,可以秒级生成标准 HTML 结构——不用装额外插件也能用,但装了 Emmet 效率翻倍。
输入 html + Tab 就能生成基础模板
这是 Sublime 原生支持的片段,无需任何配置:
- 新建一个空文件,保存为
.html后缀(如index.html),确保语法识别为 HTML(右下角显示HTML) - 在文件开头输入
html,然后按Tab - 会自动展开为包含
、、和的完整结构
注意:如果输完 html 按 Tab 没反应,大概率是当前语法模式不是 HTML——点击右下角文字,选 HTML;或者文件没保存(.html 后缀影响语法识别)。
用 Emmet 写 ! + Tab 更快更灵活
Emmet 是前端标配插件,安装后支持类 CSS 选择器写法生成 HTML:
立即学习“前端免费学习笔记(深入)”;
- 安装方式:Ctrl+Shift+P → 输入
Package Control: Install Package→ 搜Emmet→ 回车 - 新建
.html文件,输入!,按Tab,立刻生成带charset="UTF-8"和viewport的现代 HTML5 模板 - 还能链式写:比如输入
html:5+ Tab 或!+tab效果一致;输入div#app>ul>li*3+ Tab 直接生成嵌套列表
Emmet 默认只在 HTML、CSS、JavaScript 等特定语法下生效,如果在纯文本里敲 ! 没反应,先确认语法模式是否正确。
自定义模板?改 html.sublime-snippet 文件
原生 html 片段位置在:Packages/HTML/html.sublime-snippet(可通过 Preferences → Browse Packages… 进入)
想默认加 jQuery、Bootstrap 或 meta 标签,直接编辑这个文件即可。例如把 加进 里——改完保存,下次输 html + Tab 就自带了。
注意:不要直接改 Packages/ 下的文件,它可能被插件更新覆盖;稳妥做法是复制该 snippet 到 Packages/User/ 目录并重命名(如 my-html.sublime-snippet),再绑定新前缀(如 myhtml)。
为什么有时快捷键失效?三个高频原因
不是快捷键坏了,而是环境没对齐:
-
Tab键被其他插件劫持(比如AutoFileName或SideBarEnhancements),临时禁用插件测试 - 文件未设置为
HTML语法,或扩展名不是.html/.htm,Sublime 不触发 HTML 片段 - 输入法处于中文状态——即使你打的是英文字母,某些输入法会拦截
Tab,切到英文再试
真正卡住的点往往不在“怎么配”,而在“当前是不是 HTML 上下文”。多看一眼右下角语法标识,比重装插件有用得多。











