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 实例。关掉一个再开另一个，或者用不同端口隔离
localhost:5500，尤其换了端口或用了自定义 root 之后，路径很容易错半层。 
