VSCode免费ChatGPT插件开发指南：从零搭建AI编程助手

9次阅读

没有评论

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

商业 AI 编程助手如 GitHub Copilot 虽然强大，但存在两个主要痛点：

高昂的订阅费用 ：个人开发者长期使用成本较高
隐私风险 ：代码需上传至第三方服务器进行分析

开源方案能完美解决这些问题，让我们完全掌控 AI 运行环境和数据流向。

优点：响应快、结果质量稳定
缺点：需要 API Key（非完全免费）、有速率限制

优点：可本地部署、完全免费
缺点：需要本地 GPU 资源、模型效果略逊

对于本教程，我们选择 OpenAI API 方案，因其最适合快速验证原型。后期可轻松切换为开源模型。

先初始化一个最简单的插件项目：

npm install -g yo generator-code
yo code

选择 TypeScript 模板，生成基础项目结构。关键文件：

extension.ts：主入口文件
package.json：插件配置清单

AI 编程助手的核心是保持对话记忆。我们使用数组存储历史消息：

interface ChatMessage {
  role: 'user' | 'assistant';
  content: string;
}

class ChatContext {private history: ChatMessage[] = [];

  addUserMessage(content: string) {this.history.push({ role: 'user', content});
  }

  addAssistantMessage(content: string) {this.history.push({ role: 'assistant', content});
  }

  getContext(): ChatMessage[] {return [...this.history];
  }
}

好的 prompt 能显著提升代码建议质量。我们使用以下模板：

const generatePrompt = (code: string, language: string) => {return ` 你是一位专业的 ${language} 开发助手。请分析以下代码并给出改进建议：${code}

建议请按以下格式给出：1. 问题描述
2. 修改建议
3. 优化后的代码 `;
};

使用 OpenAI 的 streaming API 实现逐字输出
前端添加加载状态指示器
设置合理的超时时间（建议 10-15 秒）

import {encode} from 'gpt-tokenizer';

const countTokens = (text: string) => {return encode(text).length;
};

// 对话历史裁剪
const MAX_TOKENS = 4000;
function trimHistory(history: ChatMessage[]) {
  let total = 0;
  const reversed = [...history].reverse();

  return reversed.filter(msg => {total += countTokens(msg.content);
    return total <= MAX_TOKENS;
  }).reverse();}

实现指数退避重试机制
添加请求队列
客户端缓存常见请求结果

async function callWithRetry<T>(fn: () => Promise<T>, maxRetries = 3) {
  let retries = 0;

  while (retries < maxRetries) {
    try {return await fn();
    } catch (error) {if (error.response?.status === 429) {const delay = Math.pow(2, retries) * 1000;
        await new Promise(resolve => setTimeout(resolve, delay));
        retries++;
      } else {throw error;}
    }
  }

  throw new Error(`Max retries (${maxRetries}) exceeded`);
}

提供本地处理模式开关
敏感文件自动识别过滤
支持自定义黑名单

以下是一个最小可行实现的核心代码：

// extension.ts
import * as vscode from 'vscode';
import {Configuration, OpenAIApi} from 'openai';

export function activate(context: vscode.ExtensionContext) {
  const config = new Configuration({apiKey: vscode.workspace.getConfiguration().get('openai.apiKey')
  });
  const openai = new OpenAIApi(config);
  const chatContext = new ChatContext();

  let disposable = vscode.commands.registerCommand('extension.askAI', async () => {
    const editor = vscode.window.activeTextEditor;
    if (!editor) return;

    const selection = editor.document.getText(editor.selection);
    chatContext.addUserMessage(selection);

    try {const response = await callWithRetry(() => 
        openai.createChatCompletion({
          model: "gpt-3.5-turbo",
          messages: trimHistory(chatContext.getContext()),
          temperature: 0.7,
          stream: true
        })
      );

      chatContext.addAssistantMessage(response.data.choices[0].message?.content || '');

      // 在输出通道显示结果
      const outputChannel = vscode.window.createOutputChannel('AI 助手');
      outputChannel.appendLine(response.data.choices[0].message?.content || '');
      outputChannel.show();} catch (error) {vscode.window.showErrorMessage(` 请求失败: ${error}`);
    }
  });

  context.subscriptions.push(disposable);
}

要实现多模型支持，可以：

定义统一的模型接口
使用策略模式动态切换
添加模型健康检查

interface AIModel {generate(prompt: string): Promise<string>;
  getModelName(): string;}

class OpenAIModel implements AIModel {// 实现 OpenAI 专用逻辑}

class LocalAIModel implements AIModel {// 实现本地模型逻辑}

class ModelRouter {private models: AIModel[] = [];

  registerModel(model: AIModel) {this.models.push(model);
  }

  async routeRequest(prompt: string) {for (const model of this.models) {
      try {return await model.generate(prompt);
      } catch (error) {console.error(`${model.getModelName()} failed:`, error);
      }
    }
    throw new Error('All models failed');
  }
}

通过本教程，我们实现了一个具备基础功能的 VSCode ChatGPT 插件。关键收获：