WSL Support

[MarcelloTheArcane]

It doesn't appear to work when serving from Windows Subsystem for Linux.

Is this a possibility?

[aixfox]

+1

[codepainting]

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]

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"
    }
}

[codepainting]

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]

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 dev so hope it can work when vite server and vscode is launched via windows terminal.

[codepainting]

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 <filename>.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?

@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]

@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]

the CMD+CLICK does not open the file, when I am using turborepo and the component is from an internal package.

[jkbz64]

For some reason setting only EDITOR did not help, it was still opening in vim, needed to set VISUAL to code too on WSL2.

[kevinmarrec]

It works perfectly for me by adding

export EDITOR="code"

to your favorite shell config (~/.zshrc for 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.