VSCode内嵌ChatGPT实战：提升开发效率的智能编程助手解决方案

7次阅读

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

作为开发者，我们每天需要处理大量重复性工作：查阅文档、调试错误、编写样板代码。这些工作往往需要频繁切换窗口，打断编码思路。根据 2023 年开发者效率报告，平均每个开发者每天需要切换工具窗口 47 次，其中约 30% 的时间花在查找文档和示例代码上。

目前主流 AI 编程方案主要有三类：

云端托管服务（GitHub Copilot）
优点：开箱即用，无需配置
缺点：无法定制模型，存在隐私风险
本地模型部署（CodeLlama）
优点：数据完全本地化
缺点：硬件要求高，响应速度慢
API 集成方案（OpenAI ChatGPT）
优点：灵活可定制，平衡性能与隐私
缺点：需要处理 API 调用逻辑

使用 VSCode Extension Generator 初始化项目：

npm install -g yo generator-code
yo code

创建 chatService.ts 核心模块：

import fetch from 'node-fetch';

class ChatService {
  private apiKey: string;

  constructor(apiKey: string) {this.apiKey = apiKey;}

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

    const data = await response.json();
    return data.choices[0].message.content;
  }
}

在 extension.ts 中注册命令：

vscode.commands.registerCommand('extension.askAI', async () => {const prompt = await vscode.window.showInputBox();
  const response = await chatService.sendMessage(prompt);

  const panel = vscode.window.createWebviewPanel(
    'aiResponse', 
    'AI 助手',
    vscode.ViewColumn.Beside,
    {enableScripts: true}
  );

  panel.webview.html = renderMarkdown(response);
});

通过 VSCode 的 Memento API 保存会话历史：

const context = context.globalState;

// 保存会话
await context.update('chatHistory', [...(context.get('chatHistory') || []),
  {role: 'user', content: prompt}
]);

// 读取历史
const history = context.get('chatHistory') as Array<{role: string, content: string}>;

修改 API 调用实现逐字输出效果：

const response = await fetch(endpoint, {
  //... 其他参数
  body: JSON.stringify({
    stream: true
    //... 其他参数
  })
});

const reader = response.body.getReader();
while(true) {const {done, value} = await reader.read();
  if(done) break;
  panel.webview.html += new TextDecoder().decode(value);
}

本地缓存：对常见问题答案建立 LRU 缓存
请求合并：将连续快速请求合并为单个请求
预加载：在 IDE 启动时预加载基础模型

const cache = new Map<string, string>();

async function queryWithCache(prompt: string) {if(cache.has(prompt)) {return cache.get(prompt);
  }

  const result = await chatService.sendMessage(prompt);
  cache.set(prompt, result);
  return result;
}

API 密钥存储：使用 VSCode 的秘密存储功能

const secret = context.secrets;
await secret.store('openai-key', apiKey);

敏感代码过滤：实现关键词检测

const BLACKLIST = ['password', 'secret', 'api_key'];

function containsSensitiveInfo(text: string): boolean {
  return BLACKLIST.some(word => 
    text.toLowerCase().includes(word)
  );
}