VSCode需配置launch.json:type设为"node",用runtimeExecutable指向bun、runtimeArgs设为["dev"];确保sourceMap有效、webRoot匹配源码路径,并正确设置sourceMapPathOverrides。

Bun 能直接替代 Node.js 启动前端服务并调试,但 VSCode 默认不识别 bun,必须手动配 launch.json 和确保 PATH 或显式路径可用,否则点击 ▶️ 会静默失败或报 command 'debug.start' not found。
怎么让 VSCode 正确启动 bun dev 服务
VSCode 本身不“运行”前端项目,它只是调用你命令行能跑起来的指令。如果你在终端里执行 bun run dev 或 bun --hot index.ts 能起服务,VSCode 就能复用——前提是配置对了 launch.json 的 type 和 program。
-
type必须设为node(Bun 兼容 Node.js 调试协议),不能写bun或其他自定义值 -
program推荐写绝对路径(如${workspaceFolder}/src/server.ts),避免依赖package.json的scripts字段;如果要用脚本,得加runtimeExecutable指向bun - 若项目用
bun dev启动(如基于bun create的模板),launch.json里不要直接写"program": "bun dev"——这会被当成一个文件名,报cannot find module 'bun dev' - 正确做法是:用
runtimeExecutable+runtimeArgs拆开:"runtimeExecutable": "bun","runtimeArgs": ["dev"]
为什么断点不命中?sourceMap 和 webRoot 是关键
Bun 默认生成 sourcemap(尤其 .ts 文件),但 VSCode 调试器需要知道源码和浏览器加载资源的映射关系。如果断点灰色、点击无效,大概率是 webRoot 没对上,或者构建工具输出路径和 sourceMapPathOverrides 不匹配。
-
webRoot应该指向你开发时写的源码根目录,通常是${workspaceFolder};但如果服务实际从dist/或public/提供 HTML,就得设成对应路径 - Vite/Bun dev server 默认不把
src/映射进浏览器 URL,所以sourceMapPathOverrides往往要补:"webpack:///src/*": "${webRoot}/src/*"(即使没用 webpack) - 检查浏览器开发者工具 Sources 面板里是否能看到
file://或http://下的src/文件夹——看不到就说明 sourcemap 解析失败
如何用 --inspect 在 VSCode 里连上 Bun 进程
Bun 的 --inspect 启动调试服务后,VSCode 可以像连 Chrome 一样连过去,不需要改代码或加 debugger,适合调试启动逻辑或 CLI 工具类脚本。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记(深入)”;
- 终端先跑:
bun --inspect server.ts,拿到类似ws://localhost:6499/xxx的地址 - VSCode 新建
launch.json配置:"type": "pwa-node","request": "attach","port": 6499,"address": "localhost","sourceMaps": true - 注意:端口必须和
--inspect输出的一致;如果用了--inspect=4000,这里就填4000 - 这个方式绕过了
program路径解析,也避开了runtimeExecutable权限问题,在 Windows 上尤其稳定
tasks.json 配 bun test 时容易漏的关键字段
VSCode 测试面板(Testing view)只认 label: "test" 且 group: "test" 的 task,缺一不可。光写 command: "bun test" 不够,还可能因环境变量导致 bun 找不到。
- 必须加
"group": "test",否则右键“Run Test”不出现选项 -
command建议用npx bun test,比裸写bun test更可靠(尤其多版本共存时) - 如果测试要 watch,加上
--watch到args;但别加isBackground: true,否则 VSCode 会卡在“正在运行任务”状态 - Windows 用户注意:PowerShell 默认禁用脚本执行,若报
ExecutionPolicy错误,要么换终端为 CMD/WSL,要么临时运行Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
真正麻烦的不是配哪一行,而是 bun 进程启动后是否暴露了调试端口、sourcemap 是否被浏览器加载、以及 VSCode 是否用对了调试适配器类型——这三个点串不起来,所有配置都白搭。

















