Live Preview仅支持已保存的.html/.htm文件,需安装ms-vscode.live-preview(作者Microsoft),右键标签页选“Open with Live Preview”最可靠,不自动刷新常见于未保存、软链接路径或安全软件拦截。

Live Preview 能在 VSCode 编辑器右侧直接开一个渲染视图,但前提是它认得你当前文件——只对已保存的 .html 或 .htm 文件生效,.njk、.svelte、.vue 这类模板文件不支持直出,别白费劲右键。
确认装的是 ms-vscode.live-preview,不是 ritwickdey.LiveServer
这两个名字太像,装错就全白搭。打开扩展面板搜 Live Preview,看作者是不是 Microsoft;如果看到的是 Live Server(作者 Ritwick Dey),那是另一个插件,功能类似但实现不同,不能替代。装完必须重启 VSCode,否则右上角眼睛图标不会出现。
右键“Open with Live Preview”比点状态栏按钮更可靠
状态栏的 Go Live 按钮经常灰掉或没反应,尤其在多标签、多工作区时。最稳的方式是:在编辑器标签页上右键 → 选 Open with Live Preview。这个操作不依赖状态栏服务是否已启动,会强制拉起预览窗口并绑定当前文件。
修改 HTML/CSS 后不自动刷新?先盯住这三件事
- 文件必须已保存——
files.autoSave设为afterDelay时,延迟期内改了代码但没落盘,预览不会动 - CSS 热更新只认
<link rel="stylesheet">引入的外部文件,<style>块内联样式改了不触发刷新 - 项目路径含软链接(比如 WSL 下挂载的 Windows 目录、macOS 的 alias)会导致文件监听失效,把项目挪到普通路径下再试
立即学习“前端免费学习笔记(深入)”;
net::ERR_CONNECTION_REFUSED 或预览空白,大概率是端口卡住了
Live Preview 启动失败后,旧浏览器窗口不会报错,只会僵在空白页。解决方法很简单:
- 关掉所有已打开的 Live Preview 浏览器窗口(包括后台隐藏的)
- 在命令面板运行 Live Preview: Stop Server
- 再右键 → Open with Live Preview
Windows 用户若反复失败,检查 McAfee 或 Windows Defender 是否拦截了 node.exe 子进程——临时关掉实时防护就能验证。
真正容易被忽略的是:Live Preview 不监听未保存的临时文件,也不处理编码异常(比如文件名含中文、保存时用了 GBK 编码),这些都会导致预览打不开或内容乱码,但错误提示几乎为零。



















