vs code 中直接双击 html 文件打不开是因未走预览逻辑；应使用 live server 插件（启动 http 服务，支持热重载）而非 open in browser（仅打开 file://，易报错）；文件须保存、后缀为 .html/.htm；配置通过 settings.json 修改。
VS Code 里直接打开 HTML 文件到浏览器，为什么点不开？
多数情况不是 VS Code 的问题，而是你双击了文件、或用右键“在资源管理器中打开”——这根本没走 VS Code 的预览逻辑。真正起作用的是 Live Server 插件或内置的 Open in Default Browser 命令，但后者只对本地 .html 文件有效，且要求文件已保存（未保存的临时标签页不触发）。
- 确保文件后缀是
.html或.htm，.txt或无后缀不会被识别为可预览页面 - 文件必须已保存到磁盘，未保存的
Untitled-1标签无法被浏览器加载 - 如果用了 Webpack/Vite 等构建工具，不要试图直接打开生成的
index.html——它依赖本地服务注入资源，得跑npm run dev
装什么插件最靠谱：Live Server 还是 Open in Browser？
Live Server 是事实标准，它起一个本地 HTTP 服务（http://127.0.0.1:5500/xxx.html），支持热重载、相对路径解析、CORS 绕过；而 Open in Browser 只是调用系统默认浏览器打开 file:// 协议地址，遇到 fetch、import 或图片路径就大概率报错。
- 装插件：搜索并安装
Live Server（作者：Ritwick Dey） - 用法：右键编辑器任意位置 → 选择
Open with Live Server，或按快捷键Alt+L Alt+O（Windows/Linux）/Cmd+L Cmd+O（macOS） - 别用
Open in Default Browser命令处理带 JS/CSS 的项目——它不启动服务，fetch('./data.json')会直接 404
为什么改了代码，浏览器没刷新？
Live Server 默认开启自动刷新，但有几个关键条件不满足就会失效：
jquery带商品分类侧边栏列表的商城导航菜单
下载
这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。 使用方法 在页面中引入样式文件style.css和jquery.min.js文件。
- 必须通过
Live Server启动的页面才受控；手动在浏览器地址栏输file://或刷新按钮点出来的页面，和 Live Server 无关 - 修改保存后，VS Code 要真正写入磁盘（检查右下角状态栏是否有「正在保存」提示），某些网络盘或 WSL 挂载路径可能延迟写入
- 如果页面里有
event.preventDefault()拦截了所有点击，或用了location.replace()，Live Server 的注入脚本可能被阻塞 - 浏览器开了多标签页访问同一端口（如
http://127.0.0.1:5500/a.html和http://127.0.0.1:5500/b.html），只有一页会收到刷新信号
想换端口、加 HTTPS、禁用自动刷新？
Live Server 支持配置，但不是在插件设置页里改——它读取 VS Code 工作区或用户级的 settings.json。
- 打开设置 → 搜
live server settings→ 点「在 settings.json 中编辑」 - 常用配置项：
"liveServer.settings.port": 3000、"liveServer.settings.donotShowInfoMsg": true、"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --unsafely-treat-insecure-origin-as-secure=http://127.0.0.1:3000 --user-data-dir=/tmp/chrome" - HTTPS 需要自己生成证书并配
"liveServer.settings.https": {"enable": true, "cert": "/path/to/cert.pem", "key": "/path/to/key.pem"}，普通开发没必要
端口冲突时，Live Server 会自动顺延（比如 5500 被占，就用 5501），但不会主动通知——看 VS Code 右下角弹出的端口号就行。别凭记忆硬敲地址。
