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

LiveReload CLI 必须启动,Sublime 插件只是个触发器
Sublime Text 本身不支持 LiveReload 协议,LiveReload 插件(如 dwieeb 版)在 ST4 上已静默失效,ST3 上也仅是个“保存时发通知”的监听器——它不监听文件、不建 WebSocket 服务、也不广播变更。真正干活的是 livereload CLI 工具(Node.js 实现)。没它,整个链路就断了。
必须执行:
npm install -g livereload
然后在项目根目录运行:
livereload . --port 35729 --exts html,css,js,md
-
--exts必须显式包含css,否则改样式不会触发刷新 -
--port默认是35729,浏览器扩展和 CLI 必须严格一致 - 若提示
EADDRINUSE,换端口(如--port 35730),并同步更新浏览器扩展的Options设置
浏览器扩展必须启用,且只认 http:// 协议
Chrome / Edge 必须安装官方 LiveReload 扩展(图标是黑白靶心,开发者为 LiveReload.com),其他同名插件大多无效。安装后需手动点击图标,使其变为实心状态,并确认右下角显示 LiveReload is connected。
硬性限制:
- 页面必须通过
http://localhost:8000/xxx.html这类地址打开,file://协议下扩展会被浏览器直接禁用,无法绕过 - 若页面已在浏览器中打开后再装扩展,需手动按
Ctrl+R重载一次,让注入脚本生效 - 扩展设置里要勾选
Allow access to file URLs(仅对本地调试必要,但非充分条件)
Markdown 实时预览需绕过默认逻辑,靠 SimpleReloadPlugin 调用 markdown_preview
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都无效 - 确保已安装
Markdown Preview(不是MarkdownEditing),且未启用已弃用的Markdown Live Preview - 如果
markdown_preview命令不存在,说明插件未正确加载或命令名被覆盖
端口、协议、文件类型三者必须对齐,漏一不可
常见失败现象:保存后浏览器毫无反应,控制台报错 WebSocket connection to 'ws://localhost:35729/livereload' failed。这不是 Sublime 的问题,而是三段链路中某环断裂:
-
livereloadCLI 启动时指定的--port和浏览器扩展设置的端口不一致 -
--exts漏掉css,导致样式修改不触发刷新 - 网页用
file://打开,扩展拒绝注入脚本 - Sublime 中未启用
SimpleReloadPlugin,或配置 JSON 语法错误(如末尾多逗号)
最易被忽略的点:CLI 和浏览器扩展的端口必须完全一致,且 SimpleReloadPlugin 的 "command" 字符串必须一字不差地匹配 Sublime 命令系统注册的实际名称——它不接受驼峰、大小写混用或拼写变体。











