VSCode ChatGPT 中文版插件开发实战：从零搭建到生产环境部署

7次阅读

共计 1947 个字符，预计需要花费 5 分钟才能阅读完成。

在中文环境下开发 AI 插件时，开发者常遇到几个典型问题：

编码转换延迟：中文字符在 UTF- 8 和 GBK 等编码间转换时产生额外开销
上下文丢失：传统插件往往无法有效维护多轮对话的上下文状态
API 响应慢：直接调用 OpenAPI 时，网络延迟和重试机制不完善导致用户体验差

采用分层架构设计，核心分为三个模块：

前端交互层：处理 VSCode 界面渲染和用户输入
API 代理层：封装 OpenAPI 调用，加入重试和缓存机制
缓存管理层：本地存储对话上下文和常用结果

flowchart TD
    A[前端交互层] -->| 用户输入 | B[API 代理层]
    B -->| 调用 | C[OpenAI API]
    C -->| 返回 | B
    B -->| 存储 | D[缓存管理层]
    D -->| 读取 | B

/**
 * 封装 OpenAI API 调用，支持自动重试
 * @param prompt 用户输入
 * @param maxRetries 最大重试次数（默认 3 次）* @returns Promise<Response>
 */
async function callWithRetry(
  prompt: string,
  maxRetries = 3
): Promise<Response> {
  let lastError;
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(API_ENDPOINT, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${API_KEY}`
        },
        body: JSON.stringify({prompt})
      });
      if (response.ok) return response;
      throw new Error(`HTTP ${response.status}`);
    } catch (error) {
      lastError = error;
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
  throw lastError;
}

// 在 VSCode Webview 中优化中文渲染
function renderMarkdown(content: string) {
  return content
    .replace(/\n\n/g, '<br><br>') // 处理中文段落换行
    .replace(/([^。！？])$/g, '$1'); // 避免标点折行
}

/**
 * 使用 VSCode 本地存储管理对话上下文
 * @implements 最近 5 轮对话的 LRU 缓存
 */
class ContextManager {
  private static MAX_ITEMS = 5;
  private storage: Memento;

  constructor(private context: ExtensionContext) {this.storage = context.globalState;}

  async addContext(prompt: string, response: string) {const history = this.getHistory();
    history.push({prompt, response, timestamp: Date.now() });
    if (history.length > ContextManager.MAX_ITEMS) {history.shift(); // 移除最旧记录
    }
    await this.storage.update('chat_history', history);
  }
}

测试对比两种流式响应方案（测试环境：100 次中文请求平均延迟）：