sublime text 4 的 livereload 插件已彻底失效,无法实现自动刷新;必须使用 livereload cli + 浏览器扩展 + http 服务三端协同,且端口、协议(http://)、文件后缀须严格对齐。

Sublime Text 4 根本不能靠 LiveReload 插件实现自动刷新——装了也白装,它已彻底失效;真正能用的路径只有一条:livereload CLI + 浏览器扩展 + HTTP 服务,三者端口、协议、文件后缀必须全部对齐。
为什么 Sublime Text 4 的 LiveReload 插件完全不工作
ST4 上 LiveReload 插件(作者 dwieeb)处于静默失效状态:不注册命令、状态栏无图标、Ctrl+Shift+P 搜不到 LiveReload: Enable,连错误提示都不给。这不是配置问题,是插件本身没适配 ST4 的 API,官方早已停止维护。你看到的“启用成功”只是 UI 假象,背后根本没建立 WebSocket 连接。
ST3 用户仍可勉强使用,但要注意:LiveReload 插件本身不刷新页面,它只负责在保存时发个通知;真正在浏览器里执行 location.reload() 的,是 Chrome/Edge 的 LiveReload 扩展。
正确做法:用 livereload CLI 启动监听服务
先确认已安装 Node.js,然后全局安装 CLI 工具:
npm install -g livereload
进入你的项目根目录,运行:
livereload . --port 35729 --exts html,css,js,md
-
--port必须显式指定,且后续浏览器扩展要匹配同一端口 -
--exts必须列出你要监听的后缀,漏掉css,改样式就不会触发刷新 - 如果报
EADDRINUSE,换端口如--port 35730,同时更新浏览器扩展的 Options 页面 - 别加
--no-browser参数——它只影响是否自动开新标签页,和 Sublime 刷新无关
浏览器扩展必须手动配对且走 HTTP 协议
Chrome/Edge 必须安装官方 LiveReload 扩展(图标是黑白靶心,开发者为 LiveReload.com),然后右键图标 → Options → 把 Port 改成和 CLI 一致(默认 35729)。
关键限制:网页必须通过 http://localhost:8000/index.html 这类地址打开,file:// 路径下浏览器会直接禁用 WebSocket 连接——这是安全策略,没法绕过。
首次启用扩展后,已打开的页面需手动按 Ctrl+R 重载一次,否则注入脚本不生效;若弹出“是否允许访问本地文件”,必须点“允许”。
Markdown 实时预览要额外配置
livereload CLI 默认不监听 .md 文件,因为 Markdown 不是 HTML。想改完 .md 立刻看到渲染效果,得靠 Markdown Preview 插件生成临时 HTML,再通知刷新。
在 Sublime 的 Preferences → Package Settings → LiveReload → Settings – User 中填入:
{
"enabled_plugins": ["SimpleReloadPlugin"],
"SimpleReloadPlugin": {
"paths": ["*.md"],
"command": "markdown_preview",
"args": {"target": "browser", "parser": "markdown"}
}
}
-
"command"必须是markdown_preview(全小写+下划线),写成MarkdownPreview或其他变体都无效 - 确保
Markdown Preview插件已安装并能正常渲染
最常被忽略的是三端协同的细节:CLI 是否真在跑、扩展端口是否同步、页面是不是走 HTTP —— 少一个,就静默失败,连控制台报错都不会有。











