VSCode中ChatGPT插件开发入门指南：从零搭建你的AI编程助手

8次阅读

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

作为一名程序员，我们经常会遇到需要快速查找代码片段、调试错误或理解复杂逻辑的情况。传统的做法是翻阅文档或搜索 Stack Overflow，但这往往耗时且效率不高。ChatGPT 这样的 AI 助手可以即时提供代码建议和解释，如果能直接集成到我们日常使用的 VSCode 中，将极大提升开发效率。

开发一个 VSCode ChatGPT 插件，可以实现以下实用功能：

代码自动补全与建议
错误诊断与修复建议
代码解释与文档生成
自然语言查询转换为代码

在开始开发之前，我们需要准备好以下工具和环境：

Node.js (建议 16.x 或更高版本)
VSCode (最新稳定版)
OpenAI API 密钥 (从 OpenAI 官网获取)
VSCode 扩展开发工具 (通过 VSCode 安装)

获取 OpenAI API 密钥的步骤：

访问 OpenAI 官网并登录
进入 API 密钥管理页面
点击 ”Create new secret key”
复制生成的密钥并妥善保存

一个基本的 VSCode 插件由以下几个核心部分组成：

package.json: 插件清单文件，定义插件元数据和功能
extension.ts: 插件主入口文件
src/: 存放源代码的目录
out/: 编译后的输出目录

插件生命周期包括：

激活(Activation): 当用户首次使用插件时触发
注册命令(Command Registration): 定义插件提供的功能
执行逻辑(Execution Logic): 实现具体功能
停用(Deactivation): 插件卸载或 VSCode 关闭时触发

我们需要安装openainpm 包来与 ChatGPT API 交互：

npm install openai

以下是一个完整的 extension.ts 文件示例，包含详细注释：

import * as vscode from 'vscode';
import {Configuration, OpenAIApi} from 'openai';

// 插件激活函数
export function activate(context: vscode.ExtensionContext) {
  // 注册命令
  let disposable = vscode.commands.registerCommand('extension.askChatGPT', async () => {
    // 获取用户输入
    const userInput = await vscode.window.showInputBox({
      prompt: '请输入您的问题或指令',
      placeHolder: '例如: 如何用 JavaScript 实现快速排序?'
    });

    if (!userInput) return;

    // 显示进度条
    vscode.window.withProgress({
      location: vscode.ProgressLocation.Notification,
      title: '正在向 ChatGPT 请求...',
      cancellable: false
    }, async () => {
      try {
        // 初始化 OpenAI 客户端
        const configuration = new Configuration({apiKey: process.env.OPENAI_API_KEY});
        const openai = new OpenAIApi(configuration);

        // 调用 ChatGPT API
        const response = await openai.createChatCompletion({
          model: 'gpt-3.5-turbo',
          messages: [{
            role: 'user',
            content: userInput
          }]
        });

        // 显示响应
        const answer = response.data.choices[0].message?.content;
        if (answer) {vscode.window.showInformationMessage(answer);
        }
      } catch (error) {vscode.window.showErrorMessage(` 请求失败: ${error}`);
      }
      return Promise.resolve();});
  });

  context.subscriptions.push(disposable);
}

// 插件停用函数
export function deactivate() {}