VSCode中运行代码html的正确姿势-VSCode-PHP中文网

live server 是专为纯 html/css/js 项目设计的本地开发服务器，能彻底解决 file:// 协议下 fetch、es 模块导入等被拦截问题，需通过“打开文件夹”后右键 html 文件启动，端口和主机可配置，不适用于 vite/webpack 等框架项目。

vscode中运行代码html的正确姿势

Live Server 是唯一能真正解决 HTML 预览问题的工具，其他方式要么绕过关键限制、要么只适合极简验证。

为什么不能双击或右键“在浏览器中打开”

浏览器对 file:// 协议做了硬性限制：所有 fetch 请求、import ES 模块、XMLHttpRequest 加载同目录资源，都会被拦截，报错类似 net::ERR_FILE_PROTOCOL 或 CORS error。这不是你代码写错了，是协议本身不支持跨文件资源加载。

Edge 在 Windows 默认设置下会静默禁用 JS（尤其含 localStorage 或模块导入时）
路径含中文或空格，部分旧插件解析失败（Live Server 已修复，但 Open in Browser 等轻量插件可能挂）
你以为“保存就生效”，结果刷新没变——其实是缓存，或根本没触发重载逻辑

Live Server 怎么装、怎么用、怎么调端口

必须安装 Ritwick Dey 原版插件，且操作有严格前提：用“文件→打开文件夹”建立工作区，右键已保存的 .html 文件（不是资源管理器里右键，也不是未保存的 Untitled-1），才能看到 Open with Live Server 选项。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

状态栏右下角的 Go Live 按钮，只对当前已打开的 HTML 文件生效
默认地址是 http://127.0.0.1:5500/xxx.html；端口被占时会自动换，但建议主动配：Ctrl+, → 搜 liveServer.settings.port → 改成 3000 等常用值
想让手机连同一 Wi-Fi 查看？设 liveServer.settings.host 为 0.0.0.0
项目根目录不是当前文件所在目录？改 liveServer.settings.root，填相对路径如 "./src"

调试 JS 时 launch.json 必须改这三处

VSCode 默认的 Chrome 调试配置想找 http://localhost:8080，但 Live Server 启的是 http://127.0.0.1:5500，不改就断连。别抄网上旧配置，直接用这个最小可用版：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Live Server",
      "url": "http://127.0.0.1:5500/index.html",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}