Live Server是VS Code中实现HTML/CSS/JS实时预览的首选扩展，因其提供本地HTTP服务、自动刷新、开箱即用等特性，而VS Code内置功能仅支持一次性打开且不监听文件变化。
Live Server 是唯一值得装的 HTML/CSS/JS 实时预览插件，其他“一键打开浏览器”类插件（如 Open in Browser）不监听文件变化，改完必须手动刷新。
为什么必须用 Live Server 而不是右键“在浏览器中打开”
VS Code 自带的 Open in Default Browser 或插件 Open in Browser 本质只是执行 start file://... 协议——它只做一次跳转，后续保存 HTML/CSS/JS 文件完全无响应。而前端开发需要的是：保存即刷新。Live Server 启动的是一个真实本地 HTTP 服务（默认地址 http://127.0.0.1:5500），并在页面注入 WebSocket 监听器，所有改动触发秒级整页刷新。
常见错误现象：
- 改了
style.css但浏览器没变 → 没启用 Live Server，还在用静态文件协议 - 刷新后看到旧样式 → 浏览器缓存了 CSS，Live Server 的 HTTP 服务会自动加时间戳绕过缓存，而
file://不会 - JS 报错
Cross origin request blocked→ 直接双击 HTML 打开是file://协议，AJAX/fetch 被浏览器拦截；Live Server 是http://，无跨域限制
Live Server 安装与启动的三个可靠路径
别依赖右键菜单——它有时不显示，尤其在未聚焦 HTML 文件时。优先用以下三种方式之一：
立即学习“前端免费学习笔记（深入）”；
- 快捷键：
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Live Server: Start回车 - 状态栏点击：安装后，VS Code 底部状态栏会出现
Go Live按钮，点它即可（需当前已打开一个 HTML 文件） - 资源管理器右键：确保鼠标焦点落在某个
.html文件上，再右键选Open with Live Server
注意：如果点 Go Live 没反应，先检查是否打开了 HTML 文件；若仍无效，重启 VS Code 并确认插件已启用（设置里搜 liveServer 看开关是否为 on）。
端口冲突、根目录错位、不想自动弹浏览器？改 settings.json
Live Server 默认端口 5500 经常被占用，或你希望服务以 ./src 为根路径（比如 Vue 项目结构），就得手动配置。不要在 GUI 设置里点点点，直接编辑 settings.json：
{
"liveServer.settings.port": 3000,
"liveServer.settings.root": "./src",
"liveServer.settings.NoBrowser": true
}
说明：
-
"liveServer.settings.port"：改端口，避免和本地其他服务（如npm run serve）撞车 -
"liveServer.settings.root"：指定服务根目录，否则它会把整个工作区当根，./src/index.html里的./css/main.css就会 404 -
"liveServer.settings.NoBrowser"：设为true后不再自动打开新标签页，适合你已开着 DevTools 或用其它方式调试
什么时候不该用 Live Server
它只适合纯静态 HTML/CSS/JS 原生开发或快速原型。一旦项目用了框架脚手架，立刻停用：
- Vue 项目：运行
npm run serve（Vite 或 Vue CLI 提供的 dev server），它自带 HMR（热更新）、source map、ESM 支持，Live Server无法加载.vue或处理import语法 - React 项目：同理，用
npx create-react-app后的npm start，它跑在http://localhost:3000，有完整的模块解析和错误 overlay - 含 API 请求的页面：Live Server 是静态服务器，不代理后端请求；真要联调，得配
proxy或换用json-server+ 自定义脚本
容易被忽略的一点：Live Server 的刷新是整页刷新，不是 DOM 局部更新。如果你正调试一段 JS 动画或表单状态，每次保存都会重置上下文——这不是 bug，是设计使然。要保留状态，得上 Vite 或 Webpack dev server 的 HMR 能力。
