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、关闭后浏览器标签页不会自动关闭，但刷新将返回“无法连接到服务器”提示，表明服务已退出。
