Vue Dev Tools - does not working "Open in Editor" button. How to fix this? - vue.js

Question

I am trying to setup this feature from tutorial:
https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md
but got an error
"C:\Users\User\AppData\Local\Programs\Microsoft" не является внутренней или внешней, исполняемой программой или пакетным файлом.
Could not open LeadsEdit.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.
in my vue.config.js (project based on vue cli 3.0)
const openInEditor = require('launch-editor-middleware');
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
devServer: {
before(app) {
app.use('/__open-in-editor', openInEditor('code'))
}
}
}
UPD. Without this code the problem still remain.
UPD2.
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 with 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
What may cause this problem?
How can I fix this error?

Answer 1

It seems like dev tools is trying to open the editor executable C:\Users\User\AppData\Local\Programs\Microsoft, which is most likely wrong. The default install location on Windows 10 is (to the best of my knowledge) C:\Users\User\AppData\Local\Programs\Microsoft VS Code\Code.exe.
launch-editor tries to find the editor from the currently running processes and falls back to the environment variables EDITOR and VISUAL (see https://github.com/yyx990803/launch-editor#why), so you can probably set the EDITOR env var to the correct path.
Probably, there are quotes missing around the editor config so it gets cut off at the first space. I don't really know where the path comes from, either you configured it via environment variables or in your vue project config.
Based on the information in your updated question, you could try this:
I don't know where the variable name VUE_APP_EDITOR comes from, but I guess it should be EDITOR. Change it to EDITOR and see what happens
The path you are using looks wrong (i.e. not like a windows path). Try c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe instead.
E.g.:
app.use('/__open-in-editor', openInEditor('c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
You can test whether the path is correct by starting a cmd shell and entering the path. If it is correct, VS Code should open. If not, it will tell you the path was not found.
Also have a look at this, there is some more on how to integrate vue devtools & VS Code: https://gist.github.com/moreta/d3989686b6a1f2416b5802cac8df16b4