live preview 是最轻量稳妥的 html/css 实时预览方案，基于 vscode-file:// 协议在编辑器内渲染，无需本地服务器、不占端口、无跨域限制，支持 .html/.css/.md 文件保存即刷新，但不支持 js 动态请求与调试。
Live Preview 是当前最轻量、最稳妥的 HTML/CSS 实时预览方案，不需要本地服务器、不改端口、不弹浏览器窗口，适合静态页面快速验证。
Live Preview 为什么比 Live Server 更适合纯前端初学者
Live Server 启动后会占用 http://127.0.0.1:5500 这类端口，遇到端口被占、防火墙拦截或跨域请求（比如读取本地 JSON）时直接报 CORS error；而 Live Preview 完全走 vscode-file:// 协议，在编辑器内渲染，绕过所有网络层限制。
它对文件路径无要求：放在 D:/test/ 或嵌套在 src/pages/home/ 下都能直接点右上角眼睛图标预览，不用“必须在工作区根目录下右键 Open with Live Server”。
- 仅支持
.html、.css、.md三类文件，不支持 JS 动态 fetch 或 WebSocket - 修改后约 300ms 自动刷新，比手动 Ctrl+R 快，但比 Live Server 的热模块替换（HMR）慢
- 无法调试 Network 面板或 Console 日志——它不是浏览器，只是 VSCode 内置 WebView 渲染器
Live Preview 和内置 Markdown 预览的区别在哪
VSCode 原生的 Markdown 预览（Ctrl+Shift+V）只认 .md 文件，且默认关闭实时更新；Live Preview 插件把同一套渲染引擎扩展到了 .html 和 .css，并强制开启“保存即刷新”逻辑。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
关键差异点：
- 原生 Markdown 预览不解析
<style></style>或内联style=""，Live Preview 会完整执行 CSS 规则 - 原生预览中点击链接默认跳转失败（
file://协议限制），Live Preview 支持相对路径跳转（如<a href="about.html"></a>） - Live Preview 可拖入侧边栏固定为
Preview标签页，原生预览每次都是新面板
Live Preview 不生效的三个常见原因
插件装了、图标也显示了，但点开预览是白屏或报错？先检查这三点：
- 文件未保存：
Live Preview只响应已保存的文件，Untitled-1类临时标签页无效 - 文件编码非 UTF-8：含中文路径或 GBK 编码的 HTML，会导致 CSS 引入失败，控制台报
net::ERR_INVALID_RESPONSE - 用了不支持的语法：比如
<script type="module"></script>在vscode-file://下会被浏览器策略阻止，换成<script src="app.js"></script>并确保 JS 文件同目录且已保存
要不要同时装 Live Server 和 Live Preview
可以共存，但用途要分清：
- 用 Live Preview 快速看结构、调样式、验响应式布局（缩放/设备模拟可用）
- 用 Live Server 测试 AJAX、表单提交、路由跳转、服务端模板等需要真实 HTTP 环境的功能
- 两者快捷键不冲突：
Ctrl+Shift+P → Live Preview: Show PreviewvsRight-click → Open with Live Server
真正容易被忽略的是：Live Preview 的预览窗口一旦被拖进侧边栏，就变成常驻状态，切换文件也不会关闭——这个设计方便对比多个 HTML 版本，但也会导致内存缓慢增长，长时间工作后建议手动关闭闲置的 Preview 标签页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
