安装 Live Server 插件后右键 HTML 文件选择 Open with Live Server 可启动本地服务器并自动在浏览器中预览;2. 直接在文件资源管理器中右键 HTML 文件用浏览器打开可快速查看静态页面;3. 安装 Live Server 后点击 VSCode 底部状态栏的 Go Live 按钮实现一键启动服务并支持实时刷新;4. 通过配置 tasks.json 自定义任务运行命令调用默认浏览器打开 HTML 文件。

如果您在使用 VSCode 编写 HTML 文件,但无法查看页面效果,可能是因为没有正确启动网页预览。以下是几种在 VSCode 中运行 HTML 网页的方法:
一、使用 Live Server 插件
Live Server 插件可以启动一个本地开发服务器,并支持实时刷新功能,修改代码后 浏览器 会自动更新显示。
1、打开 VSCode,点击左侧扩展图标(或按下 Ctrl+Shift+X)进入扩展市场。
2、搜索 Live Server 并安装由 Ritwick Dey 开发的官方版本。
立即学习 “ 前端免费学习笔记(深入)”;
3、安装完成后,右键点击编辑器中的 HTML 文件。
4、选择 Open with Live Server,系统将默认浏览器中打开该网页。
二、直接在浏览器中打开 HTML 文件
此方法无需任何插件,适合快速查看静态页面内容,但不支持本地服务器功能(如 AJAX 请求等)。
1、在 VSCode 中保存当前 HTML 文件,确保文件扩展名为 .html。
2、前往文件所在目录,找到该 HTML 文件。
3、右键点击文件,选择“打开方式”,然后选择已安装的浏览器(如 Chrome、Edge 等)。
4、浏览器将加载并显示该网页内容。
三、使用 VSCode 内置的 Go Live 功能
该功能是 Live Server 插件的核心特性之一,通过一键操作即可启动本地服务器。
1、确保已安装 Live Server 插件。
2、在 VSCode 底部状态栏中找到 Go Live 按钮。
3、点击该按钮,VSCode 会自动启动本地服务器并在浏览器中打开当前 HTML 文件。
4、此时对代码进行修改并保存,浏览器页面将自动刷新以反映更改。
四、配置任务运行器调用浏览器
通过自定义任务,可以在 VSCode 中直接运行命令来打开默认浏览器预览 HTML 文件。
1、在 VSCode 中按下 Ctrl+Shift+ P 打开命令面板。
2、输入并选择 Tasks: Configure Task,然后选择 Create tasks.json file from template 中的 Others 选项。
3、在生成的 tasks.json 文件中添加执行命令,例如在 Windows 系统中可设置为:”cmd.exe /c start ${workspaceFolder}/index.html”。
4、保存文件后,按下 Ctrl+Shift+ P 并运行该任务,即可在默认浏览器中打开指定 HTML 文件。
以上就是