feat: improves vscode integration, support multiple backends

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

@@ -232,3 +232,10 @@ export interface ComponentWithRelationships {
   dependencies?: string[]
   dependents?: string[]
 }
+
+export interface CodeServerOptions {
+  codeBinary: string
+  launchArg: string
+  licenseTermsArg: string
+  connectionTokenArg: string
+}

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

@@ -3,6 +3,7 @@ import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
 import type { ModuleCustomTab } from './custom-tabs'
 import type { ServerRouteInfo, ServerRouteInput, ServerTaskInfo } from './integrations'
 
+export type CodeServerType = 'ms-code-cli' | 'ms-code-server' | 'coder-code-server'
 export interface ModuleOptions {
   /**
    * Enable DevTools
@@ -153,6 +154,21 @@ export interface VSCodeIntegrationOptions {
    * Options for VS Code tunnel
    */
   tunnel?: VSCodeTunnelOptions
+
+  /**
+   * Determines which binary and arguments to use for VS Code.
+   *
+   * By default, uses the MS Code Server (ms-code-server).
+   * Can alternatively use the open source Coder code-server (coder-code-server),
+   * or the MS VS Code CLI (ms-code-cli)
+   *  @default 'ms-code-server'
+   */
+  codeServer?: CodeServerType
+
+  /**
+   * Host address to listen on. Unspecified by default.
+   */
+  host?: string
 }
 
 export interface VSCodeTunnelOptions {

packages/devtools/src/integrations/vscode.ts

@@ -1,4 +1,4 @@
-import type { NuxtDevtoolsServerContext } from '../types'
+import type { CodeServerOptions, CodeServerType, NuxtDevtoolsServerContext } from '../types'
 import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import { hostname } from 'node:os'
@@ -10,13 +10,35 @@ import { checkPort, getPort } from 'get-port-please'
 import which from 'which'
 import { LOG_PREFIX } from '../logger'
 
-export async function setup({ nuxt, options, openInEditorHooks, rpc }: NuxtDevtoolsServerContext) {
-  const installed = !!await which('code-server').catch(() => null)
+const codeBinaryOptions: Record<CodeServerType, CodeServerOptions> = {
+  'ms-code-cli': {
+    codeBinary: 'code',
+    launchArg: 'serve-web',
+    licenseTermsArg: '--accept-server-license-terms',
+    connectionTokenArg: '--without-connection-token',
+  },
+  'ms-code-server': {
+    codeBinary: 'code-server',
+    launchArg: 'serve-local',
+    licenseTermsArg: '--accept-server-license-terms',
+    connectionTokenArg: '--without-connection-token',
+  },
+  'coder-code-server': {
+    codeBinary: 'code-server',
+    launchArg: 'serve-local',
+    licenseTermsArg: '',
+    connectionTokenArg: '',
+  },
+}
 
+export async function setup({ nuxt, options, openInEditorHooks, rpc }: NuxtDevtoolsServerContext) {
   const vsOptions = options?.vscode || {}
-
+  const codeServer: CodeServerType = vsOptions?.codeServer || 'ms-code-server'
+  const { codeBinary, launchArg, licenseTermsArg, connectionTokenArg } = codeBinaryOptions[codeServer]
+  const installed = !!await which(codeBinary).catch(() => null)
   let port = vsOptions?.port || 3080
   let url = `http://localhost:${port}`
+  const host = vsOptions?.host ? `--host=${vsOptions.host}` : ''
   let loaded = false
   let promise: Promise<void> | null = null
   const mode = vsOptions?.mode || 'local-serve'
@@ -32,7 +54,7 @@ export async function setup({ nuxt, options, openInEditorHooks, rpc }: NuxtDevto
     // we can open files in VS Code Server
     try {
       const { port } = JSON.parse(await fs.readFile(vscodeServerControllerFile, 'utf-8')) as any
-      const url = `http://localhost:${port}/open?path=${encodeURIComponent(file)}`
+      const url = `http://localhost:${port}/open?path=${encodeURIComponent(`${root}/${file}`)}`
       await fetch(url)
       rpc.broadcast.navigateTo('/modules/custom-builtin-vscode')
       return true
@@ -64,21 +86,23 @@ export async function setup({ nuxt, options, openInEditorHooks, rpc }: NuxtDevto
 
     // Install VS Code Server Controller
     // https://github.com/antfu/vscode-server-controller
-    execa('code-server', [
-      'serve-local',
-      '--accept-server-license-terms',
+    execa(codeBinary, [
+      launchArg,
+      licenseTermsArg,
       '--install-extension',
       'antfu.vscode-server-controller',
+      host,
     ], { stderr: 'inherit', stdout: 'ignore', reject: false })
 
     startSubprocess(
       {
-        command: 'code-server',
+        command: codeBinary,
         args: [
-          'serve-local',
-          '--accept-server-license-terms',
-          '--without-connection-token',
+          launchArg,
+          licenseTermsArg,
+          connectionTokenArg,
           `--port=${port}`,
+          host,
         ],
       },
       {
@@ -144,7 +168,7 @@ export async function setup({ nuxt, options, openInEditorHooks, rpc }: NuxtDevto
       icon: 'bxl-visual-studio',
       category: 'modules',
       requireAuth: true,
-      view: !installed
+      view: !installed && !(vsOptions?.mode === 'tunnel')
         ? {
             type: 'launch',
             title: 'Install VS Code Server',

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

@@ -177,7 +177,7 @@ export function setupGeneralRPC({
 
       try {
         for (const hook of openInEditorHooks) {
-          const result = await hook(path)
+          const result = await hook(path + suffix)
           if (result)
             return true
         }