技术分享：解决Kiro中 使用vite-plugin-vue-devtools 点击打开文件默认启动 Cursor 的问题

问题背景

在开发Vue项目时，通过修改code.cmd将系统code命令转发到自定义编辑器Kiro，并安装了vite-plugin-vue-devtools提升开发效率。但遇到以下问题：

• 命令行执行code .能正常打开Kiro
• 浏览器页面中点击vue-devtools的「打开文件」按钮，却始终启动Cursor编辑器
• 即便调整了系统PATH优先级，问题仍未解决

---

问题排查过程

环境变量优先级问题

通过where code命令发现，Cursor的code命令路径在系统PATH中优先级更高：

D:\>where code
d:\软件\cursor\resources\app\codeBin\code
d:\软件\cursor\resources\app\codeBin\code.cmd
C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\bin\code
C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\bin\code.cmd

调整方案：
将Kiro和VSCode的路径上移到PATH最顶部，确保系统优先查找自定义配置。调整后再次执行where code，VSCode路径已排在首位：

D:\>where code
C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\bin\code
C:\Users\Administrator\AppData\Local\Programs\Microsoft VS Code\bin\code.cmd
d:\软件\cursor\resources\app\codeBin\code
d:\软件\cursor\resources\app\codeBin\code.cmd

此时命令行code .已能正常打开Kiro，但页面点击仍启动Cursor，说明问题不在系统PATH层面。

插件与系统默认打开方式的关联

既然命令行行为正常，说明vite-plugin-vue-devtools的「打开文件」逻辑未直接依赖系统PATH，而是通过以下方式触发编辑器：

• 调用系统默认的.vue/代码文件打开方式
• 读取VSCode配置中的编辑器关联

验证方案：

• 检查VSCode配置：打开settings.json，确认无指向Cursor的配置项（如editor.externalBrowser）
• 修改系统默认打开方式：右键.vue文件 → 打开方式 → 选择「Visual Studio Code」并勾选「始终使用此应用打开.vue文件」

---

最终解决方案

核心思路

不依赖插件显式指定编辑器路径，通过修复系统文件关联 + 清理VSCode异常配置，让vite-plugin-vue-devtools触发的「打开文件」行为回归系统默认逻辑，从而指向正确编辑器。

具体步骤

1. 检查VSCode配置

   • 打开VSCode → 按Ctrl + Shift + P → 输入Preferences: Open Settings (JSON)
   • 检查是否存在类似editor.externalBrowser指向Cursor的配置，若存在则删除或修改为VSCode/Kiro路径
   • 保存配置并重启VSCode

2. 修改系统默认打开方式

   • 右键任意.vue/.js代码文件 → 选择「打开方式」→「选择另一个应用」
   • 在列表中选择「Visual Studio Code」，勾选「始终使用此应用打开.vue文件」
   • 点击「确定」完成配置

3. 重启开发服务

   • 终止当前运行的Vite服务（Ctrl + C）
   • 重新执行npm run dev启动服务
   • 刷新浏览器页面，验证「打开文件」功能

---

关键经验总结

环境变量 vs 系统默认打开方式

• 环境变量：影响命令行code命令的执行优先级，解决的是「终端调用编辑器」的问题
• 系统默认打开方式：影响图形界面（如浏览器插件、文件管理器）触发的「打开文件」行为，解决的是「GUI调用编辑器」的问题
• 两者独立生效，需分别配置才能覆盖全场景

vite-plugin-vue-devtools的行为逻辑

• 插件的「打开文件」功能本质是调用系统API打开指定文件，而非直接执行code命令：
  • 优先读取系统文件类型关联（默认打开方式）
  • 若文件关联正常，会触发VSCode → 进而转发到自定义编辑器Kiro
  • 若文件关联被篡改（如指向Cursor），则会直接启动对应编辑器

排查优先级建议

遇到类似「命令行正常、GUI异常」的编辑器调用问题，可按以下顺序排查：

1. 验证命令行code .行为，确认环境变量配置生效
2. 检查VSCode配置是否被篡改，清理异常路径
3. 修复系统文件默认打开方式，确保代码文件关联到正确编辑器
4. 最后考虑在插件配置中显式指定编辑器路径（兜底方案）

---

避坑指南

• ❌ 不要仅调整PATH就认为问题解决：GUI场景不会走PATH查找逻辑
• ❌ 不要忽略VSCode配置缓存：修改后需重启VSCode才能生效
• ✅ 优先通过「系统默认打开方式」解决问题：兼容性更好，无需修改项目配置
• ✅ 若需自定义编辑器转发（如Kiro），确保code.cmd配置正确，且VSCode是系统默认代码编辑器