vue-devtools 直接打开对应vue文件当我们遇到一个新的项目时，看页面、找组件是很耗时耗力的一件事情。其实vu

当我们遇到一个新的项目时，看页面、找组件是很耗时耗力的一件事情。其实vue-devtools不仅可以看页面的组件，还可以选中组件，直接跳转到ide对应的组件文件(vue文件)中。

打开vue-devtools 鼠标点击 select 或键盘按S就能去页面上选择想要查看的组件

我们以开源项目 vue-element-admin 为例，选中这个 table 组件，就能看到组件目前的一些属性和状态

细心的小伙伴会发现vue-devtools的右上角有个 Open-in-editor 按钮，点它就可以跳转到ide中对应的文件

他其实是通过执行shell脚本来实现的，以 vscode 为例，可以通过执行脚本 code /project/file 来让vscode 打开这个文件

1. 检查你的是终端是否支持 code 指令, 输入 code -v

如果没有该指令，去 vscode 按快捷键 ctrl + shift + P (mac 下为 command + shift + P), 并输入 shell，选择 在PATH中安装"code"命令

2. 安装webpack插件 launch-editor-middleware

我们把他全局安装

yarn global add launch-editor-middleware

在 webpack 或者 vue.config.js 配置文件中使用

const openInEditor = require('launch-editor-middleware')


devServer: {
  before(app) {
    app.use('/__open-in-editor', openInEditor('code'))
  }
}

这里 openInEditor('code') 是指支持 code 命令，还可以支持其他编辑器,比如：

openInEditor(['code', 'idea', 'webstorm', 'nodepad++'])

但是前提是你的shell命令要支持打开这些编辑器