VSCode插件开发实战：如何将ChatGPT无缝接入你的开发环境

2次阅读

没有评论

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

作为一名开发者，你是否经常遇到以下问题：

重复编写相似的样板代码，浪费大量时间
需要频繁查阅 API 文档，打断开发流程
遇到错误时，花费大量时间在 Stack Overflow 上寻找解决方案
想快速生成测试用例或文档，却无从下手

这些问题不仅降低了开发效率，还影响了编码的流畅性。AI 辅助开发的出现为我们提供了新的解决方案，特别是像 ChatGPT 这样的强大语言模型，可以理解上下文、生成代码、解释错误，甚至提供重构建议。

将 ChatGPT 集成到开发环境主要有两种方式：

直接调用 OpenAI API
优点：实现简单，不需要额外开发
缺点：需要频繁切换窗口，缺乏上下文集成
开发 VSCode 插件
优点：深度集成开发环境，保持工作流连贯
缺点：需要额外开发工作

考虑到开发效率的长期提升，我们选择第二种方式。通过 VSCode 插件，我们可以：

直接在编辑器内获取 AI 帮助
保持代码上下文的连贯性
自定义交互方式和功能

首先，我们需要创建一个基础的 VSCode 插件项目：

安装 Node.js 和 VSCode
运行 npm install -g yo generator-code 安装 Yeoman 和 VSCode 插件生成器
执行 yo code 创建新项目，选择 TypeScript 模板

我们需要封装 OpenAI API 的调用，使其易于在插件中使用。以下是关键实现步骤：

创建 chatgpt-service.ts 文件
实现 API 调用逻辑
添加上下文管理功能

import {Configuration, OpenAIApi} from 'openai';

class ChatGPTService {
  private openai: OpenAIApi;
  private conversationHistory: Array<{role: string, content: string}> = [];

  constructor(apiKey: string) {const configuration = new Configuration({ apiKey});
    this.openai = new OpenAIApi(configuration);
  }

  async sendMessage(prompt: string): Promise<string> {
    try {this.conversationHistory.push({role: 'user', content: prompt});

      const response = await this.openai.createChatCompletion({
        model: 'gpt-3.5-turbo',
        messages: this.conversationHistory,
        temperature: 0.7,
      });

      const reply = response.data.choices[0].message?.content || '';
      this.conversationHistory.push({role: 'assistant', content: reply});

      return reply;
    } catch (error) {console.error('Error calling ChatGPT API:', error);
      throw error;
    }
  }
}

export default ChatGPTService;

要实现代码补全，我们可以利用 VSCode 的 CompletionItemProvider 接口：

import * as vscode from 'vscode';
import ChatGPTService from './chatgpt-service';

class CodeCompletionProvider implements vscode.CompletionItemProvider {
  private chatGPTService: ChatGPTService;

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

  async provideCompletionItems(
    document: vscode.TextDocument, 
    position: vscode.Position
  ): Promise<vscode.CompletionItem[]> {const linePrefix = document.lineAt(position).text;

    try {
      const response = await this.chatGPTService.sendMessage(`Complete this code: ${linePrefix}`
      );

      return [new vscode.CompletionItem(response, vscode.CompletionItemKind.Method)];
    } catch (error) {return [];
    }
  }
}

为了避免 API 调用过于频繁导致费用过高，我们可以实现以下策略：