VSCode 与 ChatGPT 集成开发指南：从零搭建智能编程助手

7次阅读

没有评论

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

在日常开发中，我们经常会遇到一些重复性的编码任务，比如编写样板代码、查找常见问题的解决方案、调试错误等。这些任务不仅耗时，而且容易让人感到疲惫。传统的解决方法包括：

频繁切换浏览器搜索解决方案
重复编写相似的代码结构
花费大量时间调试简单错误

这些问题严重影响了开发效率，而 AI 编程助手的出现为我们提供了一种全新的解决方案。

目前市面上主要有几种 AI 编程助手：

GitHub Copilot
优点：深度集成 VSCode，响应速度快
缺点：闭源，定制性差
Tabnine
优点：支持本地模型，隐私性好
缺点：免费版功能有限
ChatGPT API
优点：灵活性高，可定制性强
缺点：需要自己实现集成

对于想要深度定制 AI 助手的开发者来说，ChatGPT API 是最佳选择。

访问 OpenAI 官网注册账号
进入 API Keys 页面创建新密钥
记录下 API Key（注意保密）
查看 API 文档了解调用限制和定价

VSCode 扩展主要包含以下几个部分：

package.json：定义扩展元数据
extension.ts：主入口文件
其他资源文件

我们需要实现以下功能：

建立 HTTP 连接
构造符合 API 要求的请求
处理 API 响应
将结果展示在编辑器中

// extension.ts
import * as vscode from 'vscode';
import axios from 'axios';

// 扩展激活函数
export function activate(context: vscode.ExtensionContext) {
    // 注册命令
    let disposable = vscode.commands.registerCommand('extension.askChatGPT', async () => {
        // 获取当前编辑器内容
        const editor = vscode.window.activeTextEditor;
        if (!editor) {vscode.window.showErrorMessage('No active editor found!');
            return;
        }

        const selection = editor.selection;
        const selectedText = editor.document.getText(selection);

        try {
            // 调用 ChatGPT API
            const response = await callChatGPT(selectedText);

            // 在输出窗口显示结果
            vscode.window.showInformationMessage(response);
        } catch (error) {vscode.window.showErrorMessage(`Error calling ChatGPT: ${error}`);
        }
    });

    context.subscriptions.push(disposable);
}

// ChatGPT API 调用封装
async function callChatGPT(prompt: string): Promise<string> {const apiKey = vscode.workspace.getConfiguration().get('chatgpt.apiKey');
    if (!apiKey) {throw new Error('API key not configured');
    }

    const response = await axios.post(
        'https://api.openai.com/v1/chat/completions',
        {
            model: 'gpt-3.5-turbo',
            messages: [{
                role: 'user',
                content: prompt
            }],
            temperature: 0.7
        },
        {
            headers: {'Authorization': `Bearer ${apiKey}`,
                'Content-Type': 'application/json'
            }
        }
    );

    return response.data.choices[0].message.content;
}