Live Server是VSCode中用于HTML/CSS/JS开发的自动刷新本地服务器扩展。需通过扩展市场安装Ritwick Dey开发的官方插件，支持右键启动、命令面板调用、端口与根路径自定义配置，并可通过状态栏快速停止服务。
如果您在VSCode中编写HTML、CSS或JavaScript文件，但每次修改后都需要手动刷新浏览器才能查看效果，则可能是由于缺少一个自动监听文件变化并实时刷新页面的服务。Live Server扩展正是为此设计的轻量级本地开发服务器。
本文运行环境：MacBook Air，macOS Sequoia。
一、安装Live Server扩展
Live Server并非VSCode内置功能，需通过扩展市场安装官方认可的插件，该插件由Ritwick Dey开发，支持HTTP服务启动与自动刷新机制。
1、打开VSCode，点击左侧活动栏中的扩展图标（或按快捷键Ctrl+Shift+X）。
2、在扩展搜索框中输入Live Server。
3、在搜索结果中找到作者为Ritwick Dey的扩展，点击“安装”按钮。
4、安装完成后，无需重启VSCode，扩展即刻生效。
二、启动Live Server服务
扩展安装完毕后，可通过多种方式触发本地服务器，所有方式均会自动在默认浏览器中打开对应HTML文件，并建立文件监听连接。
1、在VSCode资源管理器中右键单击任意HTML文件。
2、在弹出菜单中选择Open with Live Server选项。
3、浏览器将自动打开新标签页，地址形如http://127.0.0.1:5500/index.html，端口号可能因冲突而变动。
三、使用命令面板启动
当鼠标未聚焦于HTML文件或需快速调用时，可借助VSCode内置命令面板唤起Live Server功能，适用于当前工作区任意位置。
1、按下快捷键Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板。
2、输入Live Server: Start并回车。
3、若当前编辑器中已打开HTML文件，则直接启动；否则系统将提示选择目标文件。
四、配置自定义端口与根路径
Live Server默认使用5500端口并在当前工作区根目录启动服务，但可通过用户设置或工作区设置覆盖默认行为，避免端口占用或限定服务范围。
1、按下Ctrl+,（Windows/Linux）或Cmd+,（macOS）打开设置界面。
2、在搜索框中输入liveServer.settings.port。
3、点击“在settings.json中编辑”，添加如下行："liveServer.settings.port": 8080。
4、同理，设置liveServer.settings.root可指定服务起始路径，例如设为"./src"。
五、停止Live Server服务
Live Server运行时会在VSCode右下角状态栏显示服务器信息，点击该区域可快速终止进程，释放端口并关闭浏览器自动刷新监听。
1、观察VSCode窗口右下角，找到标有Go Live或端口号（如5500）的按钮。
2、点击该按钮，在弹出菜单中选择Stop Live Server。
3、状态栏图标消失，终端中相关进程退出，浏览器标签页不再响应文件变更。
