# @devframes/plugin-code-server 中文文档

规范地址：https://npmcn.com/package/%40devframes/plugin-code-server/

版本：1\.3\.3
npm 元数据更新时间：2026-11-10T08:40:56.613Z
中文译文更新时间：2026-11-12T03:06:52.700Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40devframes/plugin-code-server
原文对照：https://npmcn.com/package/%40devframes/plugin-code-server/?lang=original
项目主页：https://github.com/devframes/devframe#readme
源码仓库：https://github.com/devframes/devframe

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：78.2 kB，20 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：vite ^8\.0\.0，devframe 1\.3\.3，@devframes/plugin-code-server--assets 1\.3\.3
- 首次发布：2026-07-06T05:08:43.679Z
- 最新版本发布：2026-11-10T08:40:56.196Z
- 近 30 天下载量：120859（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：67（近 12 个月 67 个）

## 中文简介

作为嵌入式编辑面板在浏览器中运行 VS 代码的 Devframe 插件.

## 安装

```sh
npm install @devframes/plugin-code-server
```

也可以使用：`pnpm add @devframes/plugin-code-server`、`yarn add @devframes/plugin-code-server`、`bun add @devframes/plugin-code-server`

## README

# @devframes/plugin-code-服务器

> 实验 这个devframe是实验性的,可能会在不发生重大版本突起的情况下改变,直到 它稳定.

运行 VS 在浏览器中代码为devframe面板. 编程检测到一个本地 编辑 二进制,按需发布,并将编辑器嵌入到 自动认证 `<iframe>`。发射器是一个 **阴道** SPA 建立在共享的基础上 `@antfu/design` 系统.

## 如何运作

-   **检测**:在启动时,它用 `--version`。 。 。 . 当找不到时,发射装置会制作安装指令,而不是 发射按钮.
-   **发射**: 启动器的按钮启动编辑器为管理的孩子 进程绑定到自由端口,范围被限制到工作空间。 探测到准备状态 在iframe装入之前.
-   **自动自动**:每一次发射和手产生新鲜的认证材料 给已授权的devframe客户端, 所以编辑器已经打开 签入. `code-server` 使用会话 cookie(`HASHED_PASSWORD`(三); `code serve-web` 使用 URL 上的连接符 (`?tkn=`) (中文(简体) ).

## 后端模式( M)

`mode: 'local'` (默认)将服务器嵌入此机; `backend` 选择它, 或让它未设置为自动检测( 偏好) `code-server`,则 `code serve-web`) (中文(简体) ).

| `backend` | 二进制 | 认证 |
| --- | --- | --- |
| `'code-server'` | 编码器 [`code-server`](https://github.com/coder/code-server) | 密码+会话 cookie |
| `'ms-code-serve-web'` | 微软 [`code serve-web`](https://code.visualstudio.com/docs/remote/vscode-server) | 连接令牌( e)`?tkn=`(中文(简体) ) |

`mode: 'tunnel'` 运行微软 `code tunnel` 并嵌入主机 `vscode.dev` 编辑。 第一次发射会显示一个设备记录提示 发射器; `vscode.dev` 处理认证.

## 使用量

### 独立的CLI

```sh
pnpx @devframes/plugin-code-server        # dev server + launcher
```

### 程序化

```ts
import { createCodeServerDevframe } from '@devframes/plugin-code-server'

export default createCodeServerDevframe({
  // backend: 'code-server' | 'ms-code-serve-web' (default: auto)
  // mode: 'local' | 'tunnel'
  // serverPort: 8080 (default: free port near 8080)
  // startOnBoot: true (default: on demand)
  // reuseExistingServer: true (adopt a server on the port)
  // tunnel: { name: 'my-box' }
})
```

### 虚拟主机

```ts
import { codeServerVite } from '@devframes/plugin-code-server/vite'

export default {
  plugins: [
    codeServerVite()
  ],
}
```

## 难民保护委员会

| 函数 | 类型 | 目的 |
| --- | --- | --- |
| `devframes:plugin:code-server:detect` | 查询 | 重新检测; 返回 `{ installed, version, bin, backend, mode }`。 。 。 . |
| `devframes:plugin:code-server:status` | 查询 | 当前状态 + 运行时连接描述符 . |
| `devframes:plugin:code-server:start` | 动作 | 发射等待准备. |
| `devframes:plugin:code-server:stop` | 动作 | 停止这个过程. |

状态(减去连接描述符)被反射到 `devframes:plugin:code-server:state` 反应式 UIs 的共享状态 .

## 用户

发射装置为Vue SPA(`src/spa`) (中文(简体) ). `LauncherView.vue` 纯洁, 状态驱动的视图与RPC脱钩,因此每个阶段都处于孤立状态,并且已经 故事书故事; `App.vue` 连接到它上 编辑器装入一个全天候、自动认证的iframe(`EditorFrame.vue`) (中文(简体) ).

```sh
pnpm storybook         # dev
pnpm build-storybook   # static build
```

故事:连接、未安装、发射、发射(服务器网络)、发射 -- -- 传感器、, 开始、 隧道登录和运行 `EditorFrame` (马克编辑).

## 常见问题

### @devframes/plugin-code-server 是什么？

作为嵌入式编辑面板在浏览器中运行 VS 代码的 Devframe 插件\.

### 如何安装 @devframes/plugin-code-server？

在项目目录运行 npm install @devframes/plugin-code-server，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：devframe（1\.3\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 devframe-code-server，可以用 npx devframe-code-server 直接运行。

### @devframes/plugin-code-server 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @devframes/plugin-code-server 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @devframes/plugin-code-server 可以商用吗？

@devframes/plugin-code-server 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @devframes/plugin-code-server 的下载量有多少？

根据 npm 官方下载统计，@devframes/plugin-code-server 在 2026/10/12 – 2026/11/10 这 30 天内被下载 120,859 次，日均约 4,029 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @devframes/plugin-code-server 还在维护吗？

最新版本 1\.3\.3 发布于 2026/11/10（1 天前）；至今共发布 67 个版本，其中过去 12 个月发布了 67 个；首次发布于 2026/07/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。