VSCode 中实现 HTML/CSS 实时预览需借助插件或工具：首选 Live Server 插件，保存即自动刷新；内置 Preview 仅静态查看、不自动刷新；进阶项目推荐 Vite 等支持 HMR 的构建工具。
在 VSCode 中实现 HTML/CSS 的实时编辑与预览，核心是让代码修改后自动刷新浏览器，无需手动保存+切换+刷新。这靠的是“热重载”（Hot Reload）或“实时预览”（Live Preview）机制，不是 VSCode 自带功能，需要借助插件或轻量服务。
用 Live Server 插件快速启动本地服务器
这是最常用、最稳定的方式。Live Server 启动一个本地 HTTP 服务器，并在文件保存时自动刷新浏览器标签页。
- 在 VSCode 扩展市场搜索并安装 Live Server（作者：Ritwick Dey）
- 打开任意 HTML 文件（如 index.html），右键选择 Open with Live Server，或点击右下角绿色「Go Live」按钮
- 浏览器会自动打开 http://127.0.0.1:5500/，此后每次保存 HTML/CSS/JS 文件，页面都会自动刷新
- 支持自定义端口、根路径、是否启用 HTTPS 等，通过 VSCode 设置中的 Live Server Config 调整
用内置的 Preview 功能（轻量无服务器）
VSCode 1.84+ 内置了 Preview 命令（无需插件），适合纯静态查看，不依赖服务器，但不支持 CSS 热更新或跨域资源（如 fetch 请求）。
- 打开 HTML 文件，按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac），输入 Preview，选择 HTML: Preview in Side Panel
- 预览窗格会显示渲染效果，保存 HTML 后可手动点刷新按钮，但 不会自动刷新
- 适合快速核对结构和基础样式，不适合开发调试
配合 CSS 预处理器或构建工具（进阶场景）
如果项目用了 Sass、Less 或 Vite、Parcel 等工具，建议用它们原生的 dev server，比 Live Server 更精准（例如只重载修改的 CSS 模块）。
立即学习“前端免费学习笔记（深入）”；
- Vite 项目：运行 npm run dev，访问 http://localhost:5173/，支持真正的 CSS 热模块替换（HMR）
- Sass 开发：配合 sass --watch 编译 + Live Server，或直接用 Vite 加载 .scss 文件
- 此时 VSCode 只负责编辑，实时性由构建工具保障，更贴近生产环境
基本上就这些。日常写小页面、做作业、练手项目，Live Server 足够好用；做中大型前端项目，建议直接上 Vite 或类似工具链。关键不是“有没有预览”，而是“改完能不能立刻看到效果”——选对方式，效率翻倍。
