前言
相信使用Vue开发的同学都会安装浏览器插件Vue Devtools来调试代码:
在开发时，定位一个页面/组件的源码文件的常见方式有在代码库中搜索页面关键字、Devtool中的组件名、DOM节点的class等，这些方式的效率都不算高。
Vue Devtools在4.0版本之后提供了一个十分实用的功能：一键在编辑器中打开组件的源码文件。
我们只需要在Devtools的组件树中定位并选中目标组件，就可以快速打开对应的源码文件，来看一下效果：
配置方式
实现以上的功能只需简单几步：
1. 安装launch-editor-middleware
yarn add -D launch-editor-middleware
# or
npm install --save-dev launch-editor-middleware
2、更改webpack devServer配置
// webpack.config.js
const openInEditor = require('launch-editor-middleware');
module.exports = {
devServer: {
before (app) {
app.use('/__open-in-editor', openInEditor('code'));
}
}
}
在before方法中，给devServer注册一个/__open-in-editor的HTTP路由，并在路由的回调中通过launch-editor-middleware唤起编辑器。
openInEditor方法的参数code表示编辑器是VSCode，更多支持的编辑器和参数可以看这里。
3. 把编辑器的路径加入到环境变量PATH中
以VSCode为例，Command + Shift + P打开Command Palette，输入shell command，选择第一个就可以大功告成了：
