vlambda博客
学习文章列表

原来vue-devtool是可以直接在编辑器（如vscode）中打开你当前正在调试的组件对应的vue文件的

背景

我一如往常的用vue-devtool调试着代码，忽然我注意到，vue-devtool上有个按钮，上面赫然写着Open in editor （在编辑器中打开），

好奇心促使我立马去点了一下，结果发现没有任何反应，还给我报了个错。

vue-devtools Opening component /Users/baymax/workspace/xxx/src/Modal/ApplyForm.vue failed

‍

心想：纳尼？就这？是不是我打开方式不对？

找到问题

想着尤大大应该不会闲的在vue-devtool放一个完全不能用的功能，于是去百度了下，发现原来这个功能是要配合以下几步才可以的

•1、 首先，把编辑器的路径加入到环境变量PATH中,

以vscode为例，在vscode中按下 cmd + shift + p 然后输入 shell, 点击在path中安装code命令，安装code命令之后，就可以在命令行中调用vscode编辑器了

•2、 安装中间件

npm i -D launch-editor-middleware

•3、在开发服务中注册尤大大开发的中间件

// 我们的项目比较古老，是手动启动webpack-dev-server的配置如下let express = require('express')const launchMiddleware = require('launch-editor-middleware')let app = express()app.use('/__open-in-editor', launchMiddleware())let server = app.listen(9000)
// 如果用的是webpack的devServer只需要const openInEditor = require('launch-editor-middleware');
module.exports = { devServer: { before: (app) { app.use('/__open-in-editor', openInEditor('code')); } }}

然后npm run dev, 走起！！

原理简单剖析

前置知识：vscode 编辑器在命令行中打开文件的命令是code -g /path/to/file

•1 launch-editor-middleware中间件在开发服务启动时，注册/__open-in-editor路由

•2 当开发者在vue-devtool 中点击Open in editor 按钮时，会发送一个ajax文件请求给

http://localhost:9000/__open-in-editor?file=/Users/baymax/workspace/xxx/src/Modal/ApplyForm.vue

•3 launch-editor-middleware 注册的/__open-in-editor路由，响应此请求，从请求的参数中解析出要打开的文件路径/Users/baymax/Desktop/workspace/xxx/src/Modal/ApplyForm.vue

•4 使用 child_process, 开启子进程，运行

code -g /Users/baymax/workspace/xxx/src/Modal/ApplyForm.vue

即可打开vscode，并且打开当前正在调试的vue组件

示例代码

const childProcess = require('child_process')const args = ['-g', '/Users/baymax/workspace/xxx/src/Modal/ApplyForm.vue']childProcess.spawn('code', args, { stdio: 'inherit'})

扩展阅读

如果我使用的是React,有没有类似的工具？请看 react-dev-inspector

支持的编辑器：