ChatGPT VSCode 插件开发入门指南：从零搭建你的第一个 AI 助手

1次阅读

没有评论

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

作为一名开发者，我们经常需要在编码过程中快速查找文档、解决错误或者生成代码片段。传统方式是切换到浏览器搜索，但这样会打断工作流。如果能直接在 VSCode 中调用 ChatGPT，就能实现：

无需切换窗口即可获取 AI 辅助
通过自然语言描述自动生成代码
快速获得复杂概念的简单解释

优点：完全控制请求和响应流程
缺点：需要手动处理身份验证、请求重试等基础架构

优点：
与编辑器深度集成
可以添加自定义 UI 和交互
自动继承 VSCode 的配置系统
缺点：需要学习插件开发基础

安装 Node.js（建议 v16+）
全局安装 Yeoman 和 VSCode 插件生成器：
```
npm install -g yo generator-code
```
创建项目骨架：
```
yo code
```
选择 ”New Extension (TypeScript)”

生成的 package.json 中需要添加：

"activationEvents": ["onCommand:extension.askChatGPT"],
"contributes": {
    "commands": [{
        "command": "extension.askChatGPT",
        "title": "Ask ChatGPT"
    }]
}

安装官方 OpenAI 包：

npm install openai

创建 src/chatgpt.ts 服务层：

import {Configuration, OpenAIApi} from 'openai';

const config = new Configuration({apiKey: process.env.OPENAI_KEY});

const openai = new OpenAIApi(config);

export async function askGPT(prompt: string) {
    try {
        const response = await openai.createChatCompletion({
            model: "gpt-3.5-turbo",
            messages: [{role: "user", content: prompt}]
        });
        return response.data.choices[0].message?.content;
    } catch (error) {console.error("API Error:", error);
        return "Sorry, I encountered an error.";
    }
}

修改extension.ts:

import * as vscode from 'vscode';
import {askGPT} from './chatgpt';

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.commands.registerCommand(
        'extension.askChatGPT', 
        async () => {
            const prompt = await vscode.window.showInputBox({prompt: "Ask ChatGPT anything"});

            if (prompt) {const response = await askGPT(prompt);
                vscode.window.showInformationMessage(response || "No response");
            }
        }
    );

    context.subscriptions.push(disposable);
}