VSCode 中 Live Preview 失效的解决方法包括：一、检查并重装 Live Server 扩展；二、通过命令面板手动启动服务；三、修改 settings.json 更换默认端口；四、验证 HTML 文件结构合法性。
如果您在 vscode 中编辑 html 文件，但点击“live preview”按钮后页面未正常显示或预览窗口无响应，则可能是由于扩展未启用、端口 冲突或工作区配置异常。以下是解决此问题的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、检查并重新安装 Live Server 扩展
Live Preview 功能通常由“Live Server”扩展提供，若该扩展损坏或版本不兼容，会导致预览失效。需确认其已正确安装并启用。
1、点击左侧活动栏的扩展图标（方块拼图形状）。
2、在搜索框中输入 Live Server，确认结果中显示作者为Ritwick Dey 的官方扩展。
3、若已安装，先点击 禁用 ，再点击 启用 ；若未安装，点击 安装 并重启 VSCode。
二、手动启动 Live Server 服务
部分项目因根目录缺失 index.html 或未识别为 Web 工作区，导致右键菜单中不显示“Open with Live Server”选项。此时需通过命令面板触发服务。
1、按下Cmd + Shift + P（Mac）或Ctrl + Shift + P（Windows/Linux）打开命令面板。
2、输入Live Server: Open with Live Server，回车执行。
3、观察右下角状态栏是否出现 Go Live 提示及端口号（如http://127.0.0.1:5500）。
三、更换默认端口避免冲突
当本地 5500 端口被其他程序占用时，Live Server 无法绑定监听，将静默失败。可通过配置指定备用端口。
1、按下 Cmd + , 打开设置界面。
2、在搜索框中输入liveServer.settings.port。
3、点击Edit in settings.json，在文件中添加如下行（若已有该字段则修改值）：“liveServer.settings.port”: 5501。
4、保存文件后重新执行 Open with Live Server。
四、验证 HTML 文件结构有效性
Live Server 仅对合法 HTML 文档生效，若当前打开的文件无 DOCTYPE 声明、缺少 html 根标签或扩展名非。html，预览将无法加载。
1、确认当前编辑的文件扩展名为.html，且文件名不含空格或特殊符号。
2、在文件顶部添加标准声明：。
3、确保存在完整的 结构，哪怕内容为空。
