VS Code与通义千问1.5-1.8B模型联动：打造个性化AI编程插件

VS Code与通义千问1.5-1.8B模型联动打造个性化AI编程插件1. 引言你有没有过这样的经历写代码卡壳时想找个AI助手问问却不得不在浏览器和编辑器之间来回切换打断思路。或者你对市面上现成的AI编程插件不太满意总觉得它们不够懂你的代码上下文或者功能太臃肿。其实打造一个完全属于你自己的、深度集成在VS Code里的AI编程助手并没有想象中那么难。今天我们就来动手做这件事。我们将利用VS Code强大的扩展API结合一个本地部署的通义千问轻量级模型比如1.5B或1.8B版本创建一个最小可用的AI编程插件。这个插件能做什么呢简单来说你可以在编辑器里选中一段代码或者直接输入一个问题插件会悄悄地把内容发送给你本地的模型服务然后把模型的回答——无论是代码解释、优化建议还是生成新代码——直接显示在VS Code里。整个过程无缝衔接就像在编辑器里多了一个随时待命的编程伙伴。2. 准备工作与环境搭建在开始敲代码之前我们需要把“舞台”搭好。这主要分为两部分一是确保本地有一个能响应请求的通义千问模型服务二是在你的电脑上配置好VS Code的插件开发环境。2.1 本地模型服务准备首先你需要一个正在运行的、提供API接口的通义千问模型。通常这类模型会提供一个兼容OpenAI API格式的接口或者有自己特定的WebUI和API端点。假设你已经通过某种方式比如使用预置的Docker镜像在本地部署了通义千问并且它正在http://localhost:8000这个地址上运行提供了一个/v1/chat/completions这样的API端点用于对话。这是后续插件能够与之对话的前提。请确保你能通过类似curl的命令或者浏览器访问到它的API文档或测试界面。2.2 VS Code插件开发环境配置VS Code插件是用TypeScript或JavaScript写的。我们需要安装必要的工具。安装Node.js和npm确保你的系统安装了Node.js建议LTS版本和包管理器npm。你可以在终端输入node --version和npm --version来检查。安装Yeoman和VS Code扩展生成器这是微软官方推荐的快速创建插件脚手架的工具。打开终端运行以下命令npm install -g yo generator-code生成插件项目找一个合适的目录运行yo code。你会看到一个交互式命令行界面。选择New Extension (TypeScript)。输入你的插件名称比如my-qwen-coder。输入一个标识符identifier比如qwen-coder。填写描述例如 “A personal AI coding assistant powered by Qwen”。后续关于初始化Git仓库、包管理器选择等问题根据你的喜好选择即可通常直接按回车用默认选项就行。命令执行完后你会得到一个完整的插件项目文件夹。用VS Code打开这个文件夹你会发现里面已经包含了package.json、src/extension.ts等核心文件。3. 核心功能设计与实现我们的插件核心流程很简单获取用户输入选中的代码或输入的问题→ 调用本地模型API → 处理并显示结果。下面我们来一步步实现。3.1 创建插件命令与用户界面我们需要在VS Code中注册一个命令并提供一个地方让用户输入问题或查看答案。一个简单的方式是创建一个Webview面板作为交互界面。首先打开src/extension.ts文件。这是插件的入口点。activate函数是插件激活时执行的地方。我们修改它注册一个命令来打开我们的自定义面板import * as vscode from vscode; export function activate(context: vscode.ExtensionContext) { // 注册一个命令命令ID在package.json里定义 let disposable vscode.commands.registerCommand(qwen-coder.askAI, () { // 创建并显示一个Webview面板 const panel vscode.window.createWebviewPanel( qwenCoder, // 内部标识 Qwen编程助手, // 面板标题 vscode.ViewColumn.Beside, // 在编辑器旁边打开 { enableScripts: true, // 允许在Webview中运行JavaScript retainContextWhenHidden: true // 面板隐藏时保持状态 } ); // 设置Webview的HTML内容下一步实现 panel.webview.html getWebviewContent(); }); context.subscriptions.push(disposable); } function getWebviewContent(): string { // 返回一个简单的HTML界面 return !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleQwen助手/title style body { padding: 10px; font-family: var(--vscode-font-family); } #question { width: 100%; height: 60px; margin-bottom: 10px; } #response { border: 1px solid #ccc; padding: 10px; min-height: 200px; margin-top: 10px; white-space: pre-wrap; } button { padding: 8px 16px; } /style /head body h3向Qwen提问/h3 textarea idquestion placeholder输入你的问题或先选中编辑器中的代码再点击下方按钮.../textarea div button onclickaskWithSelection()使用选中代码提问/button button onclickaskWithText()发送文本提问/button /div div idresponse等待响应.../div script const vscode acquireVsCodeApi(); // 获取VS Code中选中的文本 function askWithSelection() { vscode.postMessage({ command: getSelection }); } // 发送文本框中的文本 function askWithText() { const text document.getElementById(question).value; vscode.postMessage({ command: ask, text: text }); } // 处理来自扩展程序的消息用于更新响应区域 window.addEventListener(message, event { const message event.data; if (message.command updateResponse) { document.getElementById(response).textContent message.text; } }); /script /body /html ; }同时我们需要在package.json中声明这个命令和激活事件{ activationEvents: [ onCommand:qwen-coder.askAI ], contributes: { commands: [ { command: qwen-coder.askAI, title: Ask Qwen AI } ], menus: { editor/context: [ { command: qwen-coder.askAI, group: navigation } ] } } }这样在编辑器中右键菜单就会出现“Ask Qwen AI”的选项。3.2 实现与模型API的通信这是插件的“大脑”。我们需要在扩展的后端Node.js环境中处理来自Webview的请求并调用本地通义千问的API。首先安装一个用于HTTP请求的库比如axioscd your-extension-folder npm install axios然后我们修改extension.ts完善消息处理和API调用逻辑import * as vscode from vscode; import axios from axios; // 引入axios // 你的本地模型API地址根据实际情况修改 const API_BASE_URL http://localhost:8000/v1; const MODEL_NAME qwen1.5-1.8b-chat; // 根据你的模型名称修改 export function activate(context: vscode.ExtensionContext) { let disposable vscode.commands.registerCommand(qwen-coder.askAI, () { const panel vscode.window.createWebviewPanel( qwenCoder, Qwen编程助手, vscode.ViewColumn.Beside, { enableScripts: true, retainContextWhenHidden: true } ); panel.webview.html getWebviewContent(); // 处理来自Webview的消息 panel.webview.onDidReceiveMessage( async message { switch (message.command) { case getSelection: // 获取当前编辑器中选中的文本 const editor vscode.window.activeTextEditor; let selectedText ; if (editor) { selectedText editor.document.getText(editor.selection); } // 将选中的文本设置到Webview的输入框 panel.webview.postMessage({ command: setQuestion, text: selectedText }); break; case ask: // 调用AI模型 const userQuestion message.text; if (!userQuestion.trim()) { panel.webview.postMessage({ command: updateResponse, text: 问题不能为空哦~ }); return; } // 显示“思考中” panel.webview.postMessage({ command: updateResponse, text: Qwen正在思考... }); try { const aiResponse await callQwenAPI(userQuestion); panel.webview.postMessage({ command: updateResponse, text: aiResponse }); } catch (error: any) { panel.webview.postMessage({ command: updateResponse, text: 调用失败: ${error.message}。请检查模型服务是否启动地址是否为 ${API_BASE_URL} }); } break; } }, undefined, context.subscriptions ); }); context.subscriptions.push(disposable); } // 调用通义千问API的核心函数 async function callQwenAPI(userInput: string): Promisestring { // 构建请求体格式需匹配你的模型API要求 const requestBody { model: MODEL_NAME, messages: [ { role: user, content: 你是一个专业的编程助手。请回答以下问题或处理以下代码\n\n${userInput} } ], max_tokens: 1024, temperature: 0.7, }; const endpoint ${API_BASE_URL}/chat/completions; const response await axios.post(endpoint, requestBody, { headers: { Content-Type: application/json }, timeout: 60000 // 超时时间设为60秒 }); // 解析响应获取模型返回的文本 // 注意响应结构需要根据你的API实际返回格式调整 if (response.data response.data.choices response.data.choices.length 0) { return response.data.choices[0].message.content.trim(); } else { throw new Error(API返回格式异常); } } // getWebviewContent函数也需要稍作修改以支持设置输入框内容 function getWebviewContent(): string { return !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleQwen助手/title style/* ... 样式同上略 ... *//style /head body h3向Qwen提问/h3 textarea idquestion placeholder输入你的问题或先选中编辑器中的代码再点击下方按钮.../textarea div button onclickaskWithSelection()使用选中代码提问/button button onclickaskWithText()发送文本提问/button /div div idresponse等待响应.../div script const vscode acquireVsCodeApi(); function askWithSelection() { vscode.postMessage({ command: getSelection }); } function askWithText() { const text document.getElementById(question).value; vscode.postMessage({ command: ask, text: text }); } window.addEventListener(message, event { const message event.data; switch(message.command) { case updateResponse: document.getElementById(response).textContent message.text; break; case setQuestion: document.getElementById(question).value message.text; break; } }); /script /body /html ; }3.3 完善交互与错误处理一个健壮的插件还需要考虑更多细节。比如我们可以在调用API时显示一个进度通知让用户知道插件正在工作。修改ask命令的处理部分case ask: const userQuestion message.text; if (!userQuestion.trim()) { vscode.window.showWarningMessage(请输入问题或代码。); return; } // 显示一个带有“取消”按钮的进度通知 vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: 正在咨询Qwen..., cancellable: true }, async (progress, token) { token.onCancellationRequested(() { console.log(用户取消了请求); }); try { const aiResponse await callQwenAPI(userQuestion); panel.webview.postMessage({ command: updateResponse, text: aiResponse }); vscode.window.showInformationMessage(Qwen已回答); } catch (error: any) { const errorMsg 调用失败: ${error.message}; panel.webview.postMessage({ command: updateResponse, text: errorMsg }); vscode.window.showErrorMessage(errorMsg); } }); break;4. 调试、打包与分享4.1 调试你的插件在VS Code中打开你的插件项目按下F5键。这会启动一个“扩展开发宿主”窗口这是一个全新的、加载了你正在开发插件的VS Code实例。在这个新窗口里你可以打开一个代码文件选中一段代码。右键点击选择“Ask Qwen AI”或者按CtrlShiftP打开命令面板输入“Ask Qwen AI”并执行。侧边会打开你的插件面板点击“使用选中代码提问”再点击“发送文本提问”看看是否能收到本地模型的回复。如果遇到问题检查原VS Code窗口的“调试控制台”那里会输出插件的日志和错误信息。最常见的问题是本地模型API地址不对或服务未启动。4.2 打包与安装插件开发完成后你可以将它打包成.vsix文件方便分享或安装。全局安装打包工具npm install -g vscode/vsce在插件项目根目录下运行vsce package。这会在当前目录生成一个.vsix文件。在VS Code中你可以通过“扩展”视图顶部的“...”菜单选择“从VSIX安装...”来安装你自己打包的插件。5. 总结走到这里你已经拥有了一个专属于你的、能与本地通义千问模型对话的VS Code编程助手雏形。虽然它现在看起来还很简单但核心的链路已经打通从编辑器获取上下文与本地AI模型交互再将结果无缝呈现回来。这个简单的插件就像一个乐高底座你可以在此基础上添加无数有趣的模块。比如让它可以分析错误日志、自动为代码生成注释、或者根据函数名推测并生成实现代码。关键在于这个助手的“大脑”——通义千问模型——运行在你本地你可以根据自己的需求选择不同规模的模型在响应速度、能力强度和隐私安全之间找到平衡点。开发过程中最关键的步骤其实是调试和适配。确保你的插件能正确捕捉到编辑器的状态并且请求的格式完全符合你本地模型API的规范。一旦这个桥梁搭建稳固后面的功能扩展就更多的是创意和编程实现的工作了。希望这个实践能给你带来启发。亲手打造工具的过程不仅能解决你的具体问题更能让你对VS Code扩展开发和AI模型应用有更深入的理解。不妨就从今天这个最小可用的插件开始逐步把它打磨成你编程工作流中不可或缺的一部分吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。