vue-devtools - [Open component in editor] 实现原理

关注我的公粽号『 前端我废了 』，查看更多文章！！！ 

学习尤大写的 launch-editor 源码，了解 vue-devtools - Open component in editor 功能的实现原理。

1. 前言

1.1 vue-devtools 功能：打开组件文件在编辑器中的位置

1.2 原理及执行过程

原理

调用 nodejs中的 子进程child_process.spawn()方法，启动编辑器对应可执行文件打开编辑器及对应文件，比如 vscode 对应可执行文件 Code.exe。

执行流程简述

vuejs/vue-devtools 文档中说：Vue CLI 3 supports this feature out-of-the-box when running vue-cli-service serve（在 Vue CLI 3 中，当运行 vue-cli-service serve 命令时，该功能是开箱即用的）

1. 点击 vue-devtools 按钮(open in editor )，发起请求 http://localhost:8080/__open-in-editor?file=src/components/HelloWorld.vue

2. 调用执行中间件 launch-editor-middleware​

1. 中间件 launch-editor-middleware 里面调用 launch-editor 方法打开编辑器及对应文件。

2. 起步

1. 使用 vue-cli 创建一个项目

2. 运行 Debug 模式

3. 该功能在 Vue CLI 3 中的源码实现

在运行 vue-cli-service serve 命令时，启动了如下图的服务，监听路径/__open-in-editor，当监听到对应路径请求时，调用中间件** launch-editor-middleware**

5. launch-editor-middleware

中间件最终调用 **launch-editor **打开文件。 在调用 **launch-editor **前，对参数做了判断赋值给 onErrorCallback，这种切换参数的写法，在很多源码中都很常见。为的是方便用户调用时传参。虽然是多个参数，但可以传一个或者两个。

6. launch-editor

launchEditor 函数

最终调用的是该函数 函数内部主要做了以下事情：

1. 解析文件路径、行列号，判断文件是否存在，不存在则直接 return；

2. 找出当前进程运行的编辑器，若没找到直接 报错 并 return（调用了 guessEditor 函数来查找编辑器）；

3. 调用 node 子进程 child_process.spawn()方法，启动对应编辑器程序；比如 vscode 编辑器为Code.exe，如下图。

guessEditor 函数

函数内部做了以下事情：

1. 若指定了编辑器 specifiedEditor 参数，则调用 shell-quote 包解析参数 shellQuote.parse(specifiedEditor)返回解析结果数组。

2. 若没有指定编辑器，则在当前运行的所有进程中，找出如下图 1 里面的哪一个编辑器正在运行。（查找当前所有进程使用的命令，macOS 和 Linux 用 ps x 命令，windows 则用 Get-Process命令）

3. 如果都没找到就判断环境变量process.env.VISUAL或者 process.env.EDITOR有没有配置。（所以我们也可以使用环境变量来指定编辑器）

4. 如果以上条件判断都没命中，则返回 [null]。

总结

看完源码，了解 vue-devtools - Open component in editor 功能整条链路的实现原理；原理其实并不难，如果我们能多了解一些 Node 的核心模块，对于原理我们也许不用看源码就能想象出是怎么实现的，所以还是要多多学习呀，学习使我强大！

相关参考

• 据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘

• Open component in editor | Vue Devtools

• child_process.spawn(command[, args][, options])

• shell-quote​