从零开始：如何把ChatGPT无缝接入VSCode的完整指南

3次阅读

没有评论

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

作为一名开发者，我们经常需要在编码过程中查找文档、解决 bug 或者优化代码结构。传统的方式是频繁切换浏览器搜索，效率低下且容易打断思路。将 ChatGPT 集成到 VSCode 中可以带来以下好处：

即时代码建议：在编写代码时获取智能补全
问题解答：无需离开编辑器就能解决技术问题
学习辅助：快速理解不熟悉的代码片段
效率提升：减少上下文切换，保持专注

在 VSCode 中集成 ChatGPT 主要有三种方式：

使用现有插件：
优点：开箱即用，无需开发
缺点：功能固定，无法定制
直接调用 API：
优点：完全控制，灵活性高
缺点：需要处理认证和错误
自定义扩展：
优点：可深度集成，用户体验好
缺点：开发成本较高

本文将重点介绍 自定义扩展 方案，因为它提供了最佳的平衡点。

访问 OpenAI 官网并登录
点击右上角头像 → “View API keys”
点击 ”Create new secret key”
复制生成的密钥并安全保存

安装 Node.js 和 Yeoman：
```
npm install -g yo generator-code
```
生成扩展骨架：
```
yo code
```
选择 ”New Extension (TypeScript)”
安装 OpenAI 官方库：
```
npm install openai
```

在 extension.ts 中添加以下代码：

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

// 1. 配置 OpenAI 客户端
const configuration = new Configuration({apiKey: process.env.OPENAI_API_KEY // 从环境变量获取});

const openai = new OpenAIApi(configuration);

// 2. 注册命令
export function activate(context: vscode.ExtensionContext) {let disposable = vscode.commands.registerCommand('extension.askChatGPT', async () => {
    // 获取用户输入
    const question = await vscode.window.showInputBox({
      prompt: '向 ChatGPT 提问',
      placeHolder: '输入你的问题...'
    });

    if (!question) return;

    // 显示进度条
    await vscode.window.withProgress({
      location: vscode.ProgressLocation.Notification,
      title: '正在查询 ChatGPT...'
    }, async () => {
      try {
        // 调用 API
        const response = await openai.createChatCompletion({
          model: 'gpt-3.5-turbo',
          messages: [{role: 'user', content: question}]
        });

        // 显示结果
        const answer = response.data.choices[0]?.message?.content;
        vscode.window.showInformationMessage(answer || '未获取到响应');
      } catch (error) {vscode.window.showErrorMessage(` 请求失败: ${error}`);
      }
    });
  });

  context.subscriptions.push(disposable);
}