首先使用Live Server扩展实现HTML预览,安装后右键HTML文件选择Open with Live Server即可在浏览器中实时查看;其次可通过复制文件路径手动粘贴到浏览器地址栏加载页面;最后可配置tasks.json文件创建自定义任务,一键在指定浏览器(如Chrome)中打开HTML文件,提升预览效率。

如果您编写了HTML文件并希望在浏览器中查看其效果,Visual Studio Code本身不直接运行HTML,但可以通过多种方式快速预览页面。以下是实现HTML界面预览的具体步骤:
一、使用Live Server扩展
Live Server可以启动一个本地开发服务器,并支持实时刷新功能,适合前端开发调试。
1、打开VSCode,点击左侧活动栏的扩展图标(或按下Ctrl+Shift+X)进入扩展市场。
2、在搜索框中输入Live Server,找到由ritwickdey发布的"Live Server"扩展。
立即学习“前端免费学习笔记(深入)”;
3、点击“安装”按钮完成安装。
4、安装完成后,右键点击编辑器中的HTML文件,选择Open with Live Server。
5、默认浏览器将自动打开并显示该HTML页面,且代码修改后页面会自动刷新。
二、手动打开浏览器预览
此方法适用于无需本地服务器的静态页面预览,操作简单快捷。
1、在VSCode中打开需要预览的HTML文件。
2、右键编辑器中的文件内容,选择Copy path 或 Reveal in File Explorer 定位文件位置。
3、打开任意浏览器,在地址栏粘贴文件的完整路径,格式如:file:///C:/your-folder/your-page.html。
4、按回车即可加载并显示HTML页面内容。
三、配置默认浏览器自动打开
通过自定义任务或快捷方式,可实现一键在指定浏览器中打开HTML文件。
1、安装Node.js环境后,可通过命令行工具执行open命令(Windows使用start,macOS使用open)。
2、在VSCode中创建tasks.json文件:点击顶部菜单的Terminal > Configure Task > Create tasks.json file from template。
3、选择shell脚本模板,并设置命令为启动浏览器打开当前HTML文件,例如:
start chrome \"file://${workspaceFolder}/${relativeFile}\"(Windows)
4、保存配置后,可通过运行任务快速在Chrome中打开当前文件。










