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。

# css  # macbook  # 端口  # 浏览器  # json  # 前端  # js  # html  # vscode  # java  # javascript  # 工具