VSCode 接入 ChatGPT 实战指南：从环境配置到智能编程助手

7次阅读

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

在日常开发中，我们经常遇到需要快速查找文档、调试代码或生成示例代码的场景。传统方式需要频繁切换浏览器搜索，效率低下且容易打断思路。AI 辅助编程可以实时提供代码建议、解释复杂逻辑甚至自动修复错误，显著提升开发体验。ChatGPT 作为当前最强大的语言模型之一，将其集成到 VSCode 中，能让开发者在不离开编辑器的情况下获得智能帮助。

REST API：
优点：实现简单，适合大多数场景
缺点：需要手动管理请求频率和状态
适用场景：一次性问答、代码补全
WebSocket：
优点：实时双向通信，适合持续对话
缺点：实现复杂度高
适用场景：需要保持上下文的聊天式交互
插件市场现有解决方案 ：
优点：开箱即用
缺点：定制性差，可能存在隐私风险

对于大多数开发者，我们推荐使用 REST API 方式，它在易用性和功能性之间取得了良好平衡。

获取 API 密钥：
登录 OpenAI 平台
在 API Keys 页面创建新密钥
安全存储密钥：
不要将密钥硬编码在代码中
使用环境变量或 VSCode 的 SecretStorage

// 示例：使用 VSCode 的 SecretStorage 保存 API 密钥
const secretStorage = context.secrets;
await secretStorage.store('openai-api-key', 'your-api-key');

创建插件项目：
安装 Yeoman 和 VSCode 插件生成器
运行 yo code 选择 TypeScript 模板
核心扩展点：
注册命令（contributes.commands）
添加上下文菜单（menus）
创建 Webview 面板

import fetch from 'node-fetch';

interface OpenAIResponse {
  choices: {
    message: {content: string;};
  }[];}

async function queryChatGPT(prompt: string): Promise<string> {
  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${await getApiKey()}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [{role: 'user', content: prompt}],
        temperature: 0.7
      })
    });

    if (!response.ok) {throw new Error(`API 请求失败: ${response.statusText}`);
    }

    const data = await response.json() as OpenAIResponse;
    return data.choices[0].message.content;
  } catch (error) {console.error('请求 ChatGPT 出错:', error);
    return '抱歉，处理您的请求时出错';
  }
}

下面是一个完整的 TypeScript 实现，包含注释说明：

import * as vscode from 'vscode';

// 激活插件时调用
export function activate(context: vscode.ExtensionContext) {
  // 注册命令
  const disposable = vscode.commands.registerCommand(
    'extension.askChatGPT', 
    async () => {
      // 获取用户输入
      const userInput = await vscode.window.showInputBox({
        prompt: '请输入您的问题',
        placeHolder: '例如：如何用 JavaScript 反转字符串？'
      });

      if (!userInput) return;

      // 显示进度条
      await vscode.window.withProgress({
        location: vscode.ProgressLocation.Notification,
        title: '正在查询 ChatGPT...',
        cancellable: false
      }, async () => {
        // 发送请求并显示结果
        const response = await queryChatGPT(userInput);
        vscode.window.showInformationMessage(response);
      });
    }
  );

  context.subscriptions.push(disposable);
}

使用 debounce 技术避免快速连续请求
限制最大请求频率（如每秒最多 1 次）

import {debounce} from 'lodash';

// 使用 debounce 包装请求函数
const debouncedQuery = debounce(queryChatGPT, 1000);

对常见问题缓存响应
设置合理的过期时间

// 简单缓存实现
const responseCache = new Map<string, {response: string; timestamp: number}>();

async function queryWithCache(prompt: string): Promise<string> {
  const CACHE_TTL = 60 * 60 * 1000; // 1 小时

  // 检查缓存
  const cached = responseCache.get(prompt);
  if (cached && Date.now() - cached.timestamp < CACHE_TTL) {return cached.response;}

  // 发送新请求
  const response = await queryChatGPT(prompt);
  responseCache.set(prompt, { response, timestamp: Date.now() });
  return response;
}

监控 API 使用量
设置使用限额
考虑使用更经济的模型（如 gpt-3.5-turbo）

自动过滤敏感信息（如 API 密钥、个人信息）
提供选项让用户确认是否发送代码片段

function sanitizeInput(input: string): string {
  // 简单示例：过滤看起来像密钥的字符串
  return input.replace(/[A-Za-z0-9]{32,}/g, '[FILTERED]');
}

维护对话历史数组
合理控制上下文长度（避免 token 超限）

const conversationHistory: Array<{
  role: 'user' | 'assistant';
  content: string;
}> = [];

async function queryWithContext(prompt: string) {conversationHistory.push({ role: 'user', content: prompt});

  // 只保留最近的 3 轮对话以避免超限
  const recentHistory = conversationHistory.slice(-6);

  const response = await queryChatGPT({
    model: 'gpt-3.5-turbo',
    messages: recentHistory
  });

  conversationHistory.push({role: 'assistant', content: response});
  return response;
}

针对常见任务预设模板
解析响应中的代码块并自动插入编辑器

// 在用户选择文本后提供 "优化此代码" 的上下文菜单
vscode.languages.registerCodeActionsProvider('javascript', {provideCodeActions(document, range) {const selectedText = document.getText(range);
    if (!selectedText) return;

    const action = new vscode.CodeAction(
      '✨ 使用 ChatGPT 优化代码',
      vscode.CodeActionKind.Refactor
    );

    action.command = {
      command: 'extension.optimizeCode',
      title: '优化代码',
      arguments: [selectedText]
    };

    return [action];
  }
});