从零开始：将ChatGPT无缝接入VSCode的完整开发指南

1次阅读

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

在当今快节奏的开发环境中，开发者需要更智能的工具来提升生产力。将 ChatGPT 集成到 VSCode 中，可以实现代码补全、错误诊断、文档查询等多种功能，显著减少开发者的重复性工作。尤其是在处理复杂逻辑或新技术栈时，这种集成能提供即时的专业建议，帮助开发者更快地解决问题。

直接 API 调用：简单快捷，适合快速验证和开发。
本地模型部署：虽然响应速度快，但需要较高的硬件配置和模型优化能力。
混合模式：结合 API 调用和本地模型，平衡性能和成本。

对于大多数开发者来说，直接 API 调用是最优选择，因为其实现简单且维护成本低。

安装 Node.js 和 Yeoman。
使用 Yeoman 生成 VSCode 扩展项目模板。
配置package.json，定义扩展的入口和命令。

在 OpenAI 官网申请 API 密钥。
使用 axios 或fetch发起 HTTP 请求。
处理 API 响应，提取有用信息。

监听 VSCode 的代码变更事件。
将当前代码片段发送给 ChatGPT API。
解析返回的建议，并在编辑器中显示。

import * as vscode from 'vscode';
import axios from 'axios';

const API_KEY = 'your-api-key';
const API_URL = 'https://api.openai.com/v1/chat/completions';

export function activate(context: vscode.ExtensionContext) {const disposable = vscode.commands.registerCommand('extension.chatGPT', async () => {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {return;}

        const text = editor.document.getText(editor.selection);
        const response = await axios.post(API_URL, {
            model: 'gpt-3.5-turbo',
            messages: [{role: 'user', content: text}],
        }, {
            headers: {'Authorization': `Bearer ${API_KEY}`,
                'Content-Type': 'application/json',
            },
        });

        vscode.window.showInformationMessage(response.data.choices[0].message.content);
    });

    context.subscriptions.push(disposable);
}