ChatGPT 中文版 VS Code 插件开发实战：从零搭建智能编程助手

1次阅读

没有评论

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

作为中文开发者，在使用 VS Code 进行编程时经常会遇到以下问题：

现有的代码补全工具对中文变量名、注释支持不佳
技术文档查询需要频繁切换窗口，打断编码流
复杂业务逻辑缺乏中文语境下的智能建议
错误提示和解决方案多为英文内容，理解成本高

传统解决方案如 IntelliCode 主要针对英文语境优化，在中文开发场景中存在明显局限。这正是我们需要开发基于 ChatGPT 中文版的智能插件的原因。

对比主流 AI 服务的开发体验：

本地大模型 ：
优点：数据隐私性好
缺点：需要高性能硬件，中文编程专业语料不足
其他云 API：
中文理解能力参差不齐
缺少针对编程场景的优化
ChatGPT 中文版 ：
出色中文语义理解
代码生成能力强
支持流式响应提升体验
API 稳定成熟

graph TD
    A[VS Code 插件] --> B[UI 交互层]
    A --> C[核心服务层]
    C --> D[API 通信模块]
    C --> E[缓存管理模块]
    C --> F[上下文收集模块]
    D --> G[ChatGPT API]

// src/services/chatgptService.ts
import axios from 'axios';
import {Configuration, OpenAIApi} from 'openai';

class ChatGPTService {
  private openai: OpenAIApi;

  constructor(apiKey: string) {
    const configuration = new Configuration({
      apiKey,
      baseOptions: {timeout: 10000 // 10 秒超时}
    });
    this.openai = new OpenAIApi(configuration);
  }

  async getCompletion(
    prompt: string,
    context?: string
  ): Promise<string> {
    try {
      const response = await this.openai.createChatCompletion({
        model: "gpt-3.5-turbo",
        messages: [
          {
            role: "system",
            content: "你是一位专业的编程助手，请用中文回答"
          },
          {
            role: "user",
            content: `${context ? context + '\n' : ''}${prompt}`
          }
        ],
        temperature: 0.7,
        stream: true // 启用流式响应
      });

      // 处理流式数据
      let fullContent = '';
      for await (const chunk of response.data) {const content = chunk.choices[0]?.delta?.content || '';
        fullContent += content;
        // 实时更新 UI
      }

      return fullContent;
    } catch (error) {console.error('API 请求失败:', error);
      throw new Error('获取建议时出错');
    }
  }
}

export default ChatGPTService;

注册补全提供者

// src/extension.ts
vscode.languages.registerCompletionItemProvider({ scheme: 'file', language: 'typescript'},
  new ChatGPTCompletionProvider(),
  '.' // 触发字符
);

实现上下文感知补全

class ChatGPTCompletionProvider implements vscode.CompletionItemProvider {
  async provideCompletionItems(
    document: vscode.TextDocument,
    position: vscode.Position
  ) {
    // 获取上下文代码
    const context = this.getSurroundingCode(document, position);

    // 调用 ChatGPT 服务
    const suggestion = await chatGPTService.getCompletion(
      "请为当前代码提供补全建议",
      context
    );

    // 转换建议为 VS Code 补全项
    return this.parseSuggestions(suggestion);
  }

  private getSurroundingCode(
    document: vscode.TextDocument,
    position: vscode.Position
  ): string {
    // 获取前后 50 行代码作为上下文
    const startLine = Math.max(0, position.line - 50);
    const endLine = Math.min(document.lineCount, position.line + 50);

    let context = '';
    for (let i = startLine; i < endLine; i++) {context += document.lineAt(i).text + '\n';
    }

    return context;
  }
}

实现请求取消机制

const controller = new AbortController();
setTimeout(() => controller.abort(), 10000); // 10 秒超时

await this.openai.createChatCompletion({
  // ... 其他参数
  signal: controller.signal
});

本地缓存实现

// 使用 lru-cache 实现
import LRU from 'lru-cache';

const cache = new LRU({
  max: 100, // 最大缓存数
  ttl: 1000 * 60 * 60 // 1 小时过期
});

function getCacheKey(prompt: string, context: string): string {return `${hash(prompt)}-${hash(context)}`;
}

使用 VS Code 的 SecretStorage

const secrets = context.secrets;

// 存储密钥
await secrets.store('chatgpt-api-key', apiKey);

// 获取密钥
const apiKey = await secrets.get('chatgpt-api-key');

实现密钥轮换机制

匿名化用户代码
禁用敏感数据上传
提供本地处理选项

调试技巧
使用 VS Code 调试器捕获 API 响应
记录完整请求 / 响应日志
模拟延迟测试 UI 响应

速率限制处理

// 指数退避重试
async function withRetry(fn: Function, retries = 3) {
  try {return await fn();
  } catch (error) {if (error.response?.status === 429 && retries > 0) {const delay = Math.pow(2, 4 - retries) * 1000;
      await new Promise(res => setTimeout(res, delay));
      return withRetry(fn, retries - 1);
    }
    throw error;
  }
}