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 不匹配。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
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 工具类脚本。
- 终端先跑：
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 是否用对了调试适配器类型——这三个点串不起来，所有配置都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
