VSCode不内置HTML运行能力，需插件或命令行调用浏览器打开file://地址；右键无“Open in Browser”因默认不提供，须装Open in Browser等扩展；file://方式会触发跨域限制，fetch、模块导入均失败，应改用Live Server等本地HTTP服务。
VSCode 本身不内置 HTML 运行能力，所谓“直接运行”其实是让系统或插件调用浏览器打开 file:// 协议地址——这能跳过服务器，但会触发浏览器的跨域限制、禁用 fetch() 本地 JSON、无法加载相对路径的模块脚本等。
为什么右键没有“Open in Browser”选项？
VSCode 默认不提供该功能，必须安装扩展才能补全右键菜单。最轻量的是 Open in Browser（作者 Tekkaman Ninja），不是 Live Server。
- Live Server 的
Open with Live Server启动的是http://127.0.0.1:5500/xxx.html，走本地 HTTP 服务，无跨域问题，但多一层服务依赖 -
Open in Browser插件才真正实现“双击式”快捷：右键 →Open in Default Browser，底层执行的是start file:///C:/path/to/index.html（Windows）或open file:///Users/xxx/index.html（macOS） - 如果装了多个浏览器相关插件，右键菜单可能混乱，建议卸载非必需的（如旧版 Code Runner 的 HTML 配置），只留一个主控插件
不装插件，命令行也能“直接打开”
你完全可以用终端手动触发浏览器打开本地 HTML 文件，绕过所有插件兼容性问题。关键是用对协议和路径格式：
- Windows：在 VSCode 集成终端中运行
start "" "file://$(pwd)/index.html"（注意双引号包裹，防止空格路径出错） - macOS：运行
open "file://$(pwd)/index.html" - Linux：运行
xdg-open "file://$(pwd)/index.html" - ⚠️ 错误示范：
chrome ./index.html或firefox index.html—— 这会让浏览器尝试读取文件系统路径，多数新版浏览器已禁用该行为，会报ERR_UNSAFE_REDIRECT或空白页
用 tasks.json 实现一键打开（适合固定项目）
如果你常在同一个项目里反复预览，比插件更稳定的方式是配一个自定义任务，明确指定浏览器和路径。编辑 .vscode/tasks.json：
立即学习“前端免费学习笔记（深入）”；
{
"version": "2.0.0",
"tasks": [
{
"label": "open-in-chrome",
"type": "shell",
"command": "C:\Program Files\Google\Chrome\Application\chrome.exe",
"args": ["--new-window", "file://${workspaceFolder}/index.html"],
"windows": {
"command": "cmd.exe",
"args": ["/c", "start", "", ""file://${workspaceFolder}/index.html""]
}
}
]
}
-
${workspaceFolder}是当前打开文件夹路径，必须存在index.html才能生效；若用其他文件名，把index.html换掉 - Windows 下推荐用
cmd.exe /c start写法，兼容性远高于直调 Chrome 可执行文件（尤其当 Chrome 安装在非默认路径时） - 保存后按
Ctrl+Shift+P→ 输入Tasks: Run Task→ 选open-in-chrome，就能秒开
真正容易被忽略的点是：用 file:// 打开时，XMLHttpRequest、fetch('./data.json')、import('./module.js') 全部失败，控制台报 CORS 错误——这不是你代码写错了，是浏览器策略。需要这些功能，就必须用 Live Server 或其他本地服务，别硬扛。
