live preview 自动生效需同时满足三条件：安装微软官方插件、当前文件为已保存的 .html/.htm、语言模式设为 html；不启动 http 服务，故 js 模块、fetch、跨文件 css 等均不支持。
Live Preview 不是“配置出来”的，而是装对插件 + 满足三个硬性条件后自动生效的——不启动服务、不改端口、不依赖工作区结构。
为什么点“眼睛图标”没反应或预览空白
不是插件坏了，而是它根本没触发渲染逻辑。Live Preview（ms-vscode.live-preview）只在以下三者同时满足时才工作：
- 已安装并启用官方插件
ms-vscode.live-preview（注意作者是 Microsoft，不是ritwickdey.LiveServer） - 当前编辑器标签页是已保存的文件，且扩展名严格为
.html或.htm（.njk、.svelte、.vue等都不行） - 右下角状态栏语言模式显示为
HTML，不是Plain Text或JavaScript；若显示错误，点一下语言模式 → 选Configure File Association for '.html'→ 绑定到HTML
右键菜单里没有 Open with Live Preview
这通常是因为 VS Code 没识别出当前文件可被预览。不要依赖右下角状态栏按钮（它会灰掉），直接右键编辑器标签页或资源管理器中的文件：
- 确保文件已保存（标题栏不能带
*号） - 路径中不能含中文或空格（比如
D:\我的项目\index.html会导致静默失败） - 如果用了 WSL 或远程 SSH，Live Preview 在符号链接（symlink）目录下可能完全不监听变更，把项目移到普通路径下再试
- 重启 VS Code 后仍不出现？检查设置里是否误禁用了：打开
settings.json，确认没有"livePreview.settings.enablePreviewOnStart": false这类显式关闭项
预览出来了但 JS 不执行、CSS 引入 404、fetch 报错
这不是 bug，是 Live Preview 的设计限制：它走的是 vscode-file:// 协议，在 VS Code 内部 WebView 渲染，**不启动 HTTP 服务，也不模拟浏览器网络层**。
-
<script type="module"></script>会被直接忽略，控制台甚至不报错；换成<script src="app.js"></script>且确保app.js和 HTML 在同一目录、已保存 -
fetch('./data.json')必报net::ERR_FILE_NOT_FOUND或 CORS —— 它根本不支持跨文件读取，连本地XMLHttpRequest都被禁用 -
<link rel="stylesheet" href="../css/style.css">容易 404，因为相对路径解析基准不稳定；建议把所有资源放在同一级目录，或改用内联<style></style> - 无法打开 Network 面板、看不到 Console 日志、不支持
localStorage—— 它不是 Chrome，只是个轻量 DOM 渲染器
修改后页面不刷新，或刷新延迟明显
Live Preview 默认“保存即刷新”，但实际依赖文件系统事件通知，某些场景下会失效：
- 自动保存（
files.autoSave: "afterDelay"）可能延迟触发，导致你改完代码却没刷新；建议手动按Ctrl+S确认落盘 - 在 WSL、Docker Desktop 共享卷、OneDrive/Google Drive 同步目录下开发时，inotify 事件常丢失；此时只能关掉 Live Preview，换用 Live Server
- CSS 修改不生效？确认你改的是外部
<link>文件，Live Preview 目前不支持热更新<style></style>块内的样式 - 预览窗口卡住不动？关掉所有已打开的 Live Preview 标签页（包括后台隐藏的），再右键重开
真正容易被忽略的一点：Live Preview 和 Live Server 可以共存，但它们解决的问题完全不同。想调样式、看响应式布局、快速验证 HTML 结构？用 Live Preview。只要涉及 JS 交互、AJAX、路由跳转、模块导入，就必须切到 Live Server 启动真实 HTTP 环境——别指望一个插件包打天下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
