# 终端专家 ## 概述此技能提供了在 VS Code 扩展中实现终端功能的全面知识。它将 xterm.js 实现细节与 VS Code 的终端架构模式统一起来，确保与官方 VS Code 终端实现的一致性。 ## 何时使用此技能 * 创建和配置 xterm.js 终端实例 * 实现终端插件（fit、webgl、序列化、搜索等） * 与 VS Code WebView 集成 * 实现PTY（伪终端）进程管理 * 创建终端会话保持和恢复 * 处理键盘输入、IME 组合和鼠标事件 * 实现与 OSC 633 序列的 shell 集成 * 优化终端性能（GPU加速、缓冲） * 管理终端生命周期和资源清理 ## 快速参考 ### 基本插件插件 |套餐 |目的|加载中 ---|---|---|--- 健身插件 | `@xterm/addon-fit` |自动调整容器大小 |总是 Webgl插件| `@xterm/addon-webgl` | GPU 加速（30%+ 性能）|懒惰序列化插件 | `@xterm/addon-serialize` |会话保持 |懒惰搜索插件 | `@xterm/addon-search` |在终端中查找 |懒惰 Unicode11插件| `@xterm/addon-unicode11` |扩展 Unicode |配置网页链接插件 | `@xterm/addon-web-links` |可点击的 URL |配置图像插件| `@xterm/addon-image` |内嵌图像 |配置 ### 绩效目标运营|目标|注释 ---|---|--- 终端创建 | <500 毫秒 |包括 PTY 产卵会话恢复 | <3秒| 1000行回滚终端处置| <100 毫秒 |全面清理调整大小处理 | 100ms 去抖 |防止过多的呼叫输出缓冲| 16ms冲洗| ~60fps 渲染 ** ** ## xterm.js 实现 ### 基本终端设置从'@xterm/xterm'导入{终端}；从 '@xterm/addon-fit' 导入 { FitAddon }；从'@xterm/addon-webgl'导入{WebglAddon}；类终端管理器 { 私人终端：终端；私人fitAddon：FitAddon；私有容器：HTMLElement；构造函数（容器：HTMLElement）{ this.container = 容器； this.terminal = this.createTerminal(); this.fitAddon = new FitAddon(); } 私人createTerminal（）：终端{ 返回新终端({ // 外观 fontFamily: '“卡斯卡迪亚代码”、“Fira 代码”、等宽字体', 字体大小：14，行高：1.2，光标样式：'块'，光标闪烁：真， // 行为回滚：5000， altClickMovesCursor：true， // 性能 fastScrollModifier: 'alt', 平滑滚动持续时间：0， // 主题主题：{ 背景：'#1e1e1e'，前景：'#d4d4d4'，光标: '#d4d4d4', 选择背景：'#264f78' } }); } 初始化（）：无效{ this.terminal.loadAddon(this.fitAddon); this.terminal.open(this.container); this.fitAddon.fit(); this.setupResizeObserver(); } 私人setupResizeObserver（）：无效{ const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => this.fitAddon.fit()); }); resizeObserver.observe(this.container); } } ### 带后备功能的 WebGL 渲染器渲染管理器类 { 私人 webglAddon：WebglAddon |不明确的; 私人终端：终端；启用WebGL（）：布尔值{ 尝试{ this.webglAddon = new WebglAddon(); this.webglAddon.onContextLoss(() => { console.warn('WebGL 上下文丢失，回退到画布'); this.disableWebGL(); }); this.terminal.loadAddon(this.webglAddon); 返回真； } 捕获（错误）{ console.warn('WebGL 不可用:', error); 返回假； } } 禁用WebGL（）：无效{ this.webglAddon?.dispose(); this.webglAddon = 未定义； } } ### 使用 SerializeAddon 保持会话从'@xterm/addon-serialize'导入{SerializeAddon}；类 ScrollbackManager { 私有serializeAddon：SerializeAddon；私人终端：终端；构造函数（终端：终端）{ this.terminal = 终端； this.serializeAddon = new SerializeAddon(); this.terminal.loadAddon(this.serializeAddon); } saveScrollback(选项?: { 回滚?: 数字 }): 字符串 { 返回 this.serializeAddon.serialize({ 回滚：选项？.回滚？？ 1000, 排除模式：真，排除AltBuffer：true }); } RestoreScrollback（内容：字符串）：无效{ this.terminal.write(内容); } } ### 高频输出的输出缓冲类输出缓冲区{ 私人终端：终端；私有缓冲区： string = ''; 私人冲洗计划=假; 私有刷新间隔：数字；构造函数（终端：终端，flushInterval：数字= 16）{ this.terminal = 终端； this.flushInterval=flushInterval; } 写（数据：字符串）：无效{ this.buffer += 数据； // 检测高频输出 if (this.buffer.length > 10000) { this.flushInterval = 4; // AI 代理为 250fps } this.scheduleFlush(); } 私人scheduleFlush（）：无效{ if (!this.flushScheduled) { this.flushScheduled = true; setTimeout(() => this.flush(), this.flushInterval); } } 私人冲洗（）：无效{ if (this.buffer.length > 0) { this.terminal.write(this.buffer); this.buffer = ''; } this.flushScheduled = false; // 空闲后重置为正常频率 if (this.buffer.length === 0) { this.flushInterval = 16; } } } ** ** ## VS 代码集成 ### 多进程架构 ┌──────────────────────────────────────────────────────────────┐ │ 主要流程（电子） │ └────────────────────┬────────────────────────────────────────┘ ┌────────────┼────────────┬──────────────────┐ ▼ ▼ ▼ ▼ ┌──────────────┐ ┐────────────┐ ┌──────────────┐ ┐──────────────┐ │ 渲染器 │ │ 扩展 │ │ PTY 主机 │ │ 共享 │ │ 进程 │ │ 主机进程 │ │ 进程 │ │ 进程 │ ├──────────────┤ ├────────────┤ ├──────────────┤ ├──────────────┤ │ - 工作台 │ │ - 扩展 │ │ - PtyService │ │ - 扩展 │ │ - XtermTerm │ │ 执行 │ │ - node-pty │ │ mgmt │ │ - 用户界面 │ │ - ExtHost │ │ - Shell │ │ │ └──────────────┘ │ 终端 │ │ 进程 │ └──────────────┘ └──────────────┘ └──────────────┘ ### PTY Integration Pattern 从“node-pty”导入*作为pty；类终端进程{ 私有_ptyProcess：pty.IPty；构造函数（ shellPath: 字符串, args: string[], cwd：字符串， cols: number, 行：数量， env: { [键: 字符串]: 字符串 } ）{ this._ptyProcess = pty.spawn(shellPath, args, { 名称：'xterm-256color'，科尔斯，行，西德, 环境 }); this._ptyProcess.onData(data => this._onData.fire(data)); this._ptyProcess.onExit(({ exitCode }) => this._onExit.fire(exitCode)); } 写（数据：字符串）：无效{ this._ptyProcess.write(data); } resize(cols: number, rows: number): void { if (列 < 1 || 行 < 1) 返回; // 防止本机异常 this._ptyProcess.resize(cols, rows); } 关闭（）：无效{ this._ptyProcess.kill(); } } ### 流量控制（对性能至关重要） class FlowControlledProcess { private _unacknowledgedCharCount = 0; private _isPaused = false; private readonly HIGH_WATERMARK = 100000; private readonly LOW_WATERMARK = 5000; handleData(data: string): void { this._unacknowledgedCharCount += data.length; if (!this._isPaused && this._unacknowledgedCharCount > this.HIGH_WATERMARK) { this._ptyProcess.pause(); this._isPaused = true; } this._onData.fire(数据); } acknowledge(charCount: number): void { this._unacknowledgedCharCount -= charCount; if (this._isPaused && this._unacknowledgedCharCount <= this.LOW_WATERMARK) { this._ptyProcess.resume(); this._isPaused = false; } } } ** ** ## 输入处理 ### 键盘输入流程用户按键 → 浏览器键盘事件 → 自定义按键事件处理程序 → 检查 VS Code 按键绑定 ├─→ [匹配] → 执行命令，防止默认 └─→ [不匹配] → 传递到 xterm.js → 发出 onData → 写入 PTY ### 自定义密钥处理程序 Terminal.attachCustomKeyEventHandler((事件：KeyboardEvent) => { // Ctrl+C 用于复制（当存在选择时） if (event.ctrlKey && event.key === 'c' &&terminal.hasSelection()) { navigator.clipboard.writeText(terminal.getSelection()); 返回假； } // Ctrl+V 粘贴 if (event.ctrlKey && event.key === 'v') { navigator.clipboard.readText().then(text =>terminal.paste(text)); 返回假； } // Custom shortcuts if (event.ctrlKey && event.key === 'l') { 终端.clear(); 返回假； } 返回真； // 让 xterm.js 处理 }); ### IME 组合（CJK 输入） class IMEHandler { 私人_composition = false； handleCompositionStart(): void { this._compose = true； } handleCompositionEnd（文本：字符串）：void { this._compose = false； this._pty.write(text); } handleKeyDown(event: KeyboardEvent): boolean { if (this._composition) 返回 false； // Don't process during composition 返回真； } } ** ** ## 外壳集成 (OSC 633) ### 协议 OSC 633 ; A ST → Prompt start OSC 633 ; B ST → Command line start OSC 633； C ST → Command execution start OSC 633 ; D [; ] ST → Command finished OSC 633 ; ; <属性>=<值> ST → 设置属性 ### Shell 集成插件类 ShellIntegrationAddon 实现 ITerminalAddon { 激活（终端：终端）：无效{ Terminal.parser.registerOscHandler(633, 数据 => { const [code, ...params] = data.split(';'); 开关（代码）{ 案例“A”：this._handlePromptStart();返回真；情况“B”：this._handleCommandStart();返回真；案例“C”：this._handleExecutionStart();返回真；案例“D”： const exitCode = params[0] ？ parseInt(params[0]) : 未定义； this._handleCommandFinished(exitCode); 返回真； } 返回假； }); } } ** ** ## 生命周期管理 ### DisposableStore 模式（来自 VS Code）抽象类 Disposable 实现 IDisposable { 私有只读_store = new DisposableStore(); 私人_isDispose =假; protected _register(一次性: T): T { 如果（this._isDispose）{ 一次性.dispose(); 返回一次性物品； } 返回 this._store.add(disposable); } 处置（）：无效{ 如果（this._isDispose）返回； this._isDispose = true; this._store.dispose(); } } 类 DisposableStore 实现 IDisposable { 私有 readonly _toDispose = new Set(); 添加（一次性：T）：T { this._toDispose.add(一次性); 返回一次性物品； } 处置（）：无效{ // 为了安全起见，后进先出顺序 const items = Array.from(this._toDispose).reverse(); this._toDispose.clear(); items.forEach(item => item.dispose()); } } ** ** ## VS Code WebView 集成 ### 完整的集成示例类 XtermVSCodeIntegration { 私人终端：终端；私人 vscode：任何；私人fitAddon：FitAddon；构造函数（容器：HTMLElement）{ this.vscode = acquireVsCodeApi(); this.terminal = 新终端({ fontFamily: 'var(--vscode-editor-font-family)', 字体大小：14，主题：this.getVSCodeTheme() }); this.fitAddon = new FitAddon(); this.terminal.loadAddon(this.fitAddon); this.terminal.open(容器); this.fitAddon.fit(); this.setupCommunication(); } 私人 getVSCodeTheme(): ITheme { const style = getComputedStyle(document.body); 返回{ 背景： style.getPropertyValue('--vscode-terminal-background').trim() || style.getPropertyValue('--vscode-editor-background').trim(), 前景： style.getPropertyValue('--vscode-terminal-foreground').trim(), 光标：style.getPropertyValue('--vscode-terminalCursor-foreground').trim(), SelectionBackground: style.getPropertyValue('--vscode-terminal-selectionBackground').trim() }; } 私人 setupCommunication(): void { // 将输入发送到扩展 this.terminal.onData(数据 => { this.vscode.postMessage({ 类型: '输入', 数据 }); }); // 接收扩展的输出 window.addEventListener('消息', 事件 => { const 消息 = event.data; 开关（消息.类型）{ case '输出': this.terminal.write(message.data);打破； case 'resize': this.terminal.resize(message.cols, message.rows);打破； case 'clear': this.terminal.clear();打破；案例“焦点”：this.terminal.focus();打破； } }); this.vscode.postMessage({ type: 'ready' }); } } ** ** ## ANSI 转义序列参考常量 ANSI = { // 光标移动光标向上: (n: 数字) => `\x1b[${n}A`, 光标向下: (n: 数字) => `\x1b[${n}B`, 光标位置: (行: 数字, 列: 数字) => `\x1b[${row};${col}H`, // 擦除擦除行: '\x1b[2K', 擦除屏幕: '\x1b[2J', // 文本格式化重置：'\x1b[0m', 粗体：'\x1b[1m', 斜体：'\x1b[3m', 下划线：'\x1b[4m', // 颜色红色：'\x1b[31m', 绿色：'\x1b[32m', 黄色：'\x1b[33m', 蓝色：'\x1b[34m', // 256 种颜色 fg256: (n: 数字) => `\x1b[38;5;${n}m`, bg256: (n: 数字) => `\x1b[48;5;${n}m`, // 真彩色（24 位） fgRGB: (r: 数字, g: 数字, b: 数字) => `\x1b[38;2;${r};${g};${b}m`, bgRGB: (r: 数字, g: 数字, b: 数字) => `\x1b[48;2;${r};${g};${b}m`, // 屏幕模式替代屏幕：'\x1b[?1049h', 正常屏幕: '\x1b[?1049l', 隐藏光标: '\x1b[?25l', 显示光标：'\x1b[?25h' }; ** ** ## 参考文献详细参考文档： * `references/xterm-api.md` \- 完整的 xterm.js API 参考 * `references/vscode-terminal.md` \- VS Code 终端源参考 * `references/escape-sequences.md` \- ANSI 转义序列参考实施参考： * VS 代码存储库： * 终端源：`src/vs/workbench/contrib/terminal/` * xterm.js：

终端专家

包含技能