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

1. 前言

你好，我是若川^[1]，微信搜索「若川视野」关注我，专注前端技术分享，一个愿景是帮助5年内前端开阔视野走向前列的公众号。欢迎加我微信ruochuan12，长期交流学习。

这是学习源码整体架构系列 之 launch-editor 源码（第九篇）。学习源码整体架构系列文章(有哪些必看的JS库)：jQuery、underscore、lodash、sentry、vuex、axios、koa、redux。

本文仓库地址^[2]：git clone https://github.com/lxchuan12/open-in-editor.git，本文最佳阅读方式，克隆仓库自己动手调试，容易吸收消化。

要是有人说到怎么读源码，正在读文章的你能推荐我的源码系列文章，那真是无以为报啊。

我的文章尽量写得让想看源码又不知道怎么看的读者能看懂。我都是推荐使用搭建环境断点调试源码学习，哪里不会点哪里，边调试边看，而不是硬看。正所谓：授人与鱼不如授人予渔。

阅读本文后你将学到：

1. 如何解决该功能报错问题
   

2. 如何调试学习源码
   

3. launch-editor-middleware、launch-editor 等实现原理
   

1.1 短时间找不到页面对应源文件的场景

不知道你们有没有碰到这样的场景，打开你自己（或者你同事）开发的页面，却短时间难以找到对应的源文件。

这时你可能会想要是能有点击页面按钮自动用编辑器打开对应文件的功能，那该多好啊。

而vue-devtools提供了这样的功能，也许你不知道。我觉得很大一部分人都不知道，因为感觉很多人都不常用vue-devtools。

open-in-editor

你也许会问，我不用vue，我用react有没有类似功能啊，有啊，请看react-dev-inspector^[3]。你可能还会问，支持哪些编辑器呀，主流的 vscode、webstorm、atom、sublime 等都支持，更多可以看这个列表 Supported editors^[4]。

本文就是根据学习尤大写的 launch-editor^[5] 源码，本着知其然，知其所以然的宗旨，探究 vue-devtools「在编辑器中打开组件」功能实现原理。

1.2 一句话简述其原理

code path/to/file

一句话简述原理：利用nodejs中的child_process，执行了类似code path/to/file命令，于是对应编辑器就打开了相应的文件，而对应的编辑器则是通过在进程中执行ps x（