在VS Code中结合Taotoken API快速构建AI代码助手插件-深圳市維司達科技有限公司

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度

在VS Code中结合Taotoken API快速构建AI代码助手插件

基础教程类，面向有兴趣开发VS Code扩展的开发者，教程将演示如何创建一个简单的插件，该插件通过调用Taotoken提供的OpenAI兼容接口，实现代码补全或解释功能，重点介绍插件中如何安全存储API Key，构造请求以及处理流式响应。

为VS Code开发一个AI辅助编程插件，可以显著提升开发效率。通过集成Taotoken平台，你可以在插件中便捷地调用多种大语言模型，而无需为每个模型单独处理复杂的接入流程。本教程将引导你创建一个基础插件，它能够将选中的代码发送给AI并获取解释或建议。

1. 初始化VS Code插件项目

首先，确保你的开发环境已安装Node.js和npm。打开终端，使用Yeoman和VS Code扩展生成器来搭建项目骨架。如果你尚未安装这些工具，可以通过npm install -g yo generator-code命令进行安装。

安装完成后，在合适的目录下运行yo code命令。在交互式命令行中，选择“New Extension (TypeScript)”选项来创建一个TypeScript项目。为你的插件命名，例如taotoken-code-helper，并按照提示填写描述、包名等信息。生成器会自动创建包含基础结构的项目目录，其中src/extension.ts是插件的主入口文件。

项目初始化后，你需要安装必要的依赖。除了VS Code扩展开发所需的@types/vscode和typescript，我们还需要一个HTTP客户端来调用API。这里我们选择常用的axios库。在项目根目录下运行npm install axios进行安装。

2. 配置Taotoken API连接

插件的核心功能是调用Taotoken的OpenAI兼容接口。首先，你需要获取API访问凭证。登录Taotoken控制台，在API密钥管理页面创建一个新的密钥。请妥善保管此密钥，我们将在插件中安全地使用它。

接下来，确定你要使用的模型。访问Taotoken模型广场，查看当前可用的模型列表及其对应的ID，例如claude-sonnet-4-6或gpt-4o-mini。记下你打算使用的模型ID。

在插件代码中，我们需要构造指向Taotoken的请求。这里有一个关键配置点：Base URL。对于使用OpenAI官方JavaScript/TypeScript SDK或兼容其接口的请求，baseURL应设置为https://taotoken.net/api。SDK会自动为我们拼接后续的路径，例如/v1/chat/completions。

下面是一个在插件中调用聊天补全接口的基本函数示例。我们将其放在src目录下的一个独立工具文件，例如taotokenClient.ts中。

// src/taotokenClient.ts import axios, { AxiosResponse } from 'axios'; // 从VS Code的配置或密钥管理服务中获取API Key和模型 // 此处仅为示例，实际应从安全存储中读取 const API_BASE_URL = 'https://taotoken.net/api'; const API_PATH_CHAT = '/v1/chat/completions'; export interface ChatMessage { role: 'system' | 'user' | 'assistant'; content: string; } export async function callTaotokenChatAPI( apiKey: string, modelId: string, messages: ChatMessage[], stream: boolean = false ): Promise<string> { const url = `${API_BASE_URL}${API_PATH_CHAT}`; try { const response: AxiosResponse = await axios.post( url, { model: modelId, messages: messages, stream: stream, }, { headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json', }, // 如果启用流式响应，需要单独处理 responseType: stream ? 'stream' : 'json', } ); if (!stream) { // 非流式响应，直接返回文本内容 const content = response.data?.choices?.[0]?.message?.content; return content || '未收到有效回复。'; } else { // 流式响应处理逻辑（下文详述） return await handleStreamResponse(response.data); } } catch (error: any) { console.error('调用Taotoken API失败:', error); throw new Error(`API请求错误: ${error.response?.data?.error?.message || error.message}`); } } // 处理非流式响应的辅助函数（流式处理见后续章节） async function handleStreamResponse(stream: any): Promise<string> { // 流式处理实现 return 'Stream response placeholder'; }

3. 实现插件命令与安全存储

我们需要在插件中注册一个命令，例如taotoken.explainCode，当用户在编辑器中选择一段代码并执行该命令时，插件会调用上述API函数。

首先，在package.json中声明命令和激活事件。

{ "contributes": { "commands": [ { "command": "taotoken.explainCode", "title": "Taotoken: 解释选中代码" } ] }, "activationEvents": [ "onCommand:taotoken.explainCode" ] }

然后，在extension.ts的activate函数中注册该命令的实现。

// src/extension.ts import * as vscode from 'vscode'; import { callTaotokenChatAPI } from './taotokenClient'; export function activate(context: vscode.ExtensionContext) { // 注册命令 let disposable = vscode.commands.registerCommand('taotoken.explainCode', async () => { const editor = vscode.window.activeTextEditor; if (!editor) { vscode.window.showWarningMessage('请在活动编辑器中选中代码。'); return; } const selection = editor.selection; const selectedText = editor.document.getText(selection); if (!selectedText.trim()) { vscode.window.showWarningMessage('未选中任何代码。'); return; } // 安全地获取API Key：优先从VS Code的机密存储中读取 const apiKey = await context.secrets.get('taotokenApiKey'); if (!apiKey) { // 如果未存储，则提示用户输入 const inputKey = await vscode.window.showInputBox({ prompt: '请输入您的Taotoken API Key', password: true, ignoreFocusOut: true, }); if (inputKey) { // 将密钥存储到VS Code管理的安全存储中 await context.secrets.store('taotokenApiKey', inputKey); await executeCodeExplanation(inputKey, selectedText, context); } return; } await executeCodeExplanation(apiKey, selectedText, context); }); context.subscriptions.push(disposable); } async function executeCodeExplanation(apiKey: string, code: string, context: vscode.ExtensionContext) { // 可以从配置中读取模型ID，这里使用一个默认值 const config = vscode.workspace.getConfiguration('taotoken'); const modelId = config.get<string>('defaultModel', 'claude-sonnet-4-6'); const messages = [ { role: 'system' as const, content: '你是一个资深的编程助手，请用简洁清晰的中文解释用户提供的代码片段的功能和逻辑。' }, { role: 'user' as const, content: `请解释以下代码：\n\`\`\`\n${code}\n\`\`\`` } ]; try { // 显示进度提示 await vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: '正在请求AI分析代码...', cancellable: false, }, async (progress) => { const explanation = await callTaotokenChatAPI(apiKey, modelId, messages, false); // 将结果输出到新的编辑器面板或信息通道 const outputChannel = vscode.window.createOutputChannel('Taotoken Code Helper'); outputChannel.show(); outputChannel.appendLine(`【代码解释】\n${explanation}\n`); }); } catch (error: any) { vscode.window.showErrorMessage(`请求失败: ${error.message}`); } }

为了提升用户体验，你还可以在package.json的contributes.configuration部分添加插件配置项，让用户可以在VS Code设置中指定默认的模型ID。

4. 处理流式响应与优化体验

对于需要实时显示AI思考过程的场景，例如代码补全，处理流式响应（Server-Sent Events）能带来更好的体验。修改之前的callTaotokenChatAPI函数，使其能够处理流式数据。

以下是处理流式响应的handleStreamResponse函数的一个简化实现示例。实际应用中，你可能需要结合VS Code的CancellationToken和更复杂的UI来展示流式文本。

// 在 taotokenClient.ts 中完善 handleStreamResponse import { Readable } from 'stream'; async function handleStreamResponse(stream: Readable): Promise<string> { return new Promise((resolve, reject) => { let fullContent = ''; stream.on('data', (chunk: Buffer) => { const lines = chunk.toString().split('\n').filter(line => line.trim() !== ''); for (const line of lines) { if (line.startsWith('data: ')) { const data = line.slice(6); // 去掉 'data: ' 前缀 if (data === '[DONE]') { stream.destroy(); // 流结束 resolve(fullContent); return; } try { const parsed = JSON.parse(data); const content = parsed.choices?.[0]?.delta?.content; if (content) { fullContent += content; // 这里可以触发事件，实时更新UI（如输出面板） } } catch (e) { // 忽略非JSON数据或解析错误 } } } }); stream.on('error', reject); stream.on('end', () => resolve(fullContent)); }); }

在插件命令中调用时，将callTaotokenChatAPI的stream参数设为true，并实时将收到的内容片段更新到输出通道或一个Webview面板中。

最后，别忘了在插件的deactivate函数中进行必要的清理工作。完成以上步骤后，你可以运行F5键在扩展开发宿主中调试你的插件。通过命令面板（Ctrl+Shift+P）执行你注册的命令，测试整个流程是否正常工作。

开发完成后，你可以使用VS Code的vsce工具打包并发布你的插件。通过将Taotoken作为统一的后端接口，你的插件能够轻松兼容平台上的多种模型，而用户只需管理一个API密钥。更多关于模型选择和API使用的细节，可以参考Taotoken官方文档。

希望这篇教程能帮助你启动自己的AI编程助手插件项目。你可以在此基础上增加更多功能，如代码重构建议、生成单元测试、文档字符串等。开始动手尝试，并前往Taotoken获取API Key和探索可用模型吧。

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度

在VS Code中结合Taotoken API快速构建AI代码助手插件