告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度在VS Code中结合Taotoken API快速构建一个智能代码补全小工具基础教程类本文面向有兴趣开发IDE插件的开发者指导如何利用Taotoken提供的标准OpenAI兼容API在VS Code扩展中调用多模型能力实现智能代码补全从申请API Key到编写一个简单的Node.js后端服务完成整个原型搭建。1. 准备工作获取Taotoken API Key与模型信息在开始编写代码之前你需要一个可用的Taotoken API Key。访问Taotoken平台注册并登录后在控制台的“API密钥”页面可以创建新的密钥。请妥善保管此密钥后续将作为访问凭证。接下来你需要确定要使用的模型。前往平台的“模型广场”浏览并选择适合代码生成任务的模型例如claude-sonnet-4-6或gpt-4o-mini。记下你选中的模型ID它将在API请求中作为model参数的值。2. 搭建一个简单的Node.js后端服务为了在VS Code扩展中安全地调用API一个常见的做法是构建一个轻量级的后端服务作为代理。这样可以将API密钥保存在服务端避免在前端代码中暴露。我们将使用Node.js和Express框架来快速实现。首先创建一个新的项目目录并初始化mkdir vscode-ai-completion-server cd vscode-ai-completion-server npm init -y然后安装必要的依赖npm install express axios cors dotenv创建一个.env文件来存储你的敏感信息TAOTOKEN_API_KEY你的_API_Key_在这里 PORT3000现在创建主服务文件server.jsconst express require(express); const axios require(axios); const cors require(cors); require(dotenv).config(); const app express(); const port process.env.PORT || 3000; // 使用CORS中间件允许VS Code扩展通常运行在本地的请求 app.use(cors()); app.use(express.json()); // 定义一个简单的健康检查端点 app.get(/, (req, res) { res.send(AI代码补全服务运行中); }); // 核心的代码补全请求端点 app.post(/api/completion, async (req, res) { const { prompt, model claude-sonnet-4-6 } req.body; if (!prompt) { return res.status(400).json({ error: 缺少提示词(prompt) }); } try { const response await axios.post( https://taotoken.net/api/v1/chat/completions, { model: model, messages: [ { role: user, content: 你是一个专业的代码助手。请根据以下上下文生成最合适的代码补全建议。上下文${prompt} } ], max_tokens: 200, temperature: 0.2, // 较低的温度值使输出更确定适合代码补全 }, { headers: { Authorization: Bearer ${process.env.TAOTOKEN_API_KEY}, Content-Type: application/json, }, } ); const completionText response.data.choices[0]?.message?.content || ; res.json({ completion: completionText }); } catch (error) { console.error(调用Taotoken API失败:, error.response?.data || error.message); res.status(500).json({ error: 获取补全失败, details: error.response?.data || error.message }); } }); app.listen(port, () { console.log(服务已启动监听端口: ${port}); });这个服务提供了一个/api/completion的POST接口它接收一个包含代码上下文prompt和可选模型IDmodel的请求体然后将其转发给Taotoken的OpenAI兼容端点并将结果返回给客户端。启动服务node server.js如果一切正常你将看到服务运行在http://localhost:3000。3. 创建VS Code扩展原型接下来我们创建一个最简单的VS Code扩展它通过我们刚搭建的后端服务来获取代码补全。首先确保你安装了VS Code和Node.js。然后使用Yeoman和VS Code扩展生成器来搭建项目骨架npm install -g yo generator-code yo code在生成器的交互式命令行中选择“New Extension (TypeScript)”并填写你的扩展名称等信息。生成项目后进入其目录。我们需要修改src/extension.ts文件实现一个简单的命令当用户选中一段代码作为上下文时可以触发AI补全。首先安装用于发起HTTP请求的库在扩展项目目录下npm install axios然后修改src/extension.tsimport * as vscode from vscode; import axios from axios; // 你的后端服务地址 const BACKEND_URL http://localhost:3000/api/completion; export function activate(context: vscode.ExtensionContext) { // 注册一个命令用于获取选中代码的AI补全 let disposable vscode.commands.registerCommand(aicompletion.getSuggestion, async () { const editor vscode.window.activeTextEditor; if (!editor) { vscode.window.showErrorMessage(没有活动的文本编辑器); return; } const selection editor.selection; const selectedText editor.document.getText(selection); // 如果没有选中文本则获取光标前的若干行作为上下文 let prompt selectedText; if (!prompt) { const line editor.document.lineAt(selection.active.line); const startLine Math.max(0, line.lineNumber - 5); const endLine line.lineNumber; const range new vscode.Range(startLine, 0, endLine, line.text.length); prompt editor.document.getText(range); } if (!prompt.trim()) { vscode.window.showWarningMessage(请提供一些代码作为上下文); return; } // 显示进度指示器 vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: 正在获取AI代码补全建议..., cancellable: false }, async (progress) { try { const response await axios.post(BACKEND_URL, { prompt: prompt, model: claude-sonnet-4-6 // 可以改为从配置中读取 }); const suggestion response.data.completion; if (suggestion) { // 将建议插入到光标位置 await editor.edit(editBuilder { editBuilder.insert(selection.active, suggestion); }); vscode.window.showInformationMessage(代码补全已插入); } else { vscode.window.showInformationMessage(未获得补全建议); } } catch (error: any) { vscode.window.showErrorMessage(请求失败: ${error.message}); } }); }); context.subscriptions.push(disposable); } export function deactivate() {}同时需要更新package.json文件注册我们刚刚创建的命令并绑定一个快捷键例如CtrlAltI。在package.json的contributes部分添加contributes: { commands: [{ command: aicompletion.getSuggestion, title: 获取AI代码补全 }], keybindings: [{ command: aicompletion.getSuggestion, key: ctrlalti, mac: cmdalti, when: editorTextFocus }] }4. 测试与运行现在你可以测试整个流程了。确保你的Node.js后端服务server.js正在运行。在VS Code中打开你的扩展项目按下F5键。这将启动一个新的“扩展开发宿主”窗口。在新的VS Code窗口中打开或创建一个代码文件。选中一段代码或者将光标放在你想获得补全的位置。按下你设置的快捷键例如CtrlAltI或者通过命令面板CtrlShiftP输入“获取AI代码补全”来执行命令。稍等片刻你应该能看到从AI模型返回的补全建议被插入到编辑器中了。5. 后续优化方向以上实现了一个最基础的原型。对于一个生产可用的工具你还可以考虑以下优化配置化将后端服务地址、默认模型、API Key等移至VS Code的设置中允许用户自定义。更智能的上下文收集不仅收集当前文件的内容还可以收集相关文件、项目结构信息甚至语言服务器的类型信息构造更精准的提示词。流式响应对于较长的补全可以改为使用流式API实现打字机效果提升用户体验。错误处理与重试增加更健壮的错误处理逻辑和重试机制。安全性在生产环境中后端服务应增加身份验证、请求频率限制等安全措施。通过Taotoken统一的OpenAI兼容API你可以轻松切换后端模型而无需大幅修改代码。只需在请求中更换model参数或在你的服务配置中指定不同的模型ID即可。这为探索不同模型在代码补全任务上的表现提供了便利。希望这篇教程能帮助你快速起步。要开始使用Taotoken的API你可以访问 Taotoken 获取API Key并查看完整的模型列表与文档。 告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度