feat: improves vscode integration, support multiple backends (#763)

Co-authored-by: Anthony Fu <[email protected]>

Author: gsxdsm

docs/content/1.guide/1.features.md

@@ -90,7 +90,72 @@ Learn more about [Nitro Storage](https://nitro.unjs.io/guide/storage)
 
 The VS Code Server integration in Nuxt DevTools enhances your development experience by bringing the power of Visual Studio Code directly into your browser. With this feature, you can seamlessly edit and debug your Nuxt projects using the familiar interface of VS Code.
 
-To get started with VS Code Server, follow the installation instructions provided by [Code Server Installation Guide](https://coder.com/docs/code-server/latest/install)
+Nuxt DevTools supports the following ways of integrating with VS Code:
+
+### Connecting to an existing code-server instance
+
+Set `reuseExistingServer` to true in runtime config for `devtools/vscode` and set the `port` option to specify a port (defalts to 3080):
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  devtools: {
+    vscode: {
+      reuseExistingServer: true,
+      port: 3090
+    }
+  }
+})
+```
+
+### Running a code-server instance locally
+
+You can use either the [Microsoft Visual Studio Code Server](https://code.visualstudio.com/docs/remote/vscode-server) (via the `code` or `code-server` cli tools) or the [Coder VS Code Server](https://coder.com/docs/code-server/latest/install) (via the `code-server` cli tool) by setting the `codeServer` parameter under `devtools/vscode` in the runtime configuration.
+
+Options for the codeServer parameter are:
+|Type|Option|
+|----|------|
+|MS Code CLI|`ms-code-cli`|
+|MS Code Server|`ms-code-server`|
+|Coder Code Server|`coder-code-server`|
+
+You can set the `port` parameter to listen on a specific port (default 3080) and you can set the `host` parameter if you need to listen on a particular host interface (useful for devcontainers or docker containers that listen on ipv6 by default).
+
+**Example**:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  devtools: {
+    vscode: {
+      codeServer: 'ms-code-server',
+      host: '0.0.0.0',
+      port: 3090
+    }
+  }
+})
+```
+
+### Remotely via a MS VS Code server tunnel
+
+Set the `mode` option in `devtools/vscode` runtime configuration to `tunnel`. You can set the name of the tunnel to connect to using the `tunnel` option under `devtools/vscode/tunnel` in runtime configuration)
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  devtools: {
+    vscode: {
+      mode: 'tunnel',
+      tunnel: {
+        name: 'my-tunnel-name'
+      }
+    }
+  }
+})
+```
+
+### Code Server Installation Instructions
+
+To get started with Microsoft VS Code Server, follow the installation instructions provided by [Microsoft Visual Studio Code Server](https://code.visualstudio.com/docs/remote/vscode-server)
+
+To get started with Coder Code Server, follow the installation instructions provided by [Code Server Installation Guide](https://coder.com/docs/code-server/latest/install)
 
 For more information on the benefits and features of VS Code Server, refer to [the official Visual Studio Code blog](https://code.visualstudio.com/blogs/2022/07/07/vscode-server)
 

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,8 @@ 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 +155,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,20 @@ 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, [
       '--install-extension',
       'antfu.vscode-server-controller',
     ], { 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 +165,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
         }