sublime执行html配置 sublime运行网页快捷键教程-sublime-PHP中文网

sublime执行html配置 sublime运行网页快捷键教程

爱谁谁

发布： 2025-06-25 17:14:01

原创

696人浏览过

要让sublime text直接运行html文件，需配置构建系统并使用插件实现。具体步骤如下：1. 安装package control：通过控制台粘贴代码安装，并重启sublime text；2. 安装view in browser插件：通过命令面板搜索并安装，之后可右键或用快捷键ctrl+shift+v（mac为cmd+shift+v）运行html；3. 自定义构建系统：新建构建配置文件，填写浏览器路径，保存后选择该构建系统，按下ctrl+b（mac为cmd+b）即可运行；4. 实现自动刷新：安装livereload插件及浏览器扩展，启用后保存文件即可自动刷新；5. 配置其他浏览器：修改构建配置文件中的浏览器路径为对应浏览器；6. 构建出错处理：检查路径是否正确、json语法是否规范、查看控制台输出以排查错误。

sublime执行html配置 sublime运行网页快捷键教程

让Sublime Text直接运行HTML文件，其实就是省去手动打开浏览器这一步，提高效率。核心在于配置Sublime的构建系统，让它调用浏览器来打开你的HTML文件。

配置Sublime Text直接运行HTML，并提供快捷键教程：

解决方案

安装Package Control (如果还没有)：

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

打开Sublime Text。
按下Ctrl + (或者 View > Show Console) 打开控制台。
粘贴以下代码到控制台并回车：

import urllib.request,os,hashlib; \
h = '6f4c264a24d733297e1133470e7a80bb'; \
pf = 'Package Control.sublime-package'; \
ipp = sublime.installed_packages_path(); \
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); \
by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); \
dh = hashlib.sha256(by).hexdigest(); \
print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

登录后复制

重启Sublime Text。

安装View in Browser插件：
- 按下 Ctrl + Shift + P (或者 Cmd + Shift + P on Mac) 打开命令面板。
- 输入 Install Package 并选择。
- 搜索 View in Browser 并安装。
- 安装后，你可以右键点击HTML文件，选择View in Browser，或者使用快捷键 Ctrl+Shift+V (Windows/Linux) 或 Cmd+Shift+V (Mac)。
自定义构建系统（如果想用Ctrl+B运行）：
- 打开Sublime Text。
- 选择 Tools > Build System > New Build System...。
- 粘贴以下代码到新的构建配置文件中：
```
{
    "cmd": ["C:/Program Files/Google/Chrome/Application/chrome.exe", "$file"], // 修改成你的Chrome浏览器路径
    "selector": "text.html"
}
```
登录后复制
- 将 "C:/Program Files/Google/Chrome/Application/chrome.exe" 替换成你电脑上Chrome浏览器的实际路径。如果你用的是其他浏览器，也要相应修改。
- 保存文件，命名为 HTML.sublime-build (Sublime会自动将文件保存在正确的目录下)。
- 选择 Tools > Build System > HTML。
现在，你可以按下 Ctrl + B (或者 Cmd + B on Mac) 来运行你的HTML文件了。

Sublime Text如何自动刷新浏览器？

Sublime Text本身不具备自动刷新浏览器的功能，需要借助插件来实现。LiveReload 是一个不错的选择。

安装LiveReload插件：
- 打开命令面板 (Ctrl + Shift + P 或 Cmd + Shift + P)。
- 输入 Install Package 并选择。
- 搜索 LiveReload 并安装。
安装浏览器插件：
- 在Chrome网上应用店搜索 LiveReload 并安装浏览器插件。
- 启用浏览器插件。
在Sublime Text中启用LiveReload：
- 打开要进行LiveReload的HTML文件。
- 按下 Ctrl + Shift + P (或 Cmd + Shift + P)。
- 输入 LiveReload: Enable/Disable Plugins 并选择。
- 确保选中 Enable - Simple Reloads。