Live Server插件是VSCode运行HTML的首选方案，因其启动http://127.0.0.1:5500本地服务器，彻底规避file://协议对fetch、ES模块、相对路径等的限制；必须安装Ritwick Dey原版插件、通过“文件→打开文件夹”建立工作区、右键已保存的.html文件启动。
VSCode 本身不能“一键运行 HTML”，所谓一键，本质是启动本地 HTTP 服务或调用浏览器打开文件；最简便且真正可用的方式是 Live Server 插件，它解决的是 file:// 协议下 JS 功能失效这个核心问题。
为什么不能直接双击或右键“打开”就完事？
Chrome、Firefox 等现代浏览器对 file:// 协议做了严格限制：
-
fetch()、XMLHttpRequest会直接报net::ERR_FAILED -
importES 模块（如import { foo } from './utils.js'）加载失败 - 相对路径资源（
./script.js、../img/logo.png）在某些嵌套结构下 404 - 无法设置响应头，调试
CORS、Content-Type时完全无从下手
这些不是 VSCode 的锅，而是浏览器安全策略。你点开的不是“网页”，是本地文件系统的一次读取操作。
Live Server 插件怎么装、怎么用、怎么避坑？
安装后，它起的是 http://127.0.0.1:5500/ 这类真实 HTTP 服务，绕过全部限制。
立即学习“前端免费学习笔记（深入）”；
- 在扩展市场搜
Live Server，认准作者是Ritwick Dey（别装错名字相似的） - 必须先保存文件——如果标签页标题栏有
*（表示未保存），点Go Live会先自动保存再启动 - 右键位置要对：是在编辑器**代码区空白处**或**HTML 标签页上**右键，选
Open with Live Server；不是在左侧资源管理器里右键文件 - 端口被占？改设置：
liveServer.settings.port→ 填8080或其他空闲数字 - 中文路径或空格一般没问题，但极旧版本（v5.x 之前）可能卡住，遇到就重命名为
index.html再试
不想装插件？命令行方式也够快，但得记清平台差异
适合临时验证、CI 脚本或纯静态页面预览，不依赖 GUI。
- Windows：终端进项目目录，运行
start index.html（只是打开，仍走file://） - macOS：运行
open index.html - Linux：运行
xdg-open index.html - 真·服务器替代（推荐）：已装 Python？运行
python -m http.server 8000，然后访问http://localhost:8000/index.html
注意：python3 -m http.server 才是多数 Linux 发行版的正确命令；端口冲突时加 -b 127.0.0.1:8080 显式绑定。
tasks.json 配置任务适合谁？
它本质是把上面命令行封装进 VSCode 内部，适合习惯键盘流、想统一快捷键的人，但复杂度明显上升：
- 需要手动创建
.vscode/tasks.json，填 shell 类型、command、args，还要区分 Windows/macOS/Linux 路径写法 - 比如 Windows 下想用 Chrome 打开当前文件，
args得写成["--new-window", "file://${file}"]，但依然逃不开file://限制 - 若你真需要热重载 + 自定义浏览器 + HTTPS，不如直接用 Live Server 的配置项，它原生支持
liveServer.settings.CustomBrowser和https开关
真正容易被忽略的，是你写的 HTML 是否悄悄依赖了服务端上下文——比如用了 fetch('/api/user') 却没配代理，或者 <script type="module"> 引入了本地 JS。这种时候，“一键”只是假象，背后环境不匹配，页面照样白屏或报错。
