Live Server是VS Code中实现HTML/CSS/JS实时预览的首选扩展，因其提供本地HTTP服务、自动刷新、开箱即用等特性，而VS Code内置功能仅支持一次性打开且不监听文件变化。
VS Code 本身不内置浏览器预览功能，所谓“实时预览”必须依赖扩展或外部工具协同；直接按 Ctrl+Shift+P 搜索 Live Server 并安装，是最快落地的方案。
为什么 Live Server 是首选而非内置 Preview 功能
VS Code 自带的 Open in Default Browser 只做一次性打开，不监听文件变化；而 Live Server 启动的是一个本地 HTTP 服务（默认 http://127.0.0.1:5500），自动注入 WebSocket 监听器，HTML/CSS/JS 修改保存后秒级刷新——这正是前端开发需要的“实时”。
- 它不依赖 Node.js 全局环境，开箱即用
- 支持自定义端口、根路径、是否自动打开浏览器等配置，通过右键菜单或命令面板触发
- 对多页面项目友好：在任意 HTML 文件上右键选
Open with Live Server，它会以该文件为入口启动服务 - 注意：它不会代理 API 请求，纯静态资源场景才开箱可用；若调用
/api/xxx，需额外配代理或改用webpack-dev-server
遇到 “Cannot GET /” 错误怎么办
这是 Live Server 找不到入口 HTML 文件的典型提示。它默认尝试访问项目根目录下的 index.html，但如果你当前工作区是子文件夹，或主文件叫 home.html，就会 404。
- 确保你是在包含 HTML 文件的文件夹里打开了 VS Code 工作区（不是只打开单个文件）
- 右键点击目标 HTML 文件 →
Open with Live Server，而不是点空白处或文件夹 - 检查设置：
liveServer.settings.root可设为相对路径如"src"，让服务从./src下启动 - 如果用了 Vue/React 脚手架，别用
Live Server——它们自带更完善的 dev server（如npm run serve）
想热重载 CSS/JS 而不刷新整个页面？
Live Server 默认整页刷新，适合快速原型；真要局部更新，得换工具链。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 修改可启用浏览器开发者工具的
Style Editor（Firefox）或Changes面板（Chrome），手动粘贴调试 - JS 热更新需模块化环境：用
Vite创建项目（npm create vite@latest），运行npm run dev，它基于原生 ES modules 实现 HMR - VS Code 插件
Auto Rename Tag、Prettier、ESLint这些虽不预览，但能减少保存后出错再刷新的次数
// 示例：用 Vite 启动一个最小 HTML 项目（无需构建配置） npm create vite@latest my-app -- --template vanilla cd my-app npm install npm run dev // 访问 http://127.0.0.1:5173，改 index.css 会局部更新，改 main.js 也会 HMR
真正卡住人的往往不是“怎么开预览”，而是没分清“静态资源预览”和“框架开发环境”的边界——前者用 Live Server，后者必须走对应框架的 dev server。混淆这两者，90% 的“刷新不生效”“路径 404”“API 报错”问题就都来了。
