Live Server是唯一开箱即用的可靠实时预览方案，因其启动真实HTTP服务（默认http://localhost:5500），支持WebSocket自动刷新、跨域请求及现代Web API；而Open in Browser仅用file://协议导致AJAX被拦截，Live Preview不监听文件变化且不支持JS/CSS热重载。
Live Server 是目前最可靠、开箱即用的实时预览方案，其他插件要么功能残缺，要么需要额外配置才能生效。
为什么必须用 Live Server 而不是 Open in Browser 或 Live Preview
很多人试过右键选 Open in Browser，结果改完 CSS 保存后页面没刷新——因为它是直接用 file:// 协议打开文件，不启动 HTTP 服务，浏览器会拦截 AJAX 请求、禁止本地 fetch、报跨域错误。而 Live Preview（微软官方实验版）只支持纯静态 HTML 的内嵌预览，不监听文件变化，也不支持 JS/CSS 修改后的自动重载。
Live Server 的核心优势在于它真实启动了一个轻量 HTTP 服务（默认 http://localhost:5500），所有资源走 HTTP 协议，完全模拟线上环境。
- 修改
index.html、style.css或script.js后保存，浏览器自动刷新 - 支持 WebSocket 实时通信，延迟通常在 100ms 内
- 能正确加载
import模块、fetch('/api')等现代 Web API
Live Server 启动失败或不刷新的常见原因
状态栏没出现 Go Live，或者点了没反应，大概率是项目结构或权限问题：
- VSCode 必须打开的是**整个文件夹**（即工作区），不能只拖一个
.html文件进去——插件检测不到项目根目录，无法启动服务 - 如果提示
Port 5500 is already in use，说明端口被占，需在设置里改liveServer.settings.port，比如设为8080 - 某些杀毒软件或防火墙会拦截 Node.js 启动的本地服务，临时关闭可验证是否为此原因
- 保存时没触发刷新？检查是否禁用了自动保存：
Files: Auto Save设为onFocusChange或afterDelay才有效
如何让 Live Server 启动时默认打开指定 HTML 文件
默认它会找 index.html，但你的入口可能是 home.html 或 src/main.html。这时要配 liveServer.settings.file：
{
"liveServer.settings.file": "src/main.html",
"liveServer.settings.port": 3000,
"liveServer.settings.NoBrowser": false
}
这个配置必须写在工作区根目录的 .vscode/settings.json 里，而不是用户全局设置——否则对当前项目无效。
- 路径是相对于工作区根目录的，不是相对于
.vscode文件夹 -
NoBrowser设为true时，服务启动但不自动弹浏览器，适合配合调试器使用 - 如果项目有构建输出（如
dist/），建议把liveServer.settings.root指向dist，避免访问到源码目录
真正容易被忽略的是：Live Server 不处理构建产物的增量更新。比如你用 Vite 或 Webpack，它只监控你手动保存的文件，不会感知构建工具生成的 dist/index.html 变化——这种场景得换用对应框架的官方 dev server，而不是依赖 Live Server。
