You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Just want to confirm that it does not work on WSL2. Tried everything, like setting the LAUNCH_EDITOR=code variable in a .env file etc.
Not sure, but the problem might be related to the fact, that while WSL2 is Linux, so the development code runs on Linux, the editor and the browser themselves still run on the Windows OS.
Just stumbled upon this issue and toyed with it for a bit and found a solution. Open your VS Code settings, either Remote [WSL] for every project or Workspace for each individual project you wish to configure, and find Terminal > Integrated > Env: Linux and after opening the settings JSON add the key-value pair "EDITOR": "code" to the terminal.integrated.env.linux configuration object.
This causes it the inspector to open files correctly either when running the dev server manually or when using the Vite extensions Open Vite App command server.
Example settings.json:
{
// other config..."terminal.integrated.env.linux": {
"EDITOR": "code"
}
}
Reacted by CokaKoala, Zen, Tan Nguyen, Loongphy, JianJroh and Jon-Erik Liw
The solution proposed by @gtdrakeley works perfectly for anything in the project scope (routes, lib, and even custom paths (via path.resolve)). It's a great time saver already!
Unfortunately, components outside that scope show the correct component path highlighted on the page, but a click does not open the component in the editor. This makes it impossible to use the inspector for monorepos on WSL with local packages (like Design Systems) etc.
I suspected that it might have had something to do with the Vite config — in particular server.fs.allow — but providing the paths outside my root did not solve the problem.
I was excited to use svelte inspector with WSL2 but @gtdrakeley's solution isn't working for me and I still get this error with no further explanation:
It only works when you launch the vite dev server using VS code's integrated terminal. I usually use just to launch everything with one command like just dev so hope it can work when vite server and vscode is launched via windows terminal.
I was excited to use svelte inspector with WSL2 but @gtdrakeley's solution isn't working for me and I still get this error with no further explanation:
@silenceofthewans Yes, I only used that, and it worked for me. But unfortunately not for everything, as stated in my prior reply. It worked for files in src, $lib, but not for files outside the project scope, like our design system or other packages which are co-located in a common monorepo. This makes the inspector only semi-useful in my case, which is sad, because it's such a great feature.
@codepainting I edited my comment but I think you might also be using the integrated terminal to launch your dev server because I tested and svelte inspector only opens the file in vscode if you used the same vscode instance to launch your dev server. This comment mentions same.
It only works when you launch the vite dev server using VS code's integrated terminal. I usually use just to launch everything with one command like just dev so hope it can work when vite server and vscode is launched via windows terminal.
Hello @silenceofthewans do you find any solution for this? I'm using Windows Terminal with WSL 2 and Laravel Sail.
I tried everything from the comments here with no result. When I click "open in editor" in vue-dev-tool-next in the console I get this error
Could not open Dashboard.vue in the editor.
The editor process exited with an error: spawn code ENOENT.
Activity
aixfox commentedon Sep 23, 2019
+1
codepainting commentedon Nov 1, 2022
Just want to confirm that it does not work on WSL2. Tried everything, like setting the LAUNCH_EDITOR=code variable in a .env file etc.
Not sure, but the problem might be related to the fact, that while WSL2 is Linux, so the development code runs on Linux, the editor and the browser themselves still run on the Windows OS.
gtdrakeley commentedon Feb 18, 2023
Just stumbled upon this issue and toyed with it for a bit and found a solution. Open your VS Code settings, either
Remote [WSL]for every project orWorkspacefor each individual project you wish to configure, and findTerminal > Integrated > Env: Linuxand after opening the settings JSON add the key-value pair"EDITOR": "code"to theterminal.integrated.env.linuxconfiguration object.This causes it the inspector to open files correctly either when running the dev server manually or when using the Vite extensions
Open Vite Appcommand server.Example
settings.json:{ // other config... "terminal.integrated.env.linux": { "EDITOR": "code" } }codepainting commentedon Apr 20, 2023
The solution proposed by @gtdrakeley works perfectly for anything in the project scope (routes, lib, and even custom paths (via path.resolve)). It's a great time saver already!
Unfortunately, components outside that scope show the correct component path highlighted on the page, but a click does not open the component in the editor. This makes it impossible to use the inspector for monorepos on WSL with local packages (like Design Systems) etc.
I suspected that it might have had something to do with the Vite config — in particular server.fs.allow — but providing the paths outside my root did not solve the problem.
silenceofthewans commentedon May 16, 2023
I was excited to use svelte inspector with WSL2 but @gtdrakeley's solution isn't working for me and I still get this error with no further explanation:Could not open .svelte in the editor.@codepainting I saw from sveltejs/vite-plugin-svelte/#481 that you had similar issue did you only used"terminal.integrated.env.linux"to make it work?It only works when you launch the vite dev server using VS code's integrated terminal. I usually use just to launch everything with one command like
just devso hope it can work when vite server and vscode is launched via windows terminal.codepainting commentedon May 16, 2023
@silenceofthewans Yes, I only used that, and it worked for me. But unfortunately not for everything, as stated in my prior reply. It worked for files in src, $lib, but not for files outside the project scope, like our design system or other packages which are co-located in a common monorepo. This makes the inspector only semi-useful in my case, which is sad, because it's such a great feature.
silenceofthewans commentedon May 16, 2023
@codepainting I edited my comment but I think you might also be using the integrated terminal to launch your dev server because I tested and svelte inspector only opens the file in vscode if you used the same vscode instance to launch your dev server. This comment mentions same.
AxeloLabs commentedon Jun 19, 2023
the CMD+CLICK does not open the file, when I am using turborepo and the component is from an internal package.
jkbz64 commentedon Jun 26, 2023
For some reason setting only
EDITORdid not help, it was still opening in vim, needed to setVISUALtocodetoo on WSL2.kevinmarrec commentedon Oct 17, 2023
It works perfectly for me by adding
export EDITOR="code"to your favorite shell config (
~/.zshrcfor me)You may also want to add
export VISUAL="code"if we consider @jkbz64 answer as well and that the first one couldn't do the trick for you.mreduar commentedon May 16, 2024
Hello @silenceofthewans do you find any solution for this? I'm using Windows Terminal with WSL 2 and Laravel Sail.
I tried everything from the comments here with no result. When I click "open in editor" in vue-dev-tool-next in the console I get this error
Could not open Dashboard.vue in the editor. The editor process exited with an error: spawn code ENOENT.