vscode 默认不支持右键“在浏览器中打开html”，因该功能未内置且受file://协议限制；live server扩展通过启动本地http服务器（如http://127.0.0.1:5500）解决跨域、fetch失败等问题，并支持热重载。
VSCode 本身不提供“在浏览器中运行 HTML”的原生功能，必须通过扩展或手动调用系统命令实现；直接双击文件或右键“打开方式”虽能看效果，但绕过了编辑器集成，无法响应保存自动刷新，也不支持 fetch、localStorage 等受限于 file:// 协议的功能。
为什么不能直接右键“Open with Browser”？
VSCode 资源管理器（左侧文件列表）里右键 HTML 文件，**默认没有** Open In Default Browser 或类似选项——这不是你操作错了，而是因为该功能未内置，且不同扩展提供的菜单项位置不同：
- 有些扩展（如
View In Browser）只在资源管理器中右键生效 -
Live Server的Open with Live Server只在编辑器标签页或代码区右键才出现，资源管理器右键无效 - 部分旧版教程提到的
Open In Default Browser是某些已下架或低活跃度插件提供的，当前市场主流不再依赖它
Live Server 是最可靠的选择
它不是简单“打开浏览器”，而是启动一个本地 HTTP 服务器（http://127.0.0.1:5500/），彻底规避 file:// 协议限制，同时支持热重载。安装后只需两步：
- 在 VSCode 扩展市场搜索
Live Server，认准作者Ritwick Dey，点击安装 - 打开任意
.html文件 → 在编辑器内右键 → 选择Open with Live Server（注意：不是在资源管理器里右键）
首次运行后，状态栏右下角会出现绿色 Go Live 按钮，之后可一键启停服务。端口冲突时会自动递增（如 :5501），无需手动改配置。
想指定浏览器或跳过服务器？用 tasks.json 更可控
如果你明确只需要用 Chrome 打开 index.html（比如做静态演示），又不想起服务，可以配置自定义任务。在项目根目录创建 .vscode/tasks.json，内容如下：
{
"version": "2.0.0",
"tasks": [
{
"label": "open-in-chrome",
"type": "shell",
"command": "start chrome.exe "${workspaceFolder}/index.html"",
"windows": {
"command": "start chrome.exe "${workspaceFolder}/index.html""
},
"osx": {
"command": "open -a "Google Chrome" "${workspaceFolder}/index.html""
},
"linux": {
"command": "xdg-open "${workspaceFolder}/index.html""
}
}
]
}
之后按 Ctrl+Shift+P → 输入 Tasks: Run Task → 选 open-in-chrome 即可。注意：chrome.exe 路径需确保在系统 PATH 中，否则要写绝对路径（如 "C:\Program Files\Google\Chrome\Application\chrome.exe"）。
真正容易被忽略的是协议差异：file:// 下 XMLHttpRequest 会跨域失败，fetch 读取本地 JSON 会报 net::ERR_FILE_NOT_FOUND；而 Live Server 启动的是真实 HTTP 环境，这些都正常。别为了省一步安装，卡在奇怪的报错里反复查文档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
