vlambda博客
学习文章列表

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

原来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

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



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

支持的编辑器:

Value Editor Linux Windows OSX
appcode AppCode

atom Atom
atom-beta Atom Beta

brackets Brackets
clion Clion
code Visual Studio Code
code-insiders Visual Studio Code Insiders
emacs Emacs

idea IDEA
notepad++ Notepad++

pycharm PyCharm
phpstorm PhpStorm
rubymine RubyMine
sublime Sublime Text
vim Vim

visualstudio Visual Studio

webstorm WebStorm