2019-10-12 vue-devtools open in editor 功能实现

在Vuejs开发调试过程中，发现vue-devtools插件有open in editor的功能，点击了几下却只是打印了一条

File xxx.vue opened in editor

然而无聊的我去百度了一下，没有找到想要的结果。。。然后去vue-devtools的Github看了一眼看到解决办法。
需要安装 launch-editor-middleware 包

npm install launch-editor-middleware -d

编辑webpack.dev.conf.js
导入launch-editor-middleware包

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

找到devServer 把before函数这个copy进去

devServer: {
  ....
  before (app) {
    /**
    * 我使用的是Visual Studio Code 所以这边传的编辑器类型是code
    * 编辑器类型在文章下面了，自己找吧。
    */
    app.use('/__open-in-editor', openInEditor('code'))
  }
}

重启，再去点 open in editor就可以打开编辑器了

编辑器类型

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	✓	✓	✓