还在ctrl + f 查找你要调试的组件？试试用devtool一键在vscode中打开组件源代码

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

背景

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

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

vue-devtools  Opening component /Users/baymax/Desktop/workspace/xxx/src/xxx/xxx/pages/ManageRoot.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:8089/__open-in-editor?file=/Users/baymax/Desktop/workspace/xxx/src//Modal/ModalWrap.vue
  

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

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

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

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

  示例代码

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

扩展阅读

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

中间件的地址：github.com/yyx990803/l…

欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！