VSCode接入ChatGPT全指南：从插件配置到API调优

5次阅读

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

在 VSCode 中集成 AI 助手已经成为提升开发效率的重要手段，特别是在代码补全和错误诊断场景中。然而，实际使用过程中开发者常遇到以下问题：

OAuth2.0 认证流程复杂 ：每次启动都需要重新认证，影响开发效率
流式响应延迟 ：网络波动导致代码建议出现明显卡顿
多会话管理困难 ：不同文件 / 项目的对话上下文容易混淆

成本效益
ChatGPT API：按 token 计费（$0.002/1k tokens），适合低频自定义场景
Copilot：$10/ 月固定费用，适合高频标准化需求
功能扩展性
ChatGPT API 支持自定义 prompt 模板，可以针对特定框架优化
Copilot 提供开箱即用的通用代码补全
隐私安全
ChatGPT API 请求直接发送到 OpenAI 服务器
Copilot 数据需经过微软服务器中转

import * as vscode from 'vscode';

class ChatGPTCompletionProvider implements vscode.CompletionItemProvider {
  async provideCompletionItems(
    document: vscode.TextDocument,
    position: vscode.Position
  ): Promise<vscode.CompletionItem[]> {
    // 获取当前行文本
    const linePrefix = document.lineAt(position).text;

    // 调用 ChatGPT API
    const suggestions = await fetchCompletions(linePrefix);

    return suggestions.map(text => {const item = new vscode.CompletionItem(text);
      item.kind = vscode.CompletionItemKind.Snippet;
      return item;
    });
  }
}

// 注册提供器
context.subscriptions.push(
  vscode.languages.registerCompletionItemProvider(
    'javascript',
    new ChatGPTCompletionProvider(),
    '.' // 触发字符
  )
);

interface ApiConfig {
  apiKey: string;
  endpoint: string;
  tokenExpiry?: number;
}

class ChatGPTClient {
  private token?: string;
  private refreshTimeout?: NodeJS.Timeout;

  constructor(private config: ApiConfig) {this.scheduleRefresh();
  }

  private async refreshToken() {this.token = await fetchNewToken(this.config.apiKey);
    this.scheduleRefresh();}

  private scheduleRefresh() {if (this.refreshTimeout) clearTimeout(this.refreshTimeout);
    const expiry = this.config.tokenExpiry || 3600;
    this.refreshTimeout = setTimeout(() => this.refreshToken(), (expiry - 300) * 1000);
  }

  async query(prompt: string): Promise<string> {if (!this.token) throw new Error('Not authenticated');

    try {
      const response = await fetch(this.config.endpoint, {
        headers: {'Authorization': `Bearer ${this.token}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({prompt})
      });

      return await response.json();} catch (err) {console.error('API 请求失败:', err);
      throw err;
    }
  }
}

const ws = new WebSocket('wss://api.openai.com/v1/stream');

ws.onmessage = (event) => {const data = JSON.parse(event.data);
  // 逐步渲染到编辑器
  vscode.window.activeTextEditor?.edit(editBuilder => {editBuilder.insert(currentPosition, data.choices[0].text);
  });
};

interface CachedConversation {embeddings: number[];
  timestamp: number;
  context: string;
}

const MAX_CACHE_SIZE = 5;
const conversationCache: CachedConversation[] = [];

function addToCache(embedding: number[], context: string) {if (conversationCache.length >= MAX_CACHE_SIZE) {conversationCache.shift();
  }
  conversationCache.push({
    embeddings: embedding,
    timestamp: Date.now(),
    context
  });
}

async function queryWithRetry(prompt: string, retries = 3) {
  let delay = 1000; // 初始延迟 1 秒

  for (let i = 0; i < retries; i++) {
    try {return await client.query(prompt);
    } catch (err) {if (err.response?.status === 429) {await new Promise(res => setTimeout(res, delay));
        delay *= 2; // 指数退避
      } else {throw err;}
    }
  }
  throw new Error(` 请求失败，重试 ${retries} 次后仍不成功 `);
}

const SENSITIVE_PATTERNS = [/\b(?:password|api[_-]?key|secret)\s*[:=]\s*['\"].+?['\"]/gi,
  /\b\d{4}[-]?\d{4}[-]?\d{4}[-]?\d{4}\b/g // 信用卡号
];

function sanitizeInput(input: string): string {
  return SENSITIVE_PATTERNS.reduce((text, pattern) => text.replace(pattern, '[REDACTED]'),
    input
  );
}

graph TD
  A[VSCode 插件] --> B[认证模块]
  A --> C[API 客户端]
  A --> D[缓存管理]
  B --> E[OAuth2.0 流程]
  C --> F[HTTP/WebSocket]
  D --> G[本地存储]
  C --> H[OpenAI API]

安装 VS Code 扩展开发工具包
```
npm install -g yo generator-code
```
创建测试项目
```
yo code
```

添加性能测试脚本

describe('API 性能测试', () => {it('响应时间应小于 500ms', async () => {const start = Date.now();
    await client.query('console.log("Hello")');
    expect(Date.now() - start).toBeLessThan(500);
  });
});