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

10次阅读

没有评论

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

传统 IDE 在 AI 编程支持上存在明显局限性。大多数传统 IDE 缺乏灵活的扩展机制，无法深度集成第三方 AI 服务。相比之下，VS Code 的插件生态具有以下优势：

开放的扩展 API 体系，允许深度定制编辑器行为
活跃的开发者社区，提供丰富的参考案例
跨平台支持，确保插件能在不同环境中运行
轻量级架构，不会因 AI 功能引入明显性能损耗

ChatGPT API 与 Copilot 等现成方案相比，在以下维度存在差异：

协议灵活性 ：
ChatGPT API 提供原始 HTTP 接口
Copilot 使用专用二进制协议
成本效益 ：
ChatGPT 按 token 计费，适合低频使用场景
Copilot 采用订阅制，适合高频用户
扩展性 ：
ChatGPT 可自由调整 prompt 和模型参数
Copilot 功能相对固定

使用 TypeScript 开发 VS Code 扩展的基本结构如下：

// extension.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  // 注册命令
  const disposable = vscode.commands.registerCommand('extension.askChatGPT', async () => {// 实现逻辑});

  context.subscriptions.push(disposable);
}

实现带错误重试机制的 API 调用器：

/**
 * 封装 ChatGPT API 调用
 * @param prompt 输入的提示文本
 * @param maxRetries 最大重试次数
 */
async function callChatGPT(prompt: string, maxRetries = 3): Promise<string> {
  let retryCount = 0;

  while (retryCount < maxRetries) {
    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}]
        })
      });

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

      const data = await response.json();
      return data.choices[0].message.content;
    } catch (error) {
      retryCount++;
      if (retryCount >= maxRetries) throw error;

      // 指数退避
      await new Promise(resolve => 
        setTimeout(resolve, 1000 * 2 ** retryCount));
    }
  }

  throw new Error('超过最大重试次数');
}

采集代码上下文的典型实现：

function gatherContext() {
  const editor = vscode.window.activeTextEditor;
  if (!editor) return '';

  // 获取当前文档内容
  const document = editor.document;
  const fullText = document.getText();

  // 获取选中文本
  const selection = editor.selection;
  const selectedText = document.getText(selection);

  // 构造 prompt
  return ` 代码上下文:\n${fullText}\n\n 问题:\n${selectedText || '请解释这段代码'}`;
}

实现带指数退避的请求队列：