feat: Add configurable external editor support for component selection

[antharuu]

🆒 Your use case

Currently, when selecting a component in Nuxt DevTools using the selection tool, it automatically opens Visual Studio Code by default. However, many developers use different IDEs, and it's frustrating when VSCode is opened, especially when it’s not the primary editor.

🆕 The solution you'd like

I suggest adding an optional configuration field similar to what Godot offers for external editors: Godot External Editor Configuration. This field would allow developers to specify their preferred editor and how to pass file and cursor position (line, column) to that editor.

The field could default to VSCode but provide customization options for other editors.

Example configuration options:

• Editor: The name of the external editor (e.g., Atom, JetBrains IDE, Vim, Emacs, Sublime Text).
• Exec Flags: The command-line flags to open the selected component in the correct file and position. Examples:
  • Atom: {file}:{line}
  • JetBrains IDE: {project} --line {line} {file}
  • Vim (gVim): "+call cursor({line}, {col})" {file}
  • Emacs: emacs +{line}:{col} {file}
  • Sublime Text: {project} {file}:{line}:{column}

🔍 Alternatives you've considered

Another option would be to simply open the file with the system's default application for .vue files. While this might be more practical in some situations, it can lead to issues if the system default is not properly configured, as it could open in something like Notepad or another undesired application.

ℹ️ Additional info

This feature could remain optional with a VSCode default, but having flexibility would greatly improve the workflow for developers who do not use VSCode as their primary IDE.

[larryh]

As a user of JetBrains (Rubymine) I would love to see this.

[Jakub-Horacek]

I would also love this feature in the Nuxt Devtools. I recently started to use Cursor instead of the VS Code. Even tho Cursor is a fork of the VS Code, I would love the Nuxt Devtools component inspector to open my components in the Cursor editor instead of the VS Code.

[ItsRyanWu]

Hey how to change it to Windsurf?
Now Cursor is the default one for me and I don't know how it did it.

[antfu]

Nuxt DevTools use launch-editor to do that:

• devtools/packages/devtools/src/server-rpc/general.ts

  Line 185 in a596308

  await import('launch-editor').then(r => (r.default || r)(path + suffix))

• https://github.com/yyx990803/launch-editor

Where it should automatically detect your editor based on where you start the process. You can also override it with env LAUNCH_EDITOR=codium as suggested in the docs.

[antharuu]

Oh ok, maybe adding a drop-down list of supported editors would be easier and more useful. 🤔