devtools: "Open in editor" button doesn't work in Win 10 with VSCode if installation path contains spaces

Version

4.1.5

Browser and OS info

Chrome 70 / Windows 10

Steps to reproduce

Open dev tools
Select component with “Select” button
Click on “Open in editor” button

What is expected?

Open component in default editor (vs code)

What is actually happening?

Got this error

"C:\Users\User\AppData\Local\Programs\Microsoft" не является внутренней или внешней командой, исполняемой программой или пакетным файлом.
		
		Could not open Home.vue in the editor.
		The editor process exited with an error: (code 1).
		
To specify an editor, sepcify the EDITOR env variable or add "editor" field to your Vue project config.

I think the problem is in default VS Code path with spaces “C:\Users\User\AppData\Local\Programs\Microsoft VS Code”

I am trying to set EDITOR variable in .env file VUE_APP_EDITOR=/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe

Or use vue.config.js

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

module.exports = {
    configureWebpack: {
        devtool: 'source-map',
    },
    devServer: {
        before(app) {
            app.use('/__open-in-editor', openInEditor('/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
        }
    }
}

But the problem still remains

About this issue

Original URL
State: open
Created 6 years ago
Comments: 25 (2 by maintainers)

Most upvoted comments

I tried it myself and solved it! @d9beuD After I added these two lines of code, the plugin ran successfully!

// 在编辑器中打开
var openInEditor = require('launch-editor-middleware')
app.use('/__open-in-editor', openInEditor('code'))

kiccer on Jun 7, 2021

I finally got it working using the setup option instead of the recommended before option.

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

module.exports = {
    devServer: {
        setup (app) {
            app.use('/__open-in-editor', openInEditor('code'))
        }
    }
}

didierdemoniere on May 31, 2021

Can I see this problem solved in my lifetime?

kiccer on Sep 2, 2020

Have others encountered this problem? I submitted a PR but it was not merged. So I published the modified version to @catnap/launch-editor-middleware. You can try this approach:

const launchMiddleware = require('@catnap/launch-editor-middleware')

module.exports = {
    devServer: {
        setup (app) {
            app.use('/__open-in-editor', launchMiddleware())
        }
    }
}

kiccer on May 30, 2023

try “C:\Users\WHO\AppData\Local\Programs\Microsoft\ VS\ Code\Code.exe”

What should be changed? In the code? Or in environment variables?

Try this: Go to your Windows Environment Variables and put a new variable EDITOR with that Path: C:\Users\User\AppData\Local\Programs\MicrosoftVSCode\Code.exe (Or change it that in a way, that it points on your Code.exe file). By default the “\Microsoft VS Code\” Folder has Spaces. Change that to “\MicrosoftVSCode\”. That fixed it for me.

kitkid-js on Dec 23, 2020