VS Code + ChatGPT插件开发实战：从零构建智能编程助手

8次阅读

没有评论

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

传统 IDE 插件在代码补全和问题诊断方面存在明显的局限性。开发者通常需要频繁切换窗口查阅文档，这不仅浪费时间，还打断了编程的连贯性。AI 编程助手的核心价值在于能够理解上下文，提供实时、准确的建议。

减少上下文切换 ：AI 助手可以直接在编辑器中提供建议，无需离开开发环境。
智能错误诊断 ：通过分析代码上下文，AI 可以更准确地识别潜在问题。
提升开发效率 ：自动补全和智能提示可以显著减少敲击键盘的次数。

选择 VS Code 插件开发而非 JetBrains 等平台，主要基于以下几点考虑：

开发门槛低 ：VS Code 的扩展 API 设计简洁，文档丰富。
跨平台支持 ：VS Code 在 Windows、macOS 和 Linux 上均有良好的表现。
社区活跃 ：VS Code 拥有庞大的开发者社区，插件生态成熟。

选择 ChatGPT API 而非本地模型的原因：

成本效益 ：本地模型需要大量计算资源，而 API 调用按需付费。
更新及时 ：OpenAI 会持续优化模型，开发者无需手动更新。
功能全面 ：ChatGPT API 支持多种任务，从代码补全到自然语言处理。

安装 VS Code 扩展生成器：
```
npm install -g yo generator-code
```
生成项目骨架：
```
yo code
```
选择 TypeScript 作为开发语言，并填写项目基本信息。

推荐使用 VS Code 的 SecretStorage API 来安全存储 API 密钥：

import * as vscode from 'vscode';

async function storeApiKey(context: vscode.ExtensionContext, key: string) {await context.secrets.store('openaiApiKey', key);
}

async function retrieveApiKey(context: vscode.ExtensionContext): Promise<string | undefined> {return await context.secrets.get('openaiApiKey');
}

使用 AbortController 来实现请求取消：

/**
 * 发送请求到 ChatGPT API 并处理流式响应
 * @param prompt 用户输入的提示
 * @param abortController 用于取消请求的控制器
 */
async function fetchChatGPTResponse(
  prompt: string,
  abortController: AbortController
): Promise<string> {const apiKey = await retrieveApiKey(context);
  if (!apiKey) {throw new Error('API key not found');
  }

  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [{role: 'user', content: prompt}],
        stream: true
      }),
      signal: abortController.signal
    });

    // 处理流式响应
    const reader = response.body?.getReader();
    let result = '';
    while (reader) {const { done, value} = await reader.read();
      if (done) break;
      result += new TextDecoder().decode(value);
    }
    return result;
  } catch (error) {if (error.name === 'AbortError') {console.log('Request aborted');
    } else {console.error('API request failed:', error);
    }
    throw error;
  }
}

为了防止频繁调用 API 导致速率限制，可以实施请求节流：

let lastRequestTime = 0;
const REQUEST_THROTTLE_MS = 1000; // 1 秒间隔

async function throttledRequest(prompt: string) {const now = Date.now();
  if (now - lastRequestTime < REQUEST_THROTTLE_MS) {
    await new Promise(resolve => 
      setTimeout(resolve, REQUEST_THROTTLE_MS - (now - lastRequestTime))
    );
  }
  lastRequestTime = Date.now();
  return fetchChatGPTResponse(prompt, new AbortController());
}

对于常见问题，可以使用简单的内存缓存：

const responseCache = new Map<string, string>();

async function getCachedResponse(prompt: string) {if (responseCache.has(prompt)) {return responseCache.get(prompt);
  }
  const response = await throttledRequest(prompt);
  responseCache.set(prompt, response);
  return response;
}

使用 Webview API 创建非阻塞的 UI：

vscode.window.createWebviewPanel(
  'chatGPTResponse',
  'ChatGPT 响应',
  vscode.ViewColumn.Beside,
  {enableScripts: true}
);

当遇到 API 速率限制时，使用指数退避重试：

async function fetchWithRetry(prompt: string, retries = 3) {
  let delay = 1000; // 初始延迟 1 秒
  for (let i = 0; i < retries; i++) {
    try {return await fetchChatGPTResponse(prompt, new AbortController());
    } catch (error) {if (error.response?.status === 429) {await new Promise(resolve => setTimeout(resolve, delay));
        delay *= 2; // 指数增加延迟时间
      } else {throw error;}
    }
  }
  throw new Error(`Failed after ${retries} retries`);
}

在发送请求前过滤敏感信息：

function sanitizeInput(input: string): string {
  // 移除 API 密钥等敏感信息
  return input.replace(/(?:password|api[_-]?key|secret)[=:][^\s&]+/gi, 
    '[REDACTED]'
  );
}

当前的实现主要基于简单的提示 - 响应模式。为了提供更精准的代码建议，可以考虑以下改进方向：