Vue Devtools 配置open in editor

一、安装 launch-editor-middleware 

npm install -d launch-editor-middleware

 二、vue.config.js 配置 launch-editor-middleware 

 配置 devServer  before

const openInEditor = require("launch-editor-middleware");

module.exports = {
  devServer: {
    before(app) {
      /* 编辑器类型 webstorm code */
      app.use("/__open-in-editor", openInEditor(["webstorm", "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	✓	✓	✓

注：

在 .vue 文件中设置 name，Vue Devtools 调试结构更清晰

 

参考：Github：launch-editor