VSCode中ChatGPT插件开发实战：从零构建智能编程助手

10次阅读

没有评论

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

作为一名开发者，我经常在编写代码时遇到卡壳的情况。虽然市面上已经有一些 AI 编程助手，但它们往往存在几个问题：

通用性太强，缺乏针对特定技术栈的优化
无法与我的开发环境深度集成
对话历史管理不够智能
API 调用不够稳定，经常遇到超时或限流

这促使我决定自己开发一个 VSCode 插件，打造一个真正符合开发者需求的智能编程助手。

在选择 AI 服务时，我主要考虑了以下几个选项：

GPT-3.5/4：响应质量高，API 成熟稳定，但成本相对较高
Claude：对代码理解能力强，但 API 文档不够完善
本地部署的开源模型：数据隐私性好，但需要强大的硬件支持

最终我选择了 GPT-4 API，因为它在代码理解和生成方面表现优异，而且 OpenAI 提供了完善的 SDK 和文档。

首先需要设置插件的基本结构。在 package.json 中配置关键字段：

{
  "activationEvents": ["onCommand:chatgpt-plugin.explainCode"],
  "contributes": {
    "commands": [
      {
        "command": "chatgpt-plugin.explainCode",
        "title": "Explain Selected Code"
      }
    ]
  }
}

创建一个带认证和重试机制的 API 调用服务：

class ChatGPTService {
  private apiKey: string;
  private maxRetries = 3;

  constructor(apiKey: string) {this.apiKey = apiKey;}

  async sendMessage(prompt: string): Promise<string> {
    let retries = 0;

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

        if (!response.ok) throw new Error(`API Error: ${response.status}`);

        const data = await response.json();
        return data.choices[0].message.content;
      } catch (error) {
        retries++;
        if (retries >= this.maxRetries) throw error;
        await new Promise(resolve => setTimeout(resolve, 1000 * retries));
      }
    }
  }
}

为了实现智能的对话历史管理，我设计了一个上下文缓存系统：

class ContextManager {private conversationHistory: Array<{role: string, content: string}> = [];

  addToHistory(role: string, content: string) {this.conversationHistory.push({role, content});
    // 限制历史记录长度以防止 token 超限
    if (this.conversationHistory.length > 10) {this.conversationHistory.shift();
    }
  }

  getFullContext(): Array<{role: string, content: string}> {return [...this.conversationHistory];
  }

  clearHistory() {this.conversationHistory = [];
  }
}

下面是一个实现代码解释功能的完整示例：

import * as vscode from 'vscode';

class CodeExplainer {
  private chatGPTService: ChatGPTService;
  private contextManager: ContextManager;

  constructor(apiKey: string) {this.chatGPTService = new ChatGPTService(apiKey);
    this.contextManager = new ContextManager();}

  async explainSelectedCode() {
    try {
      const editor = vscode.window.activeTextEditor;
      if (!editor) {vscode.window.showErrorMessage('No active editor found');
        return;
      }

      const selection = editor.selection;
      const selectedText = editor.document.getText(selection);

      if (!selectedText) {vscode.window.showErrorMessage('No code selected');
        return;
      }

      const prompt = `Explain the following code:\n\n${selectedText}`;

      vscode.window.withProgress({
        location: vscode.ProgressLocation.Notification,
        title: 'Analyzing code...',
        cancellable: false
      }, async () => {const explanation = await this.chatGPTService.sendMessage(prompt);
        this.contextManager.addToHistory('user', prompt);
        this.contextManager.addToHistory('assistant', explanation);

        const panel = vscode.window.createWebviewPanel(
          'codeExplanation',
          'Code Explanation',
          vscode.ViewColumn.Beside,
          {});

        panel.webview.html = this.getWebviewContent(explanation);
      });
    } catch (error) {console.error('Error explaining code:', error);
      vscode.window.showErrorMessage('Failed to explain code. Please try again.');
    }
  }

  private getWebviewContent(explanation: string): string {
    return `
      <!DOCTYPE html>
      <html>
      <head>
        <style>
          body {padding: 10px; font-family: Arial, sans-serif;}
          pre {background: #f5f5f5; padding: 10px; border-radius: 5px;}
        </style>
      </head>
      <body>
        <h2>Code Explanation</h2>
        <pre>${explanation}</pre>
      </body>
      </html>
    `;
  }
}

我对不同大小的代码片段进行了测试，结果如下：

小片段(10-50 行)：平均响应时间 1.5- 3 秒
中等片段(50-200 行)：平均响应时间 3 - 5 秒
大片段(200+ 行)：平均响应时间 5 - 8 秒

对于频繁解释的代码片段，我实现了本地缓存：

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

async function getExplanation(code: string): Promise<string> {const cacheKey = hash(code);

  if (cache.has(cacheKey)) {return cache.get(cacheKey)!;
  }

  const explanation = await chatGPTService.sendMessage(code);
  cache.set(cacheKey, explanation);
  return explanation;
}

对于大模型的输出，实现流式处理可以显著提升用户体验：

async function streamResponse(prompt: string, callback: (chunk: string) => void) {
  const response = await fetch(apiEndpoint, {
    method: 'POST',
    headers: {/* ... */},
    body: JSON.stringify({
      model: 'gpt-4',
      messages: [{role: 'user', content: prompt}],
      stream: true
    })
  });

  const reader = response.body?.getReader();
  let result = '';

  while (reader) {const { done, value} = await reader.read();
    if (done) break;

    const chunk = new TextDecoder().decode(value);
    const lines = chunk.split('\n');

    for (const line of lines) {if (line.startsWith('data:') && !line.includes('[DONE]')) {const data = JSON.parse(line.substring(5));
        const content = data.choices[0]?.delta?.content;
        if (content) {
          result += content;
          callback(content);
        }
      }
    }
  }

  return result;
}