解决 Vue DevTools 中的 Open in Editor 错误唤起 Notepad 的问题

其实从 切换主力编辑器到 Cursor 开始,我的 Vue DevTools 插件中的 Open in Editor 功能一直都有问题。当时始想着都切换到 Cursor 了,再用 VS Code 来打开组件就不太合适了。所以就按照推荐的使用 Shell Commands 命令执行 Install 'code' command 直接把 Cursor 注册进去,以为就搞定了就没有再去验证。
实际上并没有注册成功(也不知道是不是因为我的受控账户所以没办法直接操作环境变量)。直到后面某一天调试的时候,突然发现并没有和预期的一样使用 Cursor 打开,而是直接通过 Notepad 记事本打开了对应的 .vue 文件!
重新执行 Shell Command: Install 'code' command 也没有效果。那我想着注册不行的话,我先恢复成 VS Code 打开拖动到 Cursor 里面先用着等有时间了再解决。结果执行完 uninstall 之后使用 Open in Editor 功能还是使用的 Notepad 打开的组件文件,我就裂开了 🤯。

但是当时开发任务又紧张,可以看到我有很长一段时间都没有更新博客也能发现。但是最近有时间了,就可以着手解决这个问题。


一开始想着直接看 Vue DevTools 的文档,但是看到的都是安装一些依赖来实现,但其实我这个状况并不是缺少了插件导致的。所以应该是环境变量方面的问题,就想着从环境变量中入手。但是我在各个终端中检查 codecursor 都正常执行的,所以并不是缺少了 PATH 信息。那么就需要从 Vue DevTools 中找答案了。

找了一圈 Issue 只有一个强相关的帖子,但是他是使用的 vite 插件,并不是浏览器插件。但是跟帖中发现了一个非常重要的信息。

我检查了一下 devtools 对于浏览器插件api的实现是进行了 fetch 请求 '__open_in_enditor',该功能实际由 vite 实现的,所以可能在这里无法得到答案
qq326943819 on Apr 11

正好,Open in Editor 这部分的文档中也提到了 /__open-in-editor。就可以从这部分提到的 launch-editor 这个包入手。
打开项目阅读README还没几行就看到了这一段话:

However, both expects env variables like EDITOR to be set in order to open files. This package infers the editor to open by checking current running processes before falling back to env variables.

但是对于环境变量(environment variable)的理解会有一些歧义,所以继续找了一下相关的Issue,明确了是系统的环境变量,而不是项目中的环境变量。


开始设置系统环境变量,但是由于是受控账户,没办法直接通过系统配置页面来设置。
所以找了一下相关的 CMDPowershell 两个终端中设置环境变量的命令。

setx EDITOR cursor 这个后面的 cursor 可以是 code 或者其他的编辑器名称,比如说 webstorm

设置成功之后会提示。但是你仍然需要检查(需要重启终端)。

  • 如果是 CMD 可以通过 echo %EDITOR% 来查看是否设置成功;
  • 如果是 Powershell,可以用 echo $env:EDITOR 来查看。

如果没有输出你设置的值,那么就说明你没有关闭全部的终端。一般会在 Powershell 中遇到。那么就需要关闭所有已经打开的终端,再重新尝试。如果你的编辑器有打开终端也需要关闭

如果可以正常看到输出了,那么重启项目再点击 Vue DevTools 中的 Open in Editor 就可以正常在你设置的编辑器中打开了。


相关资源