VSCode本身不能直接运行HTML，因file://协议限制fetch、import等Web功能失效；Live Server是唯一可靠方案，通过启动本地HTTP服务（如http://127.0.0.1:5500）绕过限制，需以文件夹方式打开项目并右键HTML文件选择“Open with Live Server”。
VSCode 本身不能“直接运行”HTML，所谓“运行”其实是启动一个能正确加载资源的环境——file://协议下绝大多数 Web 功能（fetch、import、相对路径 JSON/CSS/JS）都会失败；你看到页面渲染出来，只是巧合，不是可靠行为。
Live Server 是唯一能真正预览 HTML/CSS/JS 的插件
它起一个真实的本地 HTTP 服务（如 http://127.0.0.1:5500），让浏览器按标准 Web 规则加载资源，绕过 file:// 协议限制。
- 必须通过“文件 → 打开文件夹”加载整个项目，单个
.html文件拖入编辑器不激活插件 - 右键
index.html→Open with Live Server最可靠；状态栏Go Live按钮有时不显示（尤其未聚焦 HTML 标签页时） - 改完代码按
Ctrl+S，页面自动整页刷新；默认监听.html、.htm、.xhtml，部分版本对.css和.js修改也触发刷新，但不可靠 - 端口被占？点状态栏右下角端口号 →
Change Port；想以./src为根？直接改settings.json："liveServer.settings.root": "./src"
Live Preview 只适合纯静态结构和 CSS 布局验证
它是微软官方插件（作者 ms-vscode.live-preview），在 VSCode 内置 WebView 中渲染，不启动 HTTP 服务，也不执行 JS 或加载外部资源。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 仅对已保存的
.html或.htm文件生效；文件名含中文或空格（如D:\我的项目\index.html）会导致静默失败 -
fetch('./data.json')必报net::ERR_FILE_NOT_FOUND；<script type="module"></script>直接失败；localStorage、WebSocket全不可用 - 启用方式：快捷键
Ctrl+Shift+V（Win/Linux）或点击编辑器右上角眼睛图标（前提是文件已保存、语言模式为 HTML） - 相对路径解析按物理位置，但不走 HTTP 协议，所以
../css/main.css在多层目录下容易 404
为什么“在浏览器中打开”总出错
VSCode 内置的 Open in Default Browser 或第三方“Open in Browser”插件，底层仍是 file:// 协议——它只做一次跳转，后续保存完全无响应，且浏览器会拦截以下操作：
立即学习“前端免费学习笔记（深入）”；
-
fetch('./config.json')→ 控制台报Not allowed to load local resource -
<script type="module" src="main.js"></script>→Failed to load module script -
<link rel="stylesheet" href="../style.css">→ 404（file://下路径解析规则与 HTTP 不同） - 即使样式显示出来，JS 交互、表单提交、动态渲染也基本不可用
真正卡住人的，往往不是“装哪个插件”，而是没分清场景：写好一个带 import 的 app.js？必须用 Live Server。只调个 margin 和 flex？Live Preview 更快、更轻、不弹浏览器。两者可共存，但别指望 Live Preview 能帮你看到 console.log 输出或 Network 请求。
