vscode本身不决定html打开浏览器,必须依赖插件;open in browser插件需配置open-in-browser.default为chrome(首字母大写)等合法值才生效,live server则用liveserver.settings.custombrowser(小写)独立配置。

VSCode 本身不决定用哪个浏览器打开 HTML,真正起作用的是插件——没装插件,右键根本不会出现“Open in Default Browser”选项;装了多个插件,它们各自管各自的配置,互不认账。
open-in-browser.default 配置填什么才生效
这是最常被写错的地方。插件 Open in Browser 的核心配置项叫 open-in-browser.default,它的值必须是纯字符串,不是 JSON、不带引号、不加花括号。
- ✅ 正确写法:直接输入
Chrome(首字母大写,无空格) - ❌ 错误写法:
{"open-in-browser.default":"Chrome"}或"Chrome"或chrome(小写) - 支持的值包括:
Chrome、Edge、Firefox、Safari(macOS)、Opera等,大小写敏感 - 改完不用重启 VS Code,右键 HTML 文件 →
Open in Default Browser立刻走指定浏览器
Live Server 的浏览器设置和 open-in-browser 完全无关
Live Server 插件自带热重载,但它完全不读 open-in-browser.default。它用的是另一套配置:liveServer.settings.CustomBrowser。
- 这个配置项的可选值是小写的:
chrome、firefox、edge(注意不是Chrome) - Windows 上如果系统路径里没有
chrome.exe在 PATH 中,也可以填完整路径,比如C:\Program Files\Google\Chrome\Application\chrome.exe - Linux/macOS 填
google-chrome或firefox即可 - 右键 →
Open with Live Server才会走这个配置,和Open in Default Browser是两条平行线
Browser Preview 插件怎么配调试入口
如果你要用 Browser Preview 在编辑器内预览并调试(比如断点、console),光装插件不够,还得配 launch.json。
- 在项目根目录建
.vscode/launch.json,内容必须含"type": "browser-preview" -
url字段要填真实服务地址,比如"http://localhost:3000",不能填本地文件路径file:// - 调试前确保已安装
Debugger for Chrome(旧版)或Microsoft Edge DevTools(新版 Edge 用户) - 启动调试时,VS Code 会新开一个独立的 Chromium 实例,不是复用你日常用的 Chrome 窗口
多个插件共存时,右键菜单变混乱怎么办
装了 Open in Browser、Live Server、Browser Preview 后,右键菜单会出现多个“Open in…”选项,但每个对应不同行为,容易点错。
-
Open in Default Browser→ 走open-in-browser.default配置 -
Open with Live Server→ 走liveServer.settings.CustomBrowser,且自动起本地服务器 -
Browser Preview: Open Preview→ 在编辑器侧边栏开内嵌视图,不跳出窗口 - 删掉不用的插件最省心;如果都要留,建议把常用操作绑定快捷键,比如
Ctrl+Alt+O绑定到Open in Default Browser
最容易忽略的一点:所有这些插件的浏览器选择逻辑,都依赖操作系统能否正确识别目标浏览器进程。如果 Chrome 更新后路径变动、或被安全软件拦截启动,插件可能静默失败——此时右键点了没反应,得去终端手动跑 chrome --version 确认是否还能调起。











