推荐使用View in Browser插件实现Sublime Text中一键预览HTML文件,安装后默认F12即可在默认浏览器打开;可通过Package Settings自定义浏览器如chrome、firefox等,并通过Key Bindings设置快捷键如Ctrl+Alt+B;也可手动创建Build System,配置cmd命令调用指定浏览器打开HTML文件,适用于无插件环境。

Sublime Text 本身不自带“在浏览器中预览 HTML”的功能,但可以通过安装插件或手动配置快捷键来实现一键在浏览器中打开 HTML 文件。以下是具体配置方法。
安装 View in Browser 插件(推荐)
最简单的方式是使用社区开发的 View in Browser 插件,支持快速在默认浏览器中预览 HTML 文件。
步骤如下:- 确保已安装 Package Control(Sublime 的插件管理工具)
- 按下 Ctrl+Shift+P(Mac 上是 Cmd+Shift+P)打开命令面板
- 输入 Install Package 并选择回车
- 搜索 View In Browser,点击安装
安装完成后,默认快捷键为 F12,按下即可在系统默认浏览器中打开当前 HTML 文件。
自定义浏览器或快捷键
如果想更改默认浏览器或设置自己的快捷键,可以进行以下配置。
立即学习“前端免费学习笔记(深入)”;
设置默认浏览器:- 打开菜单栏:Preferences → Package Settings → View In Browser → Settings – User
- 添加如下内容,修改 browser 为你想要的浏览器(如 chrome、firefox、safari 等)
{
"browser": "chrome"
}
支持的常见浏览器名称:
自定义快捷键:
- 打开菜单:Preferences → Key Bindings
- 在右侧用户键位设置中添加一行:
{ "keys": ["ctrl+alt+b"], "command": "view_in_browser" }
保存后,按下你设定的快捷键(例如 Ctrl+Alt+B)即可预览。
手动创建 Build System(备用方案)
如果不使用插件,也可以通过 Sublime 的构建系统实现类似功能。
- 选择菜单:Tools → Build System → New Build System…
- 将内容替换为以下代码(适用于 Windows 打开 Chrome):
{
"cmd": ["start", "chrome", "$file"],
"shell": true,
"working_dir": "$file_path",
"selector": "text.html"
}
macOS 用户可使用:
{
"cmd": ["open", "-a", "Google Chrome", "$file"]
}
保存为 BrowserPreview.sublime-build,之后在 HTML 文件中选择该构建系统并按 Ctrl+B 即可打开。
基本上就这些。推荐使用 View in Browser 插件,配置简单,兼容性好,一键 F12 预览,提升开发效率。











