sublime3是一款轻量高效的代码编辑器，很多前端开发者会用它编写HTML文件，不过它本身没有默认的HTML运行预览功能，需要通过额外配置来实现代码运行查看效果。本文会介绍两种常用的方法，帮助大家快速在sublime3中运行HTML代码。
方法一：手动配置构建系统运行HTML
这种方法不需要安装额外插件，通过自定义构建系统调用系统默认浏览器打开HTML文件，适合不想安装过多插件的用户。
配置步骤
- 打开sublime3，点击顶部菜单栏的工具选项，选择构建系统，再点击新建构建系统
- 在打开的配置文件里删除原有内容，粘贴以下配置代码
- 按下Ctrl+S保存文件，命名为HTML运行.sublime-build，保存到默认弹出的目录即可
- 之后打开需要运行的HTML文件，按下Ctrl+B就能自动用默认浏览器打开该文件
以下是构建系统的配置代码，不同系统需要根据实际情况调整浏览器路径：
{
// Windows系统配置，浏览器路径替换为你的实际路径
"cmd": ["C:/Program Files/Google/Chrome/Application/chrome.exe", "$file"],
"selector": "text.html"
}
如果你的系统是macOS，配置代码可以替换为以下内容：
{
// macOS系统配置，调用默认浏览器打开
"cmd": ["open", "$file"],
"selector": "text.html"
}
配置完成后，打开任意HTML文件，按下Ctrl+B快捷键，就会自动弹出默认浏览器展示HTML页面的运行效果。
方法二：安装插件快速运行HTML
如果不想手动配置构建系统，也可以安装专门的预览插件，操作更简便，还支持实时刷新预览效果。
安装插件步骤
- 首先确保sublime3已经安装了
Package_Control插件，如果没有可以先安装该插件 - 按下Ctrl+Shift+P打开命令面板，输入install package并回车
- 在弹出的插件搜索框中输入View In Browser，找到对应插件后点击安装
- 安装完成后，右键点击打开的HTML文件，选择View In Browser，再选择要使用的浏览器即可运行
该插件还支持自定义快捷键，方便快速调用，你可以在首选项-键绑定中添加以下配置：
[
{
"keys": ["f5"],
"command": "view_in_browser"
}
]
配置完成后，按下F5就能直接运行当前打开的HTML文件，比手动配置构建系统操作更便捷。
两种方法的对比和注意事项
以下是两种方法的对比情况，你可以根据自己的需求选择：
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 手动配置构建系统 | 无需安装额外插件，占用资源少 | 需要手动调整浏览器路径，不支持实时刷新 | 插件安装受限、追求轻量配置的场景 |
| 安装View In Browser插件 | 操作简便，支持多浏览器选择，可自定义快捷键 | 需要安装插件，占用少量额外资源 | 日常开发、需要快速预览的场景 |
需要注意，运行的HTML文件必须保存到本地磁盘，临时未保存的文件无法被浏览器正确加载。如果运行后浏览器没有显示内容，可以检查HTML文件语法是否正确，或者构建系统的浏览器路径是否配置准确。
提示：如果修改了HTML文件内容，手动配置构建系统的方法需要重新按下Ctrl+B才能刷新预览，而部分预览插件支持实时监听文件变化自动刷新，开发时可以根据需求选择。