VSCode新手怎么运行代码html文件-VSCode-PHP中文网

live server是唯一推荐的vscode html预览插件，它通过启动本地http服务（如http://127.0.0.1:5500）解决file://协议导致的fetch、import、cors等浏览器安全限制问题，支持实时刷新、相对路径和es模块，安装后需重启vs code并确保html文件已保存且语言模式为html。

vscode新手怎么运行代码html文件

直接用 Live Server 插件，别试其他“一键打开”方案——那些走 file:// 协议的，JS 一调 fetch 或 import 就报 net::ERR_FILE_PROTOCOL，不是你代码错，是浏览器根本不让干。

为什么右键没“Open in Browser”选项？

VS Code 默认不带这个功能，必须装扩展。但注意：装错扩展会白忙活。

别装“Open in Browser”类轻量插件——它只是调 start 或 open 命令打开 file:// 地址，静态页面能看，但只要涉及本地 JSON、模块导入、localStorage 跨域判断，立刻挂掉
必须装 Ritwick Dey 的原版 Live Server（作者名和 GitHub 仓库名都要对），安装量超 3000 万，且持续维护到 2026 年
装完不重启 VS Code 也可能不生效；确保你当前编辑器标签页里正打开着一个 .html 文件，右键菜单才出现 Open with Live Server

点“Go Live”没反应或打不开页面？

状态栏右下角那个绿色按钮只在满足三个条件时才可用：已安装插件 + 当前编辑器是 HTML 文件 + 该文件已保存（哪怕空内容也要 Ctrl+S）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

如果点击后没反应，检查 VS Code 右下角是否显示“Starting Live Server…”然后消失——说明端口被占，它自动换端口了，但没提示。此时手动访问 http://127.0.0.1:5501/xxx.html（试试 5501、5502…）
想固定端口？打开设置（Ctrl+,），搜 liveServer.settings.port，填个没被占的数，比如 3000
如果浏览器弹出但页面空白，检查地址栏是不是 file:/// 开头——那说明你误点了资源管理器里的文件右键，而不是编辑器内右键

Live Server 启动了，但 JS 报 CORS 或 fetch 失败？

大概率是你没用它提供的地址，而是手动把 file:// 路径粘贴进浏览器，或者调试配置还指着旧地址。

务必用 Live Server 启动后浏览器自动跳转的那个地址，形如 http://127.0.0.1:5500/index.html，不是 file://，也不是你手敲的 localhost:5500（除非你改过 host 设置）
如果用 VS Code 自带的 Chrome 调试器，launch.json 里 url 字段必须和 Live Server 实际地址一致，例如："url": "http://127.0.0.1:5500/index.html"，不能抄网上写死 localhost:8080 的旧配置
路径含中文或空格一般不影响 Live Server（它已修复），但如果你用的是自定义 tasks.json 调浏览器，命令里没加引号包裹 "${file}"，就可能因空格截断路径导致 404