feat: launchEditor option (#373)

docs/guide/faq.md

@@ -1,9 +1,27 @@
 # Frequently Asked Questions
 
-## I can't use the Open In Editor feature
+## I can't use the open-in-editor feature
 
 The feature is based on the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector) plugin and requires configuration, which you can do by looking at the [configuration documentation](https://github.com/webfansplz/vite-plugin-vue-inspector?tab=readme-ov-file#--configuration-ide--editor).
 
+## How can I specify the editor for open-in-editor feature?
+
+Starting from **v7.2.0**, you can specify the editor by `launchEditor` option:
+
+This is a list of [supported editors](https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors), please ensure that the editor's environment variables are correctly configured beforehand.
+
+```ts
+import VueDevTools from 'vite-plugin-vue-devtools'
+export default defineConfig({
+  plugins: [
+    VueDevTools({
+      launchEditor: 'webstorm',
+    }),
+    Unocss(),
+  ],
+})
+```
+
 ## How to work with Laravel Vite Plugin?
 
 ```ts

docs/guide/vite-plugin.md

@@ -57,14 +57,28 @@ interface VitePluginVueDevToolsOptions {
   appendTo?: string | RegExp
 
   /**
-   * Customize openInEditor host (e.g. http://localhost:3000)
+   * Enable vue component inspector
+   *
+   * @default true
+   */
+  componentInspector?: boolean | VitePluginInspectorOptions
+
+  /**
+   * Target editor when open in editor (v7.2.0+)
+   *
+   * @default code (Visual Studio Code)
+   */
+  launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'
+
+  /**
+   * Customize openInEditor host
    * @default false
    * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
    */
   openInEditorHost?: string | false
 
   /**
-   * DevTools client host (e.g. http://localhost:3000)
+   * DevTools client host
    * useful for projects that use a reverse proxy
    * @default false
    * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.

packages/playground/basic/vite.config.ts

@@ -9,7 +9,9 @@ import AutoImport from 'unplugin-auto-import/vite'
 export default defineConfig({
   plugins: [
     vue(),
-    VueDevTools(),
+    VueDevTools({
+      launchEditor: 'code',
+    }),
     Unocss(),
     AutoImport({
       imports: [

packages/vite/package.json

@@ -56,7 +56,7 @@
     "execa": "^8.0.1",
     "sirv": "^2.0.4",
     "vite-plugin-inspect": "^0.8.4",
-    "vite-plugin-vue-inspector": "^5.0.1"
+    "vite-plugin-vue-inspector": "^5.1.0"
   },
   "devDependencies": {
     "@types/node": "^20.12.8",

packages/vite/src/vite.ts

@@ -42,31 +42,39 @@ export interface VitePluginVueDevToolsOptions {
   appendTo?: string | RegExp
 
   /**
-   * Customize openInEditor host (e.g. http://localhost:3000)
+   * Enable vue component inspector
+   *
+   * @default true
+   */
+  componentInspector?: boolean | VitePluginInspectorOptions
+
+  /**
+   * Target editor when open in editor (v7.2.0+)
+   *
+   * @default code (Visual Studio Code)
+   */
+  launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm'
+
+  /**
+   * Customize openInEditor host
    * @default false
    * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
    */
   openInEditorHost?: string | false
 
   /**
-   * DevTools client host (e.g. http://localhost:3000)
+   * DevTools client host
    * useful for projects that use a reverse proxy
    * @default false
    * @deprecated This option is deprecated and removed in 7.1.0. The plugin now automatically detects the correct host.
    */
   clientHost?: string | false
-
-  /**
-   * Enable Vue Component Inspector
-   *
-   * @default true
-   */
-  componentInspector?: boolean | VitePluginInspectorOptions
 }
 
 const defaultOptions: VitePluginVueDevToolsOptions = {
   appendTo: '',
   componentInspector: true,
+  launchEditor: 'code',
 }
 
 function mergeOptions(options: VitePluginVueDevToolsOptions): VitePluginVueDevToolsOptions {
@@ -173,6 +181,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
           pluginOptions.componentInspector && {
             tag: 'script',
             injectTo: 'head-prepend',
+            launchEditor: pluginOptions.launchEditor,
             attrs: {
               type: 'module',
               src: `${config.base || '/'}@id/virtual:vue-inspector-path:load.js`,
@@ -190,6 +199,7 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
     pluginOptions.componentInspector && VueInspector({
       toggleComboKey: '',
       toggleButtonVisibility: 'never',
+      launchEditor: pluginOptions.launchEditor,
       ...typeof pluginOptions.componentInspector === 'boolean'
         ? {}
         : pluginOptions.componentInspector,