安装 Live Server 插件后，右键 html 文件选择 Open with Live Server 即可在浏览器预览，同时在 vscode 中实时编辑源码，修改保存后浏览器自动刷新，左侧文件栏和编辑器始终显示原始代码，便于开发。
在 VSCode 中运行 HTML 并同时查看源码，其实不需要复杂的配置。VSCode 本身是一个代码编辑器，并不直接运行网页，但你可以通过插件或浏览器配合来实现快速预览和源码查看。
1. 安装 Live Server 插件
这是最常用的方法，能让你在浏览器中实时预览 HTML 页面，同时保留源码编辑能力。
- 打开 VSCode，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X）
- 搜索 Live Server
- 找到由 Ritwick Dey 开发的 Live Server，点击安装
2. 使用 Live Server 运行 HTML
安装完成后，操作非常简单：
- 打开一个 HTML 文件（例如
index.html） - 右键点击编辑器中的代码区域，选择 Open with Live Server
- 浏览器会自动打开并显示页面内容，地址通常是
http://127.0.0.1:5500
此时你在 VSCode 中修改代码并保存，浏览器会自动刷新，实时看到效果。
立即学习“前端免费学习笔记（深入）”；
3. 同时查看源码的方法
你可以在编辑器中继续查看和编辑源码，无需切换工具。
- VSCode 左侧就是你的项目文件和源代码
- 浏览器中按 F12 可查看页面的 dom 结构（注意：这是渲染后的结构，不是原始源码）
- 原始 HTML 源码始终在 VSCode 中可见，可随时修改
4. 快捷操作建议
- 给常用 HTML 文件设置标签页常驻，方便快速切换
- 使用 Ctrl+S 保存后，浏览器自动更新
- 可在 VSCode 设置中开启自动保存：
File → auto Save
基本上就这些。Live Server 让你在写代码的同时，拥有类似本地服务器的预览环境，开发 HTML 更高效。源码始终在编辑器里，想看就看，不用导出或打包。