Setting up Svelte-Inspector with VS Code + WSL

mikehtmlallthethings

Mikhail Karan

Posted on May 10, 2023

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

💖 💪 🙅 🚩
mikehtmlallthethings
Mikhail Karan

Posted on May 10, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related