这是一篇学习笔记?，大佬说了要
知其然，知其所以然
学习后可以知道：
- 如何解决该功能报错问题
- 如何调试学习源码
launch-editor-middleware、launch-editor等实现原理
关于 vue-devtools
没看这个原理之前我只知道：
在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。
下载这个工具需要科学上网，去下载。下载好了以后凡是用vue构建的项目这个图标都会亮起来。
其实vue-devtools 功能很香：
- 当你看别人的页面，想要打开对应的源代码文件，还的吭哧吭哧的找，诶，巧了，
vue-devtools可以实现，可以点击页面按钮自动用编辑器打开对应文件
react类似的功能，请看react-dev-inspector- 支持的编辑器有
vscode、webstorm、atom、sublime等，更多看这里
尤大大写的 launch-editor 源码
准备工作
- 学习地址：参考链接
- 本文仓库地址：
git clone https://github.com/lxchuan12/open-in-editor.git，克隆下来以后，进入 vue3-project 目录，安装依赖yarn install - 安装
vue-devtools谷歌扩展：翻墙去应用商店下载安装即可（下载 6.0.0 beta 版） vsocde版本1.58.2- 了解
launch-editor[1]：主要功能是在编辑器中打开带有行号的文件
原理
主要通过launch-editor-middleware和launch-editor两个库实现了该功能，这两个库又通过调用node的process、child_process能力，创建一个node的子进程调起编译器打开选中的组件
调试学习
打开浏览器中如果使用vue 开发那么只要是vue开发的这个图标就会亮起来，现在不亮，需要这样设置，点击谷歌浏览器右上角三个点——>点击更多工具 ——> 点击扩展程序——> 点击vue devtools 的详情 ——> 将允许访问文件网址打开即可。
- 打开
vue3-project/package.json中有一个debug或者调试按钮，打开后选择第一项serve vue-cli-service serve。
vue-devtools的Open component in editor[2]这个文档，这个文档里面描述了引用了【launch-editor-middleware】这个库来实现打开文档的功能。
按照大佬的文档搜索launch-editor-middleware这个中间件,果然node_modules下的文件，需要设置下:
- 做法一：就是「排除的文件」右侧旁边有个设置图标「使用“排查设置”与“忽略文件”」，点击下。
- 做法二：vscode怎么设置可以搜索包含node_modules中的文件
- 搜索到目标代码
vue3-project/node_modules/@vue/cli-service/lib/commands/serve.js这里引用了这个中间件
调试
当浏览器发送 http://localhost:8080/__open-in-editor?file=src/components/HelloWorld.vue 这个请求的时候，就进入到下面这个代码了。
- 46行处 为express 的方式引用
launch-editor-middleware
接着往下看发现了这个方法：
使用了
app.use("/__open-in-editor"），这是express引入中间件的用法。
app.use 加载用于处理http请求的middleware（中间件），当一个请求来的时候，会依次被这些 middlewares处理，执行的顺序是你定义的顺序。
launchEditorMiddleware这个方法主要就是调用 launch-editor 打开文件。
通过上方调试，最终运行的是 launch 函数，我们可以这这里打一个断点，然后进入到【launch-editor】的源码，实际运行的是 launchEditor 函数。
wrapErrorCallback
终端错误图Could not open App.vue in the editor.输出的代码位置。
guessEditor 猜测当前正在使用的编辑器
搜索这个函数的时候发现也是require 进来的，那继续往下看看这块的代码 vue3-project/node_modules/launch-editor/guess.js
- 这个函数主要做了如下四件事情：
- 如果具体指明了编辑器，则解析下返回。
- 找出当前进程中哪一个编辑器正在运行。macOS 和 Linux 用 ps x 命令
- windows 则用 Get-Process 命令
- 如果都没找到就用 process.env.VISUAL或者process.env.EDITOR。这就是为啥开头错误提示可以使用环境变量指定编辑器的原因。
最后还是没有找到就返回[null]，则会报错。
所以总结下来的核心代码：
const childProcess = require('child_process')if (process.platform === 'win32') {// On Windows, launch the editor in a shell because spawn can only// launch .exe files._childProcess = childProcess.spawn('cmd.exe',['/C', editor].concat(args),{ stdio: 'inherit' })} else {_childProcess = childProcess.spawn(editor, args, { stdio: 'inherit' })
}使用
child_process.spwan异步打开一个子进程模块，它调起了 cmd.exe 工具打开我们的编辑器，并打开了文件（args 就是文件的参数）
执行了类似code path/to/file命令。
总结：
- 以
code path/to/file为核心思想 - 浏览器发起请求走到launchEditorMiddleware函数，这里调用launch实现主要逻辑。
- 判断是否有文件，没有直接返回
- 有文件则继续查询可以用来打开文件的编辑器，没有找到执行失败回调，找到了则在编辑器中打开相应文件