vscode怎么在预览代码文件在浏览器

vs code 预览 html 需安装 live server 插件（作者 ritwick dey），它启动本地 http 服务解决 cors 和路径问题，支持端口/根目录配置，不支持 .php/.js 文件，需确保文件语言模式为 html 且后缀正确。

VS Code 里直接预览 HTML 文件要装什么插件

默认不支持，必须装插件。最常用、维护活跃、无广告的是 Live Server —— 它不是 VS Code 自带功能，也不是浏览器扩展，而是 VS Code 的一个扩展（Extension）。

• 在扩展市场搜 Live Server，认准作者是 Ritwick Dey（图标是 ?）
• 安装后重启 VS Code 不是必须的，但建议保存当前工作区再启用
• 只对 .html 文件生效；.htm 也行，但 .php、.js 等纯脚本文件不会自动启动服务
• 别装名字相近的 Open in Browser，它只是调用系统默认浏览器打开本地 file:// 路径，不启 HTTP 服务，遇到 fetch、XMLHttpRequest 或模块导入会直接报 CORS 错误

右键没看到 “Open with Live Server” 怎么办

常见原因不是插件没装好，而是当前文件没被识别为 HTML —— VS Code 依赖文件后缀和语言模式双重判断。

• 检查右下角状态栏：如果显示 Plain Text 或 JavaScript，点它，选 HTML
• 确保文件以 .html 结尾，且文件头没有 bom 或非法字符（比如从微信粘贴过来的“智能引号”）
• 如果项目根目录有 .vscode/settings.json，确认没写死 "files.associations" 把 .html 映射成别的语言
• 插件启用后，快捷键 Alt+L Alt+O（windows/linux）或 Cmd+L Cmd+O（macos）也能强制触发，比找右键更稳

点开后浏览器空白 / 报 404 / 刷新不更新

本质是路径解析错了。Live Server 启动的是本地 HTTP 服务（如 http://127.0.0.1:5500/），所有相对路径都以此为根，不是以文件系统路径为根。

• <img src="images/logo.png" alt="vscode怎么在预览代码文件在浏览器" > 要求图片在项目根目录下的 images/ 文件夹，不是相对于当前 HTML 文件的位置
• 浏览器地址栏显示 http://127.0.0.1:5500/sub/index.html，说明你是在子目录里右键的；此时 ./style.css 会请求 http://127.0.0.1:5500/sub/style.css，而不是 http://127.0.0.1:5500/style.css
• 改用绝对路径开头加 /：比如 <link href="/css/main.css">，这样始终从服务根开始找
• 缓存问题：Live Server 默认不带 cache-busting，改完 CSS 刷新可能还是旧样式，可手动清浏览器缓存，或按 Ctrl+F5 强制硬刷新

想换端口、加 https、支持多根目录怎么办

Live Server 支持配置，但得改 VS Code 设置，不是图形界面点点就行。

• 打开设置（Ctrl+,），搜 live server，找到 Settings: Live Server Config，点右边的铅笔 → Edit in settings.json
• 添加如下片段（示例）：

  {   "liveServer.settings.port": 8080,   "liveServer.settings.root": "/src",   "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --unsafely-treat-insecure-origin-as-secure=http://127.0.0.1:8080 --user-data-dir=/tmp/chrome-test" }

• root 配置仅影响服务根路径，不影响文件打开位置；HTTPS 需要自己配证书，插件不内置，强行启用容易被浏览器拦截
• 多项目同时开发？别共用一个 Live Server 实例。关掉一个再开另一个，或者用不同端口隔离

Live Server 启动后会在终端输出实际访问地址，那个地址才是有效的——别凭记忆输 localhost:5500，尤其换了端口或用了自定义 root 之后，路径很容易错半层。