Sublime如何实时预览网页？Sublime配置LiveReload插件教程

Sublime Text的实时预览为什么这么难搞？很多人在折腾这个功能时都卡住了，其实核心逻辑非常简单。

先说说几个核心判断：Sublime Text 本身没有任何实时预览能力。LiveReload插件在里面演的，只是一个传令兵——它不干活，只是通知。真正让页面自动刷新的是三个角色： livereload CLI、浏览器扩展和 HTTP 服务。缺了任何一环，你保存文件后页面就会纹丝不动。

livereload CLI 必须手动启动并配对端口

很多人装了Sublime里的LiveReload插件（比如dwieeb或dwb95版）就觉得完事了。但现实是残酷的：这些插件在ST4上基本静默失效，ST3上虽然能跑，也仅仅是监听到保存动作后发个通知——它不监听文件变更、不建WebSocket通道、更不会主动推送刷新指令。真正干重活的，是一个叫livereload的命令行工具。

配置步骤其实不复杂：

• 先确认已装好Node.js，然后执行：npm install -g livereload
• 进入项目根目录运行：livereload . --port 35729 --exts html,css,js,md
• --exts 这个参数是个容易踩的坑——必须显式列出你需要响应的文件后缀。漏掉 css 的话，你改样式文件它也不会理你
• 如果报端口占用错误 EADDRINUSE，换个端口比如 --port 35730，同时浏览器扩展的Options页面里也得同步改

Chrome/Edge 的 LiveReload 扩展必须手动启用且配置一致

没有这个扩展，livereload发出的WebSocket通知就没人接收，页面当然不会自己动起来。网上同名插件不少，但只有图标是黑白靶心、开发者为 LiveReload.com 的那个才管用。

安装后需要做几件事：

• 点击右上角图标 → Options → 把 port 改成和CLI启动时一致（默认是35729）
• 右下角显示 LiveReload is connected 才算真正连上了
• 如果你用 file:// 协议打开页面，浏览器出于安全策略会直接禁用扩展——所以必须用 http://localhost:8000/index.html 这类地址。可以用 python3 -m http.server 8000 快速起个HTTP服务
• 页面打开后才装扩展的话，得按 Ctrl+R（Windows）或 Cmd+R（macOS）重载一次，让注入脚本生效

Markdown 实时预览要绕过默认逻辑

如果把路径换成Markdown文件呢？LiveReload默认是不处理 .md 文件的，因为Markdown本身不是HTML，它不能直接生成可刷新的页面。真实的链路是：Markdown Preview 先把Markdown渲染成临时 .html → LiveReload 感知到这个变化 → 触发浏览器刷新。

操作步骤：

• 通过 Package Control 安装 Markdown Preview（注意不是 MarkdownEditing）
• 打开 Preferences → Package Settings → LiveReload → Settings – User，填入以下配置：

{"enabled_plugins": ["SimpleReloadPlugin"], "SimpleReloadPlugin": {"paths": ["*.md"], "command":"markdown_preview", "args": {"target":"browser","parser":"markdown"}}}

⚠️ 这里的 "command" 必须是 markdown_preview（全小写加下划线），写成 MarkdownPreview 或其他变体就会失效；"target": "browser" 是核心参数，丢掉它输出就不会进到浏览器。

别碰 SublimeLinter-LiveReload 和 ST4 的 LiveReload 插件

最后提醒两个常见的误踩点：

• SublimeLinter-LiveReload 是给代码检查用的，跟页面刷新没有任何关系
• ST4用户在 Package Control 里搜到的 LiveReload 插件（作者 dwieeb）其实只支持ST3，在ST4上既不报错也不工作，属于静默失效的状况
• 如果你在用ST4，更推荐放弃插件方案，直接靠 livereload CLI + 浏览器扩展联动，这套组合更稳定、兼容性问题更少

整个配置过程中最容易被忽略的是协议和端口对齐——livereload启动时用的端口、浏览器扩展里设置的端口、网页访问用的协议（必须是 http:// 或 https://），三者缺一不可，且不能有毫秒级偏差。所有卡住不动的问题，十有八九都出在这里。