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

[testgit-1]

Version

4.1.5

Browser and OS info

Chrome 70 / Windows 10

Steps to reproduce

1. Open dev tools
2. Select component with "Select" button
3. 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

[chpxu]

I think it needs to be openInEditor('C:/Users/path/to/vscode')because your vue.config.js is saying from the root of your drive, go to the folder called c which I doubt is what you want, since you want to navigate to the Users folder from root

[testgit-1]

@beastdestroyer , thanks for the answer.

I have tried this solution.

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 got the same error

[chpxu]

@testgit-1 I think it's also due to app.use('/__open-in-editor') because that part is saying, from the root of your C: Drive, find the folder called __open-in-editor. Now I don't know your file structure, but I'm guessing that folder is in the same directory as your vue.config.js so it can be either

app.use('./__open-in-editor') or app.use('__open-in-editor').

If adding that doesn't work, then I'm stumped because the only problem I could see was the paths issue. I'm not exactly a hardcore configuration dude myself so yeah xD

[briangruber]

Had same issue on windows 10, I actually had to rename the folder C:/Users/User/AppData/Local/Programs/Microsoft VS Code/ to C:/Users/User/AppData/Local/Programs/MicrosoftVSCode/

and then edited my PATH env variables to have the new non spaced version and all worked out. Couldn't figure out any other way. Hope this helps.

[chpxu]

@brianguber If that was the case, you could add %20 to the PATH since sometimes that stands for the space in Microsoft VS Code

[kiccer]

Can I see this problem solved in my lifetime?

[yyclvps]

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

[kiccer]

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

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

[kitkid-js]

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.

[Codermar]

We're having a similar issue in a couple of macs. One of them opens sublime (even though VSCODE is the default editor for .vue files) and other does nothing at all.

I think there should either be a specific mention in the README on how to set this up or provide an option in the settings where something can be done about it.
For us it's actually a real pain because my fellows can't open the components directly from devtools :-(

This is a great extension and your hard work is appreciated though! Thank you!

[Akryum]

https://devtools.vuejs.org/guide/open-in-editor.html

[Codermar]

https://devtools.vuejs.org/guide/open-in-editor.html

Just to clarify it for me though. The same project does not have that setup and I've been able to open in editor since I can remember (even in multiple projects) what am I missing?

[Akryum]

@Codermar The devtools can't open your editor without the setup above. Part of it such as setting up the launch-editor middlewares are sometimes done for you (for example in vue-cli).

[didierdemoniere]

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'))
        }
    }
}

[d9beuD]

Thanks @didierdemoniere I confirm it worked for me too.

[kiccer]

@didierdemoniere I didn't succeed.. (இωஇ )

[d9beuD]

@kiccer what Vue.js version are you using? It worked for me with a Vue.js v2 project.

[kiccer]

@d9beuD

I use v2 too.
But this project was originally created with vue-cli2.x.
My system is windows10.

[d9beuD]

@kiccer when you type code in your powershell, does it open VSCode ?

[kiccer]

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'))

[tomgif]

Works for me:
before (app) { app.use('/__open-in-editor', openInEditor('"C:\\Program Files\\JetBrains\\PhpStorm 2022.1\\bin\\phpstorm64.exe"')) }
in case you can't add editor to environment variables

[hrmxan]

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.

it worked for me too

[kiccer]

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())
        }
    }
}

[sunpm]

Have you ever encountered this problem?

[zhao-yi-fan]

其他人遇到过这个问题吗？我提交了 PR 但没有被合并。所以我将修改后的版本发布到@catnap/launch-editor-middleware. 您可以尝试这种方法：

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

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

I also encountered this problem and used this method to solve it