不装插件时，唯一可靠方式是通过系统默认浏览器以file://协议打开：先右键编辑器标签→Reveal in Explorer，再双击HTML文件；或终端执行start/open index.html。但file://协议下fetch、import、localStorage等均受限，仅适用于纯静态页面预览。
VSCode 里不装插件，怎么让 HTML 文件在浏览器里打开？
VSCode 本身不运行 HTML，它只负责编辑；所谓“直接运行”，本质是让系统或浏览器加载该文件。不装插件时，唯一可靠方式是用 file:// 协议打开——但必须清楚它能做什么、不能做什么。
常见错误现象：点了右键“Open in Default Browser”没反应、Chrome 打开后 JS 报 net::ERR_FILE_PROTOCOL、fetch 加载本地 JSON 失败、import 模块全报错。这不是你代码问题，是浏览器对 file:// 的硬性限制。
- 确保 HTML 文件已保存（
Ctrl+S），扩展名是.html，路径不含未转义的空格或中文（某些旧版系统会解析失败） - 右键编辑器标签页或内容区 → 选
Reveal in Explorer→ 在资源管理器中右键该文件 →Open with→ 选 Chrome / Edge / Firefox（不要依赖“Open in Default Browser”这类非官方右键项，它可能根本没注册） - 手动复制完整路径，粘贴到浏览器地址栏：格式必须是
file:///C:/your/path/index.html（注意是三个斜杠），Windows 路径中的反斜杠要自动转为正斜杠，macOS/Linux 是file:///Users/xxx/index.html - Mac 用户可在终端执行
open index.html，Windows 用户用start index.html（需在文件所在目录下运行）
为什么 file:// 下 fetch、import、localStorage 都失效？
因为现代浏览器把 file:// 视为不安全上下文：跨文件读取（比如 fetch('./data.json')）、ES 模块导入（import { x } from './utils.js'）、甚至部分 localStorage API 调用都会被拦截。这不是 Bug，是规范行为。
典型错误信息包括：Access to script at 'file:///xxx/utils.js' from origin 'null' has been blocked by CORS policy、Failed to load module script、SecurityError: localStorage is not available for opaque origins。
立即学习“前端免费学习笔记（深入）”；
- 只要页面地址栏开头是
file://，这些限制就生效，换任何浏览器都一样（Chrome、Edge、Firefox 全部强制） - Windows 上 Edge 默认禁用
file://下的 JS 执行（尤其组策略启用时），哪怕地址栏显示正常，控制台也可能静默空白 - 想临时绕过？加启动参数如
chrome.exe --user-data-dir="C:/temp" --unsafely-treat-insecure-origin-as-secure="file://"——但每次都要重开浏览器，且新版 Chrome 已逐步废弃该参数，不建议日常用
用 tasks.json 实现一键打开，但不依赖 Live Server
这是免插件下最接近“运行”的方案：VSCode 自动调用系统命令打开当前 HTML 文件，不改协议，但省去手动找文件步骤。
关键不是写复杂配置，而是让 command 真正指向可执行的浏览器或系统命令：
- Windows：在
.vscode/tasks.json中写"command": "cmd"，"args": ["/c", "start", "", "${file}"]（注意中间空字符串是start命令必需的窗口标题占位） - macOS：用
"command": "open"，"args": ["${file}"] - Linux：用
"command": "xdg-open"，"args": ["${file}"] - 想固定用 Chrome？路径填绝对路径，例如 Windows：
"command": "C:\Program Files\Google\Chrome\Application\chrome.exe"，参数加--new-window和"file://${file}" - 务必确认
${file}是完整路径，且文件已保存——未保存的临时文件没有磁盘路径，命令会失败
调试时 launch.json 怎么配才不连错 localhost？
很多教程抄来就用 url: "http://localhost:8080"，结果点调试就报 Unable to connect to localhost——因为你根本没起服务。真要用调试器，得切回 file 模式。
最小可用配置只改三处，删掉所有 url 和 webRoot 相关字段：
{
"version": "0.2.0",
"configurations": [
{
"name": "Open in Chrome",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/index.html",
"runtimeExecutable": "chrome"
}
]
}
-
file字段是核心，它告诉调试器直接加载本地文件，而不是尝试连接某个不存在的服务器 - 如果用 Edge，
type改成msedge，runtimeExecutable改成msedge（需装 Microsoft Edge DevTools 扩展） - 若提示
chrome不是内部或外部命令，请把 Chrome 安装路径加入系统PATH，或直接写绝对路径（如C:\Program Files\Google\Chrome\Application\chrome.exe） - 别在没装对应浏览器时留着配置，VSCode 会静默失败，连错误提示都不给
file:// 协议的固有限制。一旦涉及 fetch、模块、相对路径跳转或 Storage，就必须切到 HTTP 服务。Live Server 插件之所以成为事实标准，不是因为它多高级，而是它用一行点击就绕过了这一整套陷阱。 
