feat: allow to customize editor to open, fix #748

Author: antfu

packages/devtools-kit/src/_types/options.ts

@@ -184,6 +184,7 @@ export interface VSCodeTunnelOptions {
 export interface NuxtDevToolsOptions {
   behavior: {
     telemetry: boolean | null
+    openInEditor: string | undefined
   }
   ui: {
     componentsGraphShowGlobalComponents: boolean

packages/devtools/client/pages/settings.vue

@@ -24,8 +24,23 @@ const {
   sidebarScrollable,
 } = useDevToolsOptions('ui')
 
+const {
+  openInEditor,
+} = useDevToolsOptions('behavior')
+
 const client = useClient()
 
+const editorOptions = [
+  ['Auto', undefined],
+  ['VS Code', 'vscode'],
+  ['VS Code Insider', 'vscode-insider'],
+  ['Cursor', 'cursor'],
+  ['Zed', 'zed'],
+  ['WebStorm', 'webstorm'],
+  ['Sublime Text', 'sublime'],
+  ['Atom', 'atom'],
+]
+
 const scaleOptions = [
   ['Tiny', 12 / 15],
   ['Small', 14 / 15],
@@ -227,6 +242,15 @@ watchEffect(() => {
               {{ i[0] }}
             </option>
           </NSelect>
+
+          <div mx--2 my1 h-1px border="b base" op75 />
+
+          <p>Open In Editor</p>
+          <NSelect v-model="openInEditor" n-primary>
+            <option v-for="i of editorOptions" :key="i[0]" :value="i[1]">
+              {{ i[0] }}
+            </option>
+          </NSelect>
         </NCard>
 
         <h3 mt2 text-lg>

packages/devtools/src/constant.ts

@@ -21,6 +21,7 @@ export const defaultOptions: ModuleOptions = {
 export const defaultTabOptions: NuxtDevToolsOptions = {
   behavior: {
     telemetry: null,
+    openInEditor: undefined,
   },
   ui: {
     componentsView: 'list',

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

@@ -7,11 +7,12 @@ import { logger } from '@nuxt/kit'
 import { colors } from 'consola/utils'
 import destr from 'destr'
 import { resolve } from 'pathe'
-
 import { snakeCase } from 'scule'
+
 import { resolveBuiltinPresets } from 'unimport'
 import { getDevAuthToken } from '../dev-auth'
 import { setupHooksDebug } from '../runtime/shared/hooks'
+import { getOptions } from './options'
 
 export function setupGeneralRPC({
   nuxt,
@@ -181,8 +182,11 @@ export function setupGeneralRPC({
           if (result)
             return true
         }
+        let editor = getOptions()?.behavior.openInEditor ?? undefined
+        if (editor === 'auto')
+          editor = undefined
         // @ts-expect-error missin types
-        await import('launch-editor').then(r => (r.default || r)(path + suffix))
+        await import('launch-editor').then(r => (r.default || r)(path + suffix, editor))
         return true
       }
       catch (e) {