LiveReload CLI 必须全局安装并运行,Sublime插件仅触发通知;浏览器扩展需启用且端口、协议(http://)、文件类型(含css)三者严格一致;Markdown预览依赖SimpleReloadPlugin调用markdown_preview命令。

LiveReload CLI 必须先跑起来,否则插件只是个摆设
Sublime Text 自身不提供 WebSocket 服务,LiveReload 插件(如 dwieeb 版)在 ST4 上已静默失效,ST3 上也仅是“保存时发通知”的监听器——它不建连接、不广播变更、不监听文件。真正干活的是 Node.js 实现的 livereload CLI 工具。
必须执行:
npm install -g livereload- 在项目根目录运行:
livereload . --port 35729 --exts html,css,js,md -
--exts必须显式包含css,否则改样式不会触发刷新 - 若提示
EADDRINUSE,换端口(如--port 35730),并同步更新浏览器扩展的 Options 设置
浏览器扩展只认 http://,file:// 协议下直接失效
Chrome / Edge 必须安装官方 LiveReload 扩展(图标是黑白靶心,开发者为 LiveReload.com),其他同名插件大多无效。安装后需手动点击地址栏旁图标,使其变为实心状态,并确认右下角显示 LiveReload is connected。
硬性限制:
- 页面必须通过
http://localhost:8000/xxx.html这类地址打开,file://协议下扩展会被浏览器直接禁用 - 若页面已在浏览器中打开后再装扩展,需手动按
Ctrl+R重载一次,让注入脚本生效 - 扩展设置里要勾选
Allow access to file URLs(仅对本地调试必要,但非充分条件)
SublimeServer 和 LiveReload 不是一回事,别混用
SublimeServer 是纯静态 HTTP 服务器,启动后把当前项目映射为 http://localhost:8080/,适合快速预览 HTML/CSS/JS,但它不监听文件变化,也不触发自动刷新。
而 LiveReload 的核心价值是「保存即刷新」:它依赖 CLI 建立 WebSocket,靠浏览器扩展注入脚本监听变更。两者目标不同:
- 需要静态服务 + 手动刷新 → 用
SublimeServer(右键 →View in SublimeServer) - 需要保存后秒级自动刷新 → 必须配
livereloadCLI + 浏览器扩展 - 想同时满足?开两个终端:一个跑
livereload,一个跑python -m http.server 8000或SublimeServer,但后者不参与热重载链路
Markdown 预览要绕过默认逻辑,靠 SimpleReloadPlugin
livereload CLI 默认不处理 .md 文件,因为 Markdown 不是可直接渲染的 HTML。真正起作用的是 Markdown Preview 插件把内容转成临时 HTML 后,再由 SimpleReloadPlugin 触发刷新。
配置路径:Preferences → Package Settings → LiveReload → Settings – User,填入:
{
"enabled_plugins": ["SimpleReloadPlugin"],
"SimpleReloadPlugin": {
"paths": ["*.md"],
"command": "markdown_preview",
"args": {
"target": "browser",
"parser": "markdown"
}
}
}
注意:"command" 必须是 markdown_preview(全小写 + 下划线),写成 MarkdownPreview 或 markdownPreview 都无效。
最容易被忽略的点:所有环节的协议、端口、文件扩展名、插件启用状态必须全部对齐。少一个,热重载就断在某一层——不是插件没装,而是链路里某个齿轮没咬合上。











