VSCode接入ChatGPT全指南：从零搭建智能编程助手

7次阅读

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

在编程过程中，我们经常遇到需要快速查找解决方案、优化代码或者理解复杂逻辑的情况。传统的搜索引擎虽然能提供帮助，但往往需要花费大量时间筛选信息。而 AI 编程助手能够直接理解我们的需求，提供针对性的建议，大大提高了开发效率。本文将详细介绍如何将 ChatGPT 集成到 VSCode 中，打造一个智能编程助手。

在开始之前，我们先来对比两种主要的实现方案：

官方 API 方案：直接调用 OpenAI 提供的 API 接口，优点是简单易用、功能强大，缺点是需要网络连接和支付 API 费用。
开源模型本地部署：如使用 LLaMA 等开源模型，优点是完全离线、隐私性好，缺点是对硬件要求高、效果可能不如官方 API。

对于大多数开发者来说，官方 API 方案是更实际的选择，本文也将采用这种方式。

首先，我们需要准备好开发环境：

安装最新版本的 VSCode
安装 Node.js（建议版本 16+）
安装 TypeScript（可以通过 npm install -g typescript 安装）
创建 VSCode 扩展项目：
```
npm install -g yo generator-code
yo code
```
选择 TypeScript 作为开发语言

安全地管理 API 密钥非常重要，我们不应该直接将密钥硬编码在代码中。推荐的做法是：

在项目根目录创建 .env 文件，添加：
```
OPENAI_API_KEY=your_api_key_here
```
在 .gitignore 中添加.env，防止密钥被意外提交

使用 dotenv 包来加载环境变量：

import * as dotenv from 'dotenv';
dotenv.config();

接下来，我们需要设置扩展的激活事件和注册命令：

在 package.json 中添加激活事件和命令：

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

在 extension.ts 中注册命令：

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {let disposable = vscode.commands.registerCommand('extension.askChatGPT', async () => {// 命令实现});
    context.subscriptions.push(disposable);
}

现在我们来实现核心的 API 调用功能：

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

interface ChatMessage {
    role: 'system' | 'user' | 'assistant';
    content: string;
}

async function callChatGPT(messages: ChatMessage[]): Promise<string> {
    try {
        const response = await axios.post(
            'https://api.openai.com/v1/chat/completions',
            {
                model: 'gpt-3.5-turbo',
                messages,
                stream: true
            },
            {
                headers: {'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
                    'Content-Type': 'application/json'
                },
                responseType: 'stream'
            }
        );

        let fullResponse = '';
        const outputChannel = vscode.window.createOutputChannel('ChatGPT');
        outputChannel.show();

        return new Promise((resolve, reject) => {response.data.on('data', (chunk: Buffer) => {const lines = chunk.toString().split('\n').filter(line => line.trim() !== '');
                for (const line of lines) {const message = line.replace(/^data: /, '');
                    if (message === '[DONE]') {resolve(fullResponse);
                        return;
                    }
                    try {const parsed = JSON.parse(message);
                        const content = parsed.choices[0].delta.content;
                        if (content) {
                            fullResponse += content;
                            outputChannel.append(content);
                        }
                    } catch (err) {// 忽略解析错误}
                }
            });

            response.data.on('error', (err: Error) => {reject(err);
            });
        });
    } catch (error) {vscode.window.showErrorMessage(` 调用 ChatGPT 失败: ${error}`);
        throw error;
    }
}

为了让对话更加连贯，我们可以添加简单的上下文记忆功能：

class ConversationManager {private messages: ChatMessage[] = [];

    constructor(private systemPrompt: string = '你是一个有帮助的编程助手') {
        this.messages.push({
            role: 'system',
            content: systemPrompt
        });
    }

    addUserMessage(content: string) {
        this.messages.push({
            role: 'user',
            content
        });
    }

    addAssistantMessage(content: string) {
        this.messages.push({
            role: 'assistant',
            content
        });
    }

    getMessages(): ChatMessage[] {return [...this.messages];
    }

    clear() {
        this.messages = [
            {
                role: 'system',
                content: this.systemPrompt
            }
        ];
    }
}

为了提高用户体验，我们可以实现以下优化：

请求节流：防止用户频繁发送请求

let isProcessing = false;

async function askChatGPT(question: string) {if (isProcessing) {vscode.window.showWarningMessage('请等待上一个请求完成');
        return;
    }

    isProcessing = true;
    try {// 调用 API} finally {isProcessing = false;}
}

令牌用量监控：跟踪 API 使用情况

function countTokens(text: string): number {
    // 简单估算：英文单词数 + 中文字符数
    const chineseChars = text.match(/[\u4e00-\u9fa5]/g)?.length || 0;
    const englishWords = text.split(/\s+/).filter(word => word.length > 0).length;
    return chineseChars + englishWords;
}

本地缓存：缓存常见问题的回答

import * as fs from 'fs';
import * as path from 'path';

const cachePath = path.join(context.globalStorageUri.fsPath, 'cache.json');

async function getCache(question: string): Promise<string | null> {
    try {const cache = JSON.parse(await fs.promises.readFile(cachePath, 'utf-8'));
        return cache[question] || null;
    } catch {return null;}
}

async function setCache(question: string, answer: string) {let cache = {};
    try {cache = JSON.parse(await fs.promises.readFile(cachePath, 'utf-8'));
    } catch {}

    cache[question] = answer;
    await fs.promises.writeFile(cachePath, JSON.stringify(cache));
}

处理用户数据时，我们需要特别注意安全：

敏感信息加密：使用加密库加密存储的 API 密钥

import {encrypt, decrypt} from 'simple-encryptor';

const encryptor = encryptor(process.env.ENCRYPTION_KEY || 'default-key');

function encryptData(data: string): string {return encryptor.encrypt(data);
}

function decryptData(encrypted: string): string {return encryptor.decrypt(encrypted);
}