feat: replace VS Code integration with Code Server plugin (#1036)

Author: antfu

README.md

@@ -150,8 +150,8 @@ export default defineNuxtConfig({
  devtools: {
 // Enable devtools (default: true)
  enabled: true,
-//VS Code Server options
-vscode: {},
+//Coder code-server options (enabled by default)
+codeServer: {},
 // ...other options
  }
 })

docs/content/1.guide/0.getting-started.md

@@ -104,8 +104,8 @@ export default defineNuxtConfig({
  devtools: {
 // Enable devtools (default: true)
  enabled: true,
-//VS Code Server options
-vscode: {},
+//Coder code-server options (enabled by default)
+codeServer: {},
 // ...other options
  }
 })

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

@@ -112,79 +112,38 @@ Module authors who want to expose their own data can install [`@devframes/plugin
 The `getServerData` DevTools RPC that backed the old viewer is deprecated (`NDT_DEP_0009`). It still works as a compatibility shim but will be removed; use the Data Inspector panel instead.
 ::
 
-## VS Code Server
+## Code Server
 
-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.
+The **Code Server** member in the Nuxt group embeds [Coder's `code-server`](https://coder.com/docs/code-server/install). It is enabled by default: Nuxt DevTools detects the local `code-server` binary during setup, but starts no process until you choose **Launch editor**. If the binary is missing, the member shows installation instructions instead.
 
-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]
-exportdefaultdefineNuxtConfig({
- 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]
-exportdefaultdefineNuxtConfig({
- 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)
+When launched, Code Server opens the Nuxt root directory by default, hands the generated authenticated session to the iframe, and streams process output to the built-in **Terminals** member. The process is also stopped when Nuxt closes.
 
 ```ts [nuxt.config.ts]
 exportdefaultdefineNuxtConfig({
  devtools: {
- vscode: {
- mode: 'tunnel',
- tunnel: {
- name: 'my-tunnel-name'
- }
- }
- }
+ codeServer: {
+ enabled: true,
+// All fields below are optional.
+ bin: '/usr/local/bin/code-server',
+ cwd: '/workspace/my-app',
+ serverPort: 8080,
+ host: '127.0.0.1',
+ args: ['--disable-file-downloads'],
+ env: { LOG_LEVEL: 'info' },
+ cookieSuffix: 'my-app',
+ startTimeout: 30_000,
+ },
+ },
 })
 ```
 
-### Code Server Installation Instructions
+The curated options are `enabled`, `bin`, `cwd`, `serverPort`, `host`, `args`, `env`, `cookieSuffix`, and `startTimeout`. When omitted, the upstream plugin defaults apply: the `code-server` binary, loopback host, a free port near Code Server's port 8080, and a 30-second startup timeout. Nuxt changes only the default `cwd`, setting it to the Nuxt root. Set `codeServer.enabled: false` to omit the member.
 
-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)
+Nuxt DevTools owns authentication, so `args` cannot override `--auth`, `--bind-addr`, or `--cookie-suffix`, and `env` cannot set `PASSWORD` or `HASHED_PASSWORD`. Configure the bind host and cookie suffix through their dedicated fields.
 
-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)
+The editor iframe connects directly to the Code Server port; Nuxt does not proxy it through `app.baseURL`. The browser must be able to reach that host and port, and an HTTPS page cannot embed an HTTP-only editor because of browser mixed-content rules. Binding to a non-loopback interface also exposes the port to that network, so apply the usual network controls.
 
-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)
+This integration uses the experimental upstream `@devframes/plugin-code-server`. HTTPS, reverse proxies, containers, and remote port forwarding are governed by that plugin and your environment; Nuxt does not extend them or provide the removed Microsoft/tunnel/reuse modes.
 
 ## Hooks
 

docs/content/2.module/3.migration-v4.md

@@ -3,6 +3,37 @@ title: Migration to v4
 description: 'Breaking changes and migration guide for Nuxt DevTools v4.'
 ---
 
+## `vscode` option removed {#ndt_dep_0008}
+
+The bespoke `devtools.vscode` integration has been replaced by the Code Server
+Devframe plugin. Supplying `vscode` emits `NDT_DEP_0008`; the complete value is
+ignored and is not translated, because partially mapping the old modes would
+silently change their behavior.
+
+```diff
+export default defineNuxtConfig({
+ devtools: {
+- vscode: { enabled: true },
++ codeServer: { enabled: true },
+ },
+})
+```
+
+The replacement supports only a locally installed Coder
+[`code-server`](https://coder.com/docs/code-server/install), detected at setup
+and started on demand. These legacy capabilities were removed:
+
+- Microsoft `code serve-web` and Microsoft `code-server serve-local`;
+- VS Code tunnels;
+- reusing an existing server;
+- starting the server on boot;
+- installing the `vscode-server-controller` extension;
+- opening a specific file through that controller extension.
+
+The generic open-in-editor feature remains available. For the new integration,
+configure only `enabled`, `bin`, `cwd`, `serverPort`, `host`, `args`, `env`,
+`cookieSuffix`, or `startTimeout` under `devtools.codeServer`.
+
 ## `startSubprocess()` API Changes
 
 The subprocess system has been migrated from `execa` to `tinyexec`.

package.json

@@ -38,7 +38,6 @@
 "@playwright/test": "catalog:cli",
 "@types/markdown-it": "catalog:types",
 "@types/node": "catalog:types",
-"@types/which": "catalog:types",
 "@types/ws": "catalog:types",
 "@unocss/eslint-config": "catalog:buildtools",
 "@vitejs/devtools-kit": "catalog:types",

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

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

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

@@ -2,6 +2,7 @@ import type { Import } from 'unimport'
 importtype{ModuleCustomTab}from'./custom-tabs'
 importtype{ServerRouteInfo,ServerRouteInput,ServerTaskInfo}from'./integrations'
 
+/** @deprecated Part of the removed `vscode` integration. */
 exporttypeCodeServerType='ms-code-cli'|'ms-code-server'|'coder-code-server'
 
 exportinterfaceModuleOptions{
@@ -19,8 +20,13 @@ export interface ModuleOptions {
  */
 customTabs?: ModuleCustomTab[]
 
+/** Code Server integration options. */
+codeServer?: CodeServerIntegrationOptions
+
 /**
- * VS Code Server integration options.
+ * Legacy VS Code Server integration options.
+ *
+ * @deprecated Use `codeServer`. Legacy modes are no longer supported.
  */
 vscode?: VSCodeIntegrationOptions
 
@@ -119,6 +125,40 @@ export interface ModuleOptions {
 telemetry?: boolean
 }
 
+exportinterfaceCodeServerIntegrationOptions{
+/**
+ * Enable the Code Server integration.
+ *
+ * @default true
+ */
+enabled?: boolean
+
+/** Path or command name for Coder's `code-server` binary. */
+bin?: string
+
+/** Workspace opened by Code Server. Defaults to the Nuxt root directory. */
+cwd?: string
+
+/** Port for the Code Server process. Defaults to the plugin's free-port behavior. */
+serverPort?: number
+
+/** Host for the Code Server process. Defaults to the plugin's loopback host. */
+host?: string
+
+/** Additional safe arguments passed to `code-server`. */
+args?: string[]
+
+/** Additional safe environment variables passed to `code-server`. */
+env?: Record<string,string>
+
+/** Suffix used to isolate the authenticated Code Server session cookie. */
+cookieSuffix?: string
+
+/** Milliseconds to wait for Code Server to become ready. */
+startTimeout?: number
+}
+
+/** @deprecated Use {@link CodeServerIntegrationOptions}. */
 exportinterfaceVSCodeIntegrationOptions{
 /**
  * Enable VS Code Server integration
@@ -171,6 +211,7 @@ export interface VSCodeIntegrationOptions {
 host?: string
 }
 
+/** @deprecated Tunnels are not supported by the Code Server integration. */
 exportinterfaceVSCodeTunnelOptions{
 /**
  * the machine name for port forwarding service

packages/devtools-kit/src/diagnostics.ts

@@ -69,7 +69,11 @@ export const diagnosticCodes = {
 why: (p: DeprecationParams)=>`\`${p.api}\` is deprecated.`,
 fix: (p: DeprecationParams)=>`Use \`${p.replacement}\` instead.`,
 },
-// NDT_DEP_0008 is reserved for the removed `vscode` module option.
+/** Removed `vscode` module option → `codeServer`. */
+NDT_DEP_0008: {
+why: (p: DeprecationParams)=>`\`${p.api}\` is deprecated and its legacy modes are no longer supported.`,
+fix: (p: DeprecationParams)=>`Use \`${p.replacement}\` instead. The legacy value is ignored rather than partially translated.`,
+},
 /** `getServerData()` RPC → the Data Inspector panel's `Nuxt Application` source. */
 NDT_DEP_0009: {
 why: (p: DeprecationParams)=>`\`${p.api}\` is deprecated.`,

packages/devtools-kit/test/diagnostics.test.ts

@@ -29,6 +29,7 @@ describe('diagnosticCodes', () => {
 'NDT_DEP_0005',
 'NDT_DEP_0006',
 'NDT_DEP_0007',
+'NDT_DEP_0008',
 'NDT_DEP_0009',
 ])
 })

packages/devtools/client/pages/modules/open-graph.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 importtype { NormalizedHeadTag } from'~/../src/types/ui-state'
 import { computedAsync, until } from'@vueuse/core'
+import { resolveTags } from'unhead/utils'
 import { computed, nextTick, ref } from'vue'
 import { definePageMeta } from'#imports'
 import { useClient, useClientHead, useClientRoute, useClientRouter } from'~/composables/client'
@@ -25,7 +26,7 @@ const head = useClientHead()
 const headTags =computedAsync(async () => {
 // eslint-disable-next-line ts/no-unused-expressions
 counter.value// for force refresh
-const tags =awaithead.value?.resolveTags()
+const tags =head.value?resolveTags(head.value) : []
 returntags.map((tag):NormalizedHeadTag=> {
 const props =tag.props|| {}
 if (tag.tag==='htmlAttrs'&&props.lang) {