首选右键“Open with Live Server”插件，因其解决file://协议下AJAX、ESM模块等拦截问题；次选Open in Browser插件快速预览静态页；EmbeddedBrowser适合内嵌浏览外部网页；避免tasks.json自定义命令。
直接右键选“Open with Live Server”最稳
这是绝大多数前端开发者的首选，不是因为它最炫，而是它解决了本地 file:// 协议下 AJAX、ESM 模块、相对路径等被浏览器拦截的核心问题。纯双击打开 HTML 文件看似快，但一旦你写个 fetch('./data.json') 或引入 ./script.js，八成会看到控制台报 CORS error 或 net::ERR_FILE_NOT_FOUND。
实操建议：
- 安装官方
Live Server插件（作者：Ritwick Dey），别选名字相近的仿品 - 确保 HTML 文件已保存（
Ctrl+S），未保存的临时文件右键菜单里不显示该选项 - 右键后若没出现
Open with Live Server，检查是否在编辑器标签页中真正“聚焦”了该 HTML 文件（而非空标签或 settings.json） - 启动后地址栏是
http://127.0.0.1:5500/xxx.html，不是file:///—— 这才是关键区别
想免插件快速看效果？用 Open in Browser 插件配快捷键
适合静态页面初稿、纯展示型 HTML、或者临时查排版，不需要服务端逻辑或跨文件请求。它本质就是调用系统命令打开默认浏览器，快、轻、无依赖。
常见错误现象：
- 按
Alt+B没反应 → 插件没装，或快捷键被其他插件（比如 Vim 模式）劫持 - 点开是 IE 或 360 安全浏览器 → 没在插件设置里指定 Chrome/Edge，只改了系统默认浏览器不够
- 右键菜单里没有
Open in Default Browser→ 插件安装后需重启 VSCode 才完全激活
配置路径：Settings → Extensions → Open In Browser → Default Browser，选 chrome 或 edge，别选 system —— 这个值在 Windows 上常指向过时的旧引擎。
要在 VSCode 窗口里直接看网页？试试 EmbeddedBrowser
这不是预览你的 HTML，而是真正在编辑器里开一个带地址栏、前进后退、支持 HTTPS 的内嵌浏览器。适合边写代码边查 MDN、调试接口返回、比对设计稿源站。
为什么不用 Browser Preview 类插件？
- 那些插件靠 iframe 加载，遇到
X-Frame-Options: DENY（比如知乎、微信公众号页）直接白屏 -
EmbeddedBrowser用本地代理中转，绕过了 iframe 限制，能打开几乎所有公开网页 - 它不帮你跑本地 HTML —— 想预览自己的
index.html，仍得先用 Live Server 启服务，再在 EmbeddedBrowser 里输http://127.0.0.1:5500
命令是 Ctrl+Shift+P → Open Browser，第一次运行会自动拉起面板；关掉后下次还能从历史记录里找回上次的标签页。
别碰 tasks.json 自定义命令，除非你明确需要非标行为
网上很多教程教你在 .vscode/tasks.json 里写 start ${workspaceFolder}/index.html，这在 Windows 上可能生效，但在 macOS/Linux 下会失败（open 和 xdg-open 命令不同），且无法处理路径空格、中文名、多级子目录等问题。
更现实的问题：
- 任务执行后终端一闪而过，根本不知道成功没成功
- 浏览器可能复用旧标签页，导致你看到的是缓存页，不是最新修改
- 没有端口管理，多个项目同时运行容易端口冲突（虽然这个命令本身不占端口，但和 Live Server 混用时易误判）
如果你真要自动化，优先走插件 API 而不是 shell 命令 —— Live Server 和 Open in Browser 都提供了完整的命令注册，VSCode 调用更可靠。
最容易被忽略的一点：所有这些方式都依赖「当前活动文件」。如果你开了 10 个标签页，却在 CSS 文件上右键，那 Open with Live Server 启动的仍是那个 HTML——但浏览器里加载的可能是空页或 404。动手前，低头确认一下左上角标签页名是不是你要的 index.html。
