VSCode集成ChatGPT实战指南：从零搭建AI编程助手

9次阅读

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

作为开发者，我们经常遇到这样的场景：在 VSCode 中编写代码时遇到问题，不得不切换到浏览器打开 ChatGPT 页面，粘贴代码片段，等待回答，然后再切换回编辑器。这种频繁的上下文切换不仅浪费时间，还容易打断编程思路。更糟糕的是，当处理复杂问题时，可能需要多次来回切换，导致效率低下和注意力分散。

在考虑如何集成 ChatGPT 到 VSCode 时，我们主要有两种选择：

独立客户端方案
优点：开发简单，独立于 IDE 运行
缺点：仍然需要切换窗口，无法深度集成编辑功能
VSCode 插件方案
优点：无缝集成到开发环境，支持快捷键调用，可以访问编辑器上下文
缺点：开发复杂度稍高

我们选择直接使用 OpenAI API 而非第三方封装库的原因：

更直接的版本控制和更新
更灵活的请求定制能力
避免中间层带来的额外延迟
更好的错误处理和调试能力

首先，确保你已经安装了 Node.js 和 VSCode。然后按照以下步骤创建插件项目：

安装 Yeoman 和 VSCode 扩展生成器
```
npm install -g yo generator-code
```
生成新项目
```
yo code
```
选择 ”New Extension (TypeScript)” 选项
安装 OpenAI 官方库
```
npm install openai
```

我们使用 VSCode 的 SecretStorage API 来安全存储 API 密钥：

import * as vscode from 'vscode';

async function setApiKey(context: vscode.ExtensionContext) {
  const key = await vscode.window.showInputBox({
    prompt: 'Enter your OpenAI API key',
    password: true
  });

  if (key) {await context.secrets.store('openai-api-key', key);
    vscode.window.showInformationMessage('API key stored securely');
  }
}

以下是处理 API 调用并实现指数退避重试的代码示例：

import {Configuration, OpenAIApi} from 'openai';

/**
 * 调用 ChatGPT API 并实现自动重试
 * @param prompt 输入的提示文本
 * @param maxRetries 最大重试次数
 * @param initialDelay 初始重试延迟(毫秒)
 */
async function callChatGPT(
  prompt: string,
  maxRetries = 3,
  initialDelay = 1000
): Promise<string> {
  const configuration = new Configuration({apiKey: await context.secrets.get('openai-api-key'),
  });

  const openai = new OpenAIApi(configuration);

  let retryCount = 0;

  while (retryCount <= maxRetries) {
    try {
      const response = await openai.createChatCompletion({
        model: 'gpt-3.5-turbo',
        messages: [{role: 'user', content: prompt}],
      });

      return response.data.choices[0].message?.content || '';
    } catch (error) {if (retryCount === maxRetries) {throw error;}

      const delay = initialDelay * Math.pow(2, retryCount);
      await new Promise(resolve => setTimeout(resolve, delay));
      retryCount++;
    }
  }

  return '';
}

实现代码补全需要注册一个 CompletionItemProvider：

vscode.languages.registerCompletionItemProvider('javascript', {async provideCompletionItems(document, position) {
    const linePrefix = document.getText(new vscode.Range(position.with(undefined, 0), position)
    );

    const suggestion = await callChatGPT(`Suggest code completion for: ${linePrefix}`
    );

    return [new vscode.CompletionItem(suggestion, vscode.CompletionItemKind.Method)];
  }
}, '.');

设计有效的错误诊断提示需要包含：

编程语言和框架信息
完整的错误消息
相关代码上下文
已经尝试过的解决方法

示例 prompt：

I'm getting this TypeScript error in my React component:

Error: TS2322: Type 'string' is not assignable to type 'number'.

Here's the relevant code:

interface Props {count: number;}

function Counter({count}: Props) {return <div>{count}</div>;
}

// Usage:
<Counter count="5" />  // Error occurs here

I've tried converting the prop to number using Number() but it didn't work.
What's the best way to fix this?

要实现上下文记忆，我们需要维护一个对话历史数组：

const conversationHistory: Array<{
  role: 'user' | 'assistant';
  content: string;
}> = [];

async function sendMessageWithContext(message: string) {conversationHistory.push({ role: 'user', content: message});

  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo',
    messages: conversationHistory,
  });

  const assistantReply = response.data.choices[0].message?.content || '';
  conversationHistory.push({role: 'assistant', content: assistantReply});

  // 限制历史记录长度以避免过多 token 消耗
  if (conversationHistory.length > 6) {conversationHistory.splice(0, 2);
  }

  return assistantReply;
}

OpenAI API 有每分钟请求限制（RPM）和每分钟 token 限制（TPM）。我们的指数退避算法已经能处理部分限制，但还可以优化：

监控响应头中的 x-ratelimit-remaining-requests 和x-ratelimit-remaining-tokens
当接近限制时，主动延迟请求
对于批量操作，实现请求队列

对于企业环境，我们需要过滤敏感信息：

function sanitizeInput(input: string): string {
  // 移除 API 密钥模式
  input = input.replace(/sk-[a-zA-Z0-9]{48}/g, '[REDACTED]');

  // 移除 IP 地址
  input = input.replace(/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/g, '[REDACTED]');

  // 移除特定业务关键词
  const sensitiveKeywords = ['password', 'secret', 'token'];
  sensitiveKeywords.forEach(keyword => {input = input.replace(new RegExp(`${keyword}=[^&\s]+`, 'gi'), `${keyword}=[REDACTED]`);
  });

  return input;
}

对于常见问题，我们可以实现本地缓存以避免重复 API 调用：

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

async function getCachedResponse(prompt: string): Promise<string> {const cacheKey = hashString(prompt);

  if (responseCache.has(cacheKey)) {return responseCache.get(cacheKey) || '';
  }

  const response = await callChatGPT(prompt);
  responseCache.set(cacheKey, response);

  // 限制缓存大小
  if (responseCache.size > 100) {const firstKey = responseCache.keys().next().value;
    responseCache.delete(firstKey);
  }

  return response;
}

401 Unauthorized: 检查 API 密钥是否正确且未过期
429 Too Many Requests: 实现更严格的速率限制处理
503 Service Unavailable: 添加服务不可用时的备用方案

对于可能产生长响应的请求：

设置合理的超时时间（建议 10-30 秒）
实现流式响应处理
提供取消请求的按钮

监控 API 使用情况：

let totalTokensUsed = 0;

function trackTokenUsage(response: any) {
  totalTokensUsed += response.data.usage?.total_tokens || 0;
  vscode.window.setStatusBarMessage(`Tokens used: ${totalTokensUsed}`);
}