sublime如何一键在浏览器中预览HTML_sublime View in Browser功能配置

推荐使用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"
}

• chrome（Google Chrome）
• firefox（Mozilla Firefox）
• safari（仅 macOS）
• edge（Microsoft Edge）

• 打开菜单：Preferences → Key Bindings
• 在右侧用户键位设置中添加一行：

{ "keys": ["ctrl+alt+b"], "command": "view_in_browser" }

保存后，按下你设定的快捷键（例如 Ctrl+Alt+B）即可预览。

千帆AppBuilder

百度推出的一站式的AI原生应用开发资源和工具平台，致力于实现人人都能开发自己的AI原生应用。

174

查看详情

手动创建 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 预览，提升开发效率。

以上就是sublime如何一键在浏览器中预览HTML_sublime View in Browser功能配置的详细内容，更多请关注php中文网其它相关文章！