DEV Community

Cover image for Setting up Svelte-Inspector with VS Code + WSL
Mikhail Karan
Mikhail Karan

Posted on • Originally published at htmlallthethings.com

Setting up Svelte-Inspector with VS Code + WSL

Just ran into some issues while setting up the updated svelte-inspector vite plugin on my SvelteKit app I'm developing on Windows with WSL (Windows Subsystem for Linux). Figured I wouldn't be the only one to have this issue so here is a quick way to solve it!

Guide

Setup Svelte Inspector

For SvelteKit inside your svelte.config.js file add this:



//in svelte.config.js
const config = {
  // ...
  vitePlugin: {
     inspector: true,
  },
}


Enter fullscreen mode Exit fullscreen mode

Add EDITOR config in your settings.json

In your VS Code settings file (settings.json) add the following:



"terminal.integrated.env.linux": { 
   "EDITOR": "code" 
}


Enter fullscreen mode Exit fullscreen mode

That's it, you should now be able to use the svelte-inspector tool with your WSL VS Code editor!

To use it just start your dev server and open up your project in the browser. Then use the default key combo Ctrl + Shift

Image showing svelte inspector working on a skelton sveltekit project

References

Top comments (0)