Live Server 是 VSCode 中用于自动刷新 HTML/CSS/JS 文件修改的扩展。需安装 Ritwick Dey 官方版，支持右键启动、命令面板启动、端口与根目录自定义配置，并可通过状态栏按钮关闭服务。
如果您在 VSCode 中编写 HTML、CSS 或 JavaScript 文件，但每次修改后都需要手动刷新 浏览器 才能查看效果，则可能是缺少一个自动响应文件变化并实时刷新页面的工具。Live Server 正是为此设计的扩展，它能启动一个本地开发服务器，并在文件保存时自动刷新浏览器视图。
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Live Server 扩展
Live Server 并非 VSCode 内置功能，需通过扩展市场安装官方认证版本，确保兼容性与安全性。
1、打开 VSCode，点击左侧活动栏最下方的扩展图标（四个方块组成的图标）。
立即学习 “ 前端免费学习笔记（深入）”；
2、在扩展搜索框中输入 Live Server，找到作者为Ritwick Dey 的扩展（图标为闪电符号）。
3、点击“安装”按钮，等待状态变为“已安装”后，重启 VSCode 以完成初始化。
二、通过右键菜单启动服务器
该方法适用于任意 HTML 文件，无需配置，操作路径最短，适合快速验证单页效果。
1、在 VSCode 资源管理器中，右键点击目标 HTML 文件（如 index.html）。
2、在弹出菜单中选择 Open with Live Server 选项。
3、系统将自动在默认浏览器中打开 http://127.0.0.1:5500/ 路径，且页面内容随保存实时更新。
三、使用命令面板启动服务器
当项目包含多个 HTML 入口或需指定端口时，命令面板可提供更灵活的控制能力。
1、按下快捷键Cmd+Shift+P（macOS）或Ctrl+Shift+P（Windows/Linux）打开命令面板。
2、输入并选择 Live Server: Open with Live Server 命令。
3、若当前编辑器未打开 HTML 文件，VSCode 会提示选择目标文件；若已打开，则直接启动服务并跳转至浏览器。
四、配置自定义端口与根目录
默认端口 5500 可能被其他程序占用，或需将特定子目录设为 Web 根路径，此时需修改用户设置。
1、进入 VSCode 设置界面，点击左下角齿轮图标，选择“设置”。
2、在搜索框中输入liveServer.settings.port，双击该项，在输入框中填入未被占用的端口号（如8080）。
3、如需更改根目录，搜索liveServer.settings.root，设置相对路径（如./src），使服务器以该目录为 Web 访问起点。
五、关闭 Live Server 实例
Live Server 在后台持续运行，若不主动终止，可能占用端口并影响后续调试。
1、点击 VSCode 右下角状态栏中显示的 Go Live 按钮（通常为绿色闪电图标）。
2、按钮文字将变为Stop Live Server，点击即可关闭当前服务进程。
3、关闭后浏览器标签页不会自动关闭，但刷新将返回“无法连接到服务器”提示，表明服务已退出。
