Live Server是VSCode中用于自动监听HTML/CSS/JS文件变化并实时刷新浏览器的轻量级开发服务器插件；需通过扩展市场安装、右键HTML文件启动，支持自定义端口与根路径、命令面板快速调用及禁用自动浏览器打开功能。
如果您在VSCode中编写HTML、CSS或JavaScript文件，但每次修改后都需要手动刷新浏览器才能查看效果，则可能是缺乏一个自动监听文件变化并实时刷新页面的工具。Live Server正是为此设计的轻量级开发服务器插件。
本文运行环境：MacBook Air，macOS Sequoia。
一、安装Live Server插件
Live Server以VSCode扩展形式提供，需先通过扩展市场获取并启用，确保其与当前编辑器版本兼容且已激活。
1、打开VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入Live Server，找到作者为Ritwick Dey的官方插件。
3、点击“安装”按钮，安装完成后点击“重新加载”使插件生效。
二、启动Live Server服务
插件安装完毕后，可通过多种方式触发本地HTTP服务器，所有操作均基于当前打开的HTML文件路径启动服务。
1、在VSCode资源管理器中右键单击任意HTML文件。
2、在弹出菜单中选择Open with Live Server选项。
3、VSCode底部状态栏将显示正在运行的端口号（如5500），同时默认浏览器自动打开对应地址。
三、配置自定义端口与根路径
Live Server支持通过用户设置调整默认行为，例如更改监听端口或指定项目根目录，避免端口冲突或跨目录访问限制。
1、按下Cmd+,（macOS）打开设置界面，搜索live server settings。
2、点击“在settings.json中编辑”，在右侧用户设置JSON中添加如下字段：
"liveServer.settings.port": 3000,
"liveServer.settings.root": "./src"
四、使用命令面板快速启动
对于频繁切换文件的开发者，可通过VSCode内置命令面板调用Live Server，无需依赖右键菜单，提升操作效率。
1、按下Cmd+Shift+P（macOS）打开命令面板。
2、输入Live Server: Start并回车。
3、若当前未打开HTML文件，系统将提示选择目标文件；若已打开，则立即启动服务。
五、禁用自动浏览器打开功能
部分工作流中需手动控制浏览器行为，或仅需本地服务而不触发新标签页，此时可关闭Live Server的自动打开设置。
1、进入VSCode设置界面，搜索liveServer.settings.donotVerifyTags相关项。
2、找到liveServer.settings.AdvanceCustomBrowserCmdLine并设为null。
3、再定位到liveServer.settings.NoBrowser，将其值设为true。
