VS Code 里点开 HTML 文件只看到代码，不是网页？
默认情况下 VS Code 就是个文本编辑器，index.html 双击或打开后，它不会自动启动浏览器预览——这是正常行为，不是你配置错了。想“快速查看网页效果”，得靠外部工具或插件补足这个能力。
Live Server 插件是最稳的预览方案
官方推荐、社区用得最多、热更新靠谱。它起一个本地 HTTP 服务（比如 http://localhost:5500），浏览器访问该地址就能实时刷新，改完保存立刻生效。
安装和使用要点：
- 在 VS Code 扩展市场搜
Live Server，装那个作者是Ritwick Dey的（别选同名但下载量低的） - 右键编辑器里的
index.html→ 点Open with Live Server，会自动唤起浏览器并打开http://localhost:5500/index.html - 如果端口被占，它会自动换到下一个可用端口（比如
:5501），不用手动改配置 - 注意：不能直接双击
file:///路径打开，否则相对路径（如./css/style.css）或fetch()请求大概率失败——必须走http://协议
不装插件时，用系统默认浏览器临时打开
适合极简场景，比如就看一眼结构、没 JS/CSS 加载问题。本质是让系统用浏览器打开文件的本地路径，但有明显限制：
立即学习“前端免费学习笔记（深入）”；
- 右键资源管理器中的
index.html→Reveal in Explorer→ 右键文件 →Open with→ 选浏览器（Windows/macOS 都支持） - 或者终端进项目目录，执行：
start index.html（Windows）、open index.html（macOS） - 缺点很实在：所有基于
file://协议的请求都会被浏览器拦截（CORS、XMLHttpRequest、fetch、某些import语法），JS 一动就报错 - 图片路径写成
./img/logo.png没问题，但../data/config.json这种跨级引用可能失败，取决于浏览器安全策略版本
为什么不能用 VS Code 内置预览？
VS Code 本身没有内置 HTML 渲染引擎。所谓“预览”功能（比如旧版的 HTML Preview 插件）本质是把 HTML 转成 Markdown 或 iframe 嵌入，根本不跑真实 DOM、不执行 JS、不加载外部资源——看着像网页，实际连 console.log 都看不到，调试毫无意义。
真正需要验证交互逻辑、样式响应、API 调用时，绕不开本地服务。Live Server 不是“妙招”，是当前最接近开发环境真实行为的底线方案。
容易被忽略的一点：如果你开了防火墙或公司代理，localhost 可能被拦截，这时候浏览器打不开页面，但终端里 Live Server 日志仍显示 “Starting server”，得检查本地网络策略而非重装插件。
