VSCode Live Server 是轻量高效插件，保存 HTML/CSS/JS 文件时自动刷新浏览器，支持右键启动、状态栏快捷操作、自定义端口与浏览器等配置，适合前端初学者和快速原型开发。

vscode live server 是一个轻量、高效的插件，能让你在保存 html 文件时自动刷新浏览器，省去手动刷新的麻烦，特别适合前端初学者和快速原型开发。

安装 Live Server 插件

打开 VSCode，点击左侧扩展图标（或按 Ctrl+Shift+X），在搜索框中输入 Live Server，找到由 Ritwick Dey 维护的官方版本（图标为“⚡”），点击“安装”。安装完成后无需重启，即可立即使用。

启动本地服务器

确保你已打开一个包含 HTML 文件的文件夹（即工作区）。右键点击任意 HTML 文件，在弹出菜单中选择 Open with Live Server；或者点击右下角状态栏中的 Go Live 按钮。VSCode 会自动在默认浏览器中打开该页面，并启动一个本地 HTTP 服务器（通常是 http://127.0.0.1:5500/your-file.html）。

实时预览与自动刷新

只要你在 VSCode 中编辑并保存 HTML、CSS 或 JavaScript 文件（保存快捷键 Ctrl+S），浏览器页面就会自动刷新，显示最新效果。注意：Live Server 默认只监听当前工作区根目录下的文件变更；如果项目结构较深，建议把 HTML 文件放在项目根目录，或通过插件设置调整根路径。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

常用配置与小技巧

• 右键 HTML 文件时，还可选择 Copy Live Server URL 快速分享本地地址（仅限本机访问）
• 在 VSCode 设置中搜索 live server，可自定义端口号、默认浏览器、是否自动打开等选项
• 支持 HTTPS（需手动配置证书）、多端口、以及基础代理转发（适合简单 API 调试）
• 不支持热模块替换（HMR），如需更高级功能（如 React/Vue 的组件级更新），建议搭配对应框架的 CLI 工具

基本上就这些。Live Server 不复杂但容易忽略细节，用对了能显著提升写 HTML/CSS/JS 的流畅感。