docs: include documentation about how to use svelte inspector with custom editors

[inspiredlabs]

Problem

It is not clear from the documentation how to use svelte-inspector with editors that are not supported by launch-editor (the library in vite that opens the editor for us) ootb.

Solution

Add a link to launch-editor docs, mentioning LAUNCH_EDITOR environment variable

original report below:

Describe the bug

There seems to be some detail missing, I know that these are "upstream" issues – but I think it's fair to say this plugin is about DX. So, with that in mind, I'd like to highlight some bugs/documentation.

1. The documentation states:

svelte inspector can be configured via environment variables.

Does that mean that I can specify: VITE_INSPECTOR_EDITOR=code, or VITE_INSPECTOR_EDITOR=cursor?

2. From the documentation, it seems a typical svelte.config.js might look like this:

const config = {
  vitePlugin: {
    exclude: [],

    // UX options:
    inspector: {
      toggleKeyCombo: 'meta-shift',
      holdMode: false,
      showToggleButton: 'never'
    }

  }

};

export default config;

But this leaves some details unanswered. Here's an example using VSC (Visual Studio Code):

• If you want to use this with VSC, then:
  • press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) to open the Command Palette.
  • Then Shell Command: Install 'code' command in PATH.
  • Restart your terminal...
• By default, and behind the scenes this seems to do this: npm run dev --openVim, so you have to specify your editor in your terminal environment too, so:
  • in a terminal window, type: echo $EDITOR
  • if it's blank it'll be pointing to vim.
  • you can change it with: export EDITOR=code
  • then type: echo $EDITOR again, it should return code.
  • The Svelte inspector should work as intended.

3. what if you're on another IDE? – or perhaps you want a different editor to be saved?
   • open your terminal configuration (for example: ZSH): ~/.zshrc
   • then go to the bottom of the file and add the line: export EDITOR=cursor
   • restart yout terminal: source ~/.zshrc
   • npm run dev -- --open, and then meta-shift + click.
   • it should open in your saved IDE.

Reproduction URL

https://kit.svelte.dev/

Reproduction

The documentation says that this is all that needs configuring, but as described this is an incomplete solution:

const config = {
  vitePlugin: {
    exclude: [],

    // UX options:
    inspector: {
      toggleKeyCombo: 'meta-shift',
      holdMode: false,
      showToggleButton: 'never'
    }

  }

};

export default config;

Logs

No response

System Info

Apple Silicon, macOS Ventura, zsh, VSC or Cursor.so

[dominikg]

svelte inspector does not include an option to customize the editor that is opened by vite. This feature is provided by vite via https://github.com/yyx990803/launch-editor#launch-editor . You can customize the editor command via LAUNCH_EDITOR env, which is described in their docs.

[inspiredlabs]

Thanks. I've just setup a fresh repo to test this on.

Out of the box, this requires people to do several things:

1. open svelte.config.js, under kit, add:

kit: {
        adapter: adapter()
    },

    // plugin options
  vitePlugin: {
    exclude: [],
    // DX options
    inspector: {
      toggleKeyCombo: 'meta-shift',
      holdMode: false,
      showToggleButton: 'never'
    }
  }

3. If you want to test the plugin at this point (npm run dev -- --open), this is what will happen on macOS your terminal will throw:

Could not open +page.svelte in the editor. The editor process exited with an error: spawn code ENOENT.

4. So, you can specify your editor in the terminal beforehand using export LAUNCH_EDITOR=cursor, or tailor your package.json file, like this: "scripts": { "dev": "export LAUNCH_EDITOR=cursor && vite dev", ... }.

NB: I don't know how useful it is to use a typical .env file. Whiles it's full of useful variables, I'm not sure this is the most natural home for LAUNCH_EDITOR=cursor. And, in my testing it still throws: The editor process exited with an error: spawn code ENOENT. when it's set here anyway.

Seeing as this is out of experimental, my hope is the inspector works by default OOTB.

Thanks again.

[dominikg]

Like i mentioned before, the feature to open the editor is implemented in vite, not vite-plugin-svelte. This does work out of the box for most common editors as launch-editor scans the process list for known executables. If it does not work for yours, I suggest you file an issue with launch-editor and maybe send them a PR to support cursor.

Or you follow their configuration options and put the environment variable in an appropriate place for your development, be it a .env file or your shells rc file.

A short paragraph can be added to our docs that mentions this and link to launch-editor.

[dominikg]

I have updated your report to be an enhancement request, as this is not a bug in vite-plugin-svelte. Support questions like "How do i use svelte inspector with editor X" can be asked in our discord chat too, in #svelte-and-kit there are a lot of helpful community members and some of them use svelte inspector with vim and other editors too.