Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Vue devtool Open component in editor tips

More document for "Vue devtool Open component in editor"


Visual Studio code

Users on macOS must first run a command (Shell Command: Install 'code' command in PATH) to add VS Code executable to the PATH environment variable. Read the macOS Setup guide for help.

vs shell-command install

webstorm or other jetBrain's editor

First install Command Line Launcher

"Tools" -> "Create Command Line Launcher..."

jetbrain's editor cli install


In your Vue project, install the launch-editor-middleware package and modifiy your webpack configuration:

  1. Install the package
yarn add --dev launch-editor-middleware
// or
npm install --save-dev launch-editor-middleware

1. Import the package:

If you use vue-cli's webpack template

in 'build/'

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

2. In the devServer option, register the /__open-in-editor HTTP route:

in 'build/'

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

3. specify the editor


The editor to launch is guessed. You can also specify the editor app with the editor option. See the supported editors list.

npm launch-editor can specify editor. If you installed visual studio code shell-command, this works!

launch-editor launch just

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

If you didn't install editor's command-line specify full path.

See :

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

editor priority

If you open multiple editor, first process editor open.

There are not yet 'specify editor priority' feature in 'launch-editor'.


This comment has been minimized.

Copy link
Owner Author

@moreta moreta commented Jan 22, 2018

jetbrain editor cli install


2018-01-22 16 30 40

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment