LiveReload 在 Sublime Text 中无法直接工作,必须依赖 livereload CLI(Node.js)监听文件、浏览器扩展接收通知并刷新,且三者端口、协议、文件类型等必须严格对齐。

LiveReload 在 Sublime Text 里根本不能“直接用”
Sublime Text 本身不支持 LiveReload 协议,所谓“安装插件就能刷新”是常见误解。它没有内置 WebSocket 客户端,也没法主动通知浏览器——所有真正起作用的刷新逻辑,都必须由外部服务或浏览器扩展承担。
-
livereloadCLI 工具(Node.js)才是实际监听文件、广播变更的源头 - Chrome / Edge 的官方
LiveReload扩展(靶心图标,开发者为 LiveReload.com)才是接收通知并执行location.reload()的终端 - Sublime 里的
LiveReload插件(如 dwieeb 版)在 ST4 上已静默失效;ST3 虽能装,但只是个“触发器”,依赖你手动启用、且不处理端口/协议校验 - 别碰
SublimeLinter-LiveReload——那是给代码检查用的,和页面刷新完全无关
必须走通的三段链路:CLI + 浏览器扩展 + HTTP 协议
只要其中一环断开,就会出现 WebSocket connection to 'ws://localhost:35729/livereload' failed 这类错误,或者保存后页面毫无反应。
- 先确保已装 Node.js,然后全局安装:
npm install -g livereload - 项目根目录运行:
livereload . --port 35729 --exts html,css,js,md(--exts漏掉css,改样式就不会刷新) - Chrome 扩展必须点图标 → Options → 把 port 改成和 CLI 一致(默认 35729)
- 网页必须用
http://localhost:8000/xxx.html这类地址打开,file://协议下扩展会被浏览器直接禁用,这是硬性安全限制,没法绕过 - 如果页面已打开再装扩展,需手动按
Ctrl+R重载一次,让注入脚本生效
Markdown 实时预览要额外绕一道弯
Markdown 不是 HTML,livereload CLI 默认不识别 .md 文件。想改完 Markdown 立刻看到渲染效果,得靠 Markdown Preview 插件生成临时 HTML,再通知浏览器刷新。
- 先通过 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或其他变体就无效 - 首次使用浏览器可能弹出“是否允许该扩展访问本地文件”,必须点“允许”,否则无法响应刷新请求
端口冲突、ST4 兼容性和自动保存陷阱
很多“配置好了却没反应”的问题,其实卡在最基础的环境细节上。
-
EADDRINUSE错误?说明 35729 被占了,换端口:livereload . --port 35730,同时更新浏览器扩展的 port 设置 - Sublime Text 4 用户别浪费时间搜插件——目前没有任何
LiveReload插件在 ST4 上稳定工作;老老实实用 CLI + 浏览器扩展是最省事的路径 - 别依赖 Sublime 的
save_on_focus_lost自动保存来触发刷新:它只在窗口失焦时存,而 LiveReload 需要明确的保存事件(Ctrl+S)才能捕获变更时间戳 - 如果用 Python 起服务(如
python -m http.server 8000),记得 CLI 和浏览器扩展的端口仍是独立的,不要混淆服务端口和 LiveReload 端口
真正卡住人的从来不是“怎么装”,而是哪一环没对齐:端口、协议、扩展权限、文件类型匹配、ST 版本兼容性……少一个,整个链路就哑火。











