VSCode 中高效集成 ChatGPT 插件的技术实践与避坑指南

7次阅读

没有评论

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

在当今快节奏的开发环境中，AI 辅助编程工具如 ChatGPT 已经成为提升效率的利器。然而，将其集成到 VSCode 中并非易事，开发者常常面临以下挑战：

API 调用限制 ：免费账号的 API 调用次数有限，而付费账号的成本控制又需要精细管理
响应延迟 ：网络请求带来的延迟会影响编码的流畅性
代码隐私 ：将代码发送到第三方服务可能引发敏感信息泄露的担忧
上下文保持 ：在多轮对话中维持编程上下文需要额外处理

主流集成方案主要有三种：

官方 OpenAI API
优点：功能最全，更新及时，响应速度快
缺点：需要处理认证和计费，免费额度有限
第三方封装库
优点：简化了 API 调用，可能提供额外功能
缺点：依赖第三方维护，可能存在安全风险
自建代理服务
优点：完全控制，可以添加自定义逻辑
缺点：需要额外维护成本

经过综合比较，我们推荐使用官方 API+ 本地缓存的混合方案，既保证了功能完整性，又能优化用户体验。

首先创建一个基础的 VSCode 扩展项目：

npm install -g yo generator-code
yo code

选择 ”New Extension(TypeScript)” 模板。

安全存储 API Key 是关键。我们使用 VSCode 的 SecretStorage API：

import * as vscode from 'vscode';

class SecretsManager {
  private static _instance: SecretsManager;
  private _secretStorage: vscode.SecretStorage;

  private constructor(context: vscode.ExtensionContext) {this._secretStorage = context.secrets;}

  public static init(context: vscode.ExtensionContext): void {SecretsManager._instance = new SecretsManager(context);
  }

  public static async storeApiKey(key: string): Promise<void> {await this._instance._secretStorage.store('openai-api-key', key);
  }

  public static async getApiKey(): Promise<string | undefined> {return await this._instance._secretStorage.get('openai-api-key');
  }
}

创建一个处理 OpenAI API 调用的服务类：

import {Configuration, OpenAIApi} from 'openai';

export class OpenAIService {
  private openai: OpenAIApi;
  private apiKey: string;

  constructor(apiKey: string) {
    this.apiKey = apiKey;
    const configuration = new Configuration({apiKey});
    this.openai = new OpenAIApi(configuration);
  }

  async getCompletion(prompt: string): Promise<string> {
    try {
      const response = await this.openai.createCompletion({
        model: "text-davinci-003",
        prompt,
        max_tokens: 150,
        temperature: 0.7,
      });

      return response.data.choices[0].text || '';
    } catch (error) {console.error('OpenAI API error:', error);
      throw error;
    }
  }
}

在编辑器右侧创建一个 Webview 面板显示 AI 建议：

function createAIPanel(context: vscode.ExtensionContext) {
  const panel = vscode.window.createWebviewPanel(
    'aiAssistance',
    'AI 助手',
    vscode.ViewColumn.Beside,
    {enableScripts: true}
  );

  panel.webview.html = getWebviewContent();

  return panel;
}

function getWebviewContent(): string {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <style>
        body {padding: 10px; font-family: Arial;}
        .response {margin-top: 10px; white-space: pre-wrap;}
      </style>
    </head>
    <body>
      <h2>AI 代码建议 </h2>
      <div id="response" class="response"></div>
      <script>
        window.addEventListener('message', event => {const response = document.getElementById('response');
          response.innerHTML = event.data;
        });
      </script>
    </body>
    </html>
  `;
}

本地缓存 ：对常见问题的回答进行缓存

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

async function getCachedCompletion(prompt: string): Promise<string> {if (cache.has(prompt)) {return cache.get(prompt)!;
  }

  const response = await openaiService.getCompletion(prompt);
  cache.set(prompt, response);
  return response;
}

请求节流 ：避免快速连续发送请求

let lastRequestTime = 0;
const REQUEST_DELAY = 1000; // 1 秒

async function throttledRequest(prompt: string): Promise<string> {const now = Date.now();
  const timeSinceLastRequest = now - lastRequestTime;

  if (timeSinceLastRequest < REQUEST_DELAY) {
    await new Promise(resolve => 
      setTimeout(resolve, REQUEST_DELAY - timeSinceLastRequest)
    );
  }

  lastRequestTime = Date.now();
  return await openaiService.getCompletion(prompt);
}