Qwen3-4B-Thinking模型VS Code插件开发入门集成AI代码补全功能1. 引言你有没有过这样的体验写代码时一个函数名卡在嘴边或者一段逻辑结构想半天也理不顺。传统的代码补全工具比如IDE自带的智能提示很多时候只能基于已有的库和语法规则来工作遇到一些复杂的业务逻辑或者需要创造性组合的场景就显得力不从心了。这时候如果能有一个更“懂你”的助手能根据你正在写的代码上下文甚至是你用自然语言描述的意图来生成合适的代码片段那该多方便。今天我们就来动手实现这样一个工具——一个集成Qwen3-4B-Thinking模型的VS Code插件让它成为你专属的智能编程伙伴。这个教程的目标很明确即使你之前没有开发过VS Code插件也能跟着一步步走下来最终得到一个能实际工作的、具备AI代码补全功能的插件。我们会从最基础的开发环境搭建开始到如何调用部署好的大模型API再到如何与VS Code编辑器交互最终实现一个完整的、可交互的补全功能。整个过程我们都会用最直白的语言和可运行的代码来解释确保你能看懂、能上手、能用起来。2. 环境准备与项目初始化在开始敲代码之前我们得先把“厨房”收拾好把需要的“食材”和“工具”备齐。别担心步骤不多跟着做就行。2.1 安装必备工具首先你需要安装两个核心软件Node.js这是运行VS Code插件和后续我们开发环境的JavaScript运行时。建议安装最新的LTS长期支持版本。你可以去Node.js官网下载安装包安装完成后打开终端或命令提示符输入node -v和npm -v如果能看到版本号就说明安装成功了。Visual Studio Code这个不用说就是我们插件要运行和开发的平台。确保你安装的是最新稳定版。2.2 创建你的第一个插件项目VS Code官方提供了一个非常方便的命令行工具叫yo(Yeoman) 和对应的生成器generator-code可以一键生成插件项目骨架。打开你的终端依次执行以下命令# 全局安装Yeoman和VS Code插件生成器 npm install -g yo generator-code # 使用生成器创建新项目 yo code执行yo code后会出现一个交互式的命令行界面你需要回答几个问题What type of extension do you want to create?(你想创建什么类型的扩展) 选择New Extension (TypeScript)。TypeScript是JavaScript的超集能提供更好的类型检查和开发体验VS Code官方也推荐使用它。Whats the name of your extension?(你的扩展叫什么名字) 输入你喜欢的名字比如my-ai-code-helper。Whats the identifier of your extension?(你的扩展标识符是什么) 直接按回车使用默认的通常是名字的小写加连字符格式。Whats the description of your extension?(你的扩展描述是什么) 简单描述一下例如A VS Code extension with AI-powered code completion.。Initialize a git repository?(初始化一个git仓库吗) 可以选择Yes方便后续版本管理。Which package manager to use?(使用哪个包管理器) 选择npm即可。回答完问题后生成器会自动创建一个新的文件夹以你命名的扩展名命名里面包含了插件项目所需的所有基础文件。2.3 初识项目结构用VS Code打开刚刚创建的项目文件夹你会看到类似这样的结构my-ai-code-helper/ ├── .vscode/ # VS Code工作区配置 ├── src/ │ └── extension.ts # 插件的主入口文件我们主要在这里写代码 ├── package.json # 插件的配置文件定义了插件信息、命令、依赖等 ├── tsconfig.json # TypeScript编译配置 └── ... (其他配置文件)现在你可以先按F5键或者在VS Code里选择“运行”-“启动调试”。这会启动一个全新的、带有你插件的“扩展开发主机”窗口。在这个新窗口的命令面板CtrlShiftP或CmdShiftP里输入Hello World如果能看到一个提示信息弹出来恭喜你你的第一个VS Code插件已经成功运行了。3. 连接AI模型调用星图平台API我们的插件要变得“智能”核心在于能调用Qwen3-4B-Thinking模型。假设你已经按照星图平台的指引成功部署好了这个模型并且拿到了API的访问地址Endpoint和必要的密钥API Key。接下来我们就在插件里实现这个调用。3.1 安装必要的依赖我们需要一个HTTP客户端来发送请求。在项目根目录下打开终端运行npm install axiosaxios是一个简单易用的Promise-based HTTP客户端非常适合我们这里使用。3.2 编写API调用函数现在打开src/extension.ts文件。我们会先清空里面自动生成的示例代码然后从头开始写。首先在文件顶部引入我们需要的模块import * as vscode from vscode; import axios from axios;然后我们定义一个异步函数来调用模型。这个函数需要接收用户的提示prompt也就是描述他想要什么代码的自然语言然后返回模型生成的代码。// 这是一个示例配置实际使用时你应该通过插件的设置来配置这些值 const MODEL_API_ENDPOINT YOUR_DEPLOYED_MODEL_ENDPOINT; // 替换为你的模型API地址 const API_KEY YOUR_API_KEY; // 替换为你的API密钥 async function callAIModelForCompletion(prompt: string): Promisestring | null { try { const response await axios.post( MODEL_API_ENDPOINT, { // 请求体的结构需要根据你的模型API文档来调整 // 这里是一个通用示例假设API接收 prompt 和 max_tokens 参数 prompt: prompt, max_tokens: 150, // 控制生成代码的最大长度 temperature: 0.2, // 控制生成的随机性值越低输出越确定 }, { headers: { Content-Type: application/json, Authorization: Bearer ${API_KEY}, // 如果API需要认证 }, timeout: 30000, // 设置超时时间比如30秒 } ); // 解析响应提取生成的文本。这里的路径 response.data.choices[0].text // 需要根据你模型API返回的实际数据结构来修改。 const generatedText response.data.choices?.[0]?.text?.trim(); if (generatedText) { return generatedText; } else { vscode.window.showWarningMessage(模型返回了空内容。); return null; } } catch (error: any) { // 更友好的错误提示 let errorMessage 调用AI模型时发生错误。; if (error.response) { errorMessage API错误: ${error.response.status} - ${error.response.data?.message || 未知错误}; } else if (error.request) { errorMessage 网络错误无法连接到模型服务请检查网络和API地址。; } else { errorMessage 请求配置错误: ${error.message}; } vscode.window.showErrorMessage(errorMessage); console.error(API调用失败:, error); return null; } }重要提示上面的MODEL_API_ENDPOINT、API_KEY以及请求/响应的数据结构prompt,max_tokens,response.data.choices[0].text都是示例。你必须根据星图平台提供的Qwen3-4B-Thinking模型API的具体文档来修改它们确保参数名和获取生成结果的方式完全正确。4. 与编辑器交互获取上下文与插入代码插件有了“大脑”模型API现在需要让它有“眼睛”和“手”——能看见用户正在写什么并能把生成的代码放进去。4.1 获取当前编辑器的上下文VS Code提供了一个强大的API (vscode模块) 来与编辑器交互。我们需要获取用户光标所在的位置以及光标附近的代码作为给模型的上下文提示。function getEditorContext(): { selectedText: string; textBeforeCursor: string; languageId: string } | null { const editor vscode.window.activeTextEditor; if (!editor) { vscode.window.showInformationMessage(请先打开一个代码文件。); return null; } const document editor.document; const selection editor.selection; const languageId document.languageId; // 例如javascript, python // 获取用户选中的文本如果有的话 const selectedText document.getText(selection); // 获取光标位置之前的一小段文本作为上下文例如光标前的200个字符 const cursorPosition selection.active; const rangeBeforeCursor new vscode.Range( new vscode.Position(Math.max(0, cursorPosition.line - 5), 0), // 从当前行往上5行开始 cursorPosition // 到光标位置结束 ); const textBeforeCursor document.getText(rangeBeforeCursor); return { selectedText, textBeforeCursor, languageId }; }4.2 设计一个简单的交互命令我们不希望插件一直自动触发那样可能会干扰正常编码。更好的方式是提供一个命令让用户在想用的时候手动调用。比如我们可以绑定一个快捷键。首先在package.json文件中注册这个命令。找到contributes部分添加commands和keybindings{ contributes: { commands: [ { command: my-ai-code-helper.completeCode, title: AI: Complete Code } ], keybindings: [ { command: my-ai-code-helper.completeCode, key: ctrlalti, // 你可以自定义快捷键比如 CtrlAltI mac: cmdalti, when: editorTextFocus } ] } }然后回到src/extension.ts在activate函数中注册这个命令的处理函数export function activate(context: vscode.ExtensionContext) { // 注册命令 let disposable vscode.commands.registerCommand(my-ai-code-helper.completeCode, async () { // 1. 获取编辑器上下文 const context getEditorContext(); if (!context) { return; } const { selectedText, textBeforeCursor, languageId } context; // 2. 构建给模型的提示Prompt // 这是决定生成质量的关键我们可以设计得更好。 let prompt 你是一个专业的${languageId}程序员。请根据以下代码上下文生成接下来最可能的一段代码。\n\n; prompt 上下文代码\n\\\${languageId}\n${textBeforeCursor}\n\\\\n\n; if (selectedText) { prompt 用户选中了这段文本可能需要修改或围绕它生成代码\n\\\${languageId}\n${selectedText}\n\\\\n\n; } prompt 请生成合适的代码片段; // 3. 显示一个进度提示告诉用户正在处理 vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: AI正在思考..., cancellable: false }, async (progress) { // 4. 调用AI模型 const generatedCode await callAIModelForCompletion(prompt); if (generatedCode) { // 5. 将生成的代码插入到编辑器替换选中的文本或在光标处插入 const editor vscode.window.activeTextEditor; if (editor) { editor.edit((editBuilder) { if (selectedText) { // 如果有选中文本则替换它 editBuilder.replace(editor.selection, generatedCode); } else { // 否则在光标处插入 editBuilder.insert(editor.selection.active, generatedCode); } }); vscode.window.showInformationMessage(AI代码补全已插入); } } return new Promise(resolve resolve()); // 进度完成 }); }); context.subscriptions.push(disposable); }现在当你打开一个代码文件把光标放在某个位置然后按下你设置的快捷键比如CtrlAltI插件就会收集光标前的代码作为上下文。构建一个提示发送给Qwen3-4B-Thinking模型。等待模型生成代码。把生成的代码插入到你的编辑器中。5. 优化体验提示工程与界面设计基础的跑通了但要让这个插件真正好用我们还需要在细节上打磨。5.1 设计更好的提示Prompt给模型的提示词Prompt质量直接决定了生成代码的相关性和质量。我们可以设计更精细的提示模板。例如我们可以根据不同的编程语言和用户意图来调整提示function buildCompletionPrompt(context: { textBeforeCursor: string; selectedText: string; languageId: string }): string { const { textBeforeCursor, selectedText, languageId } context; // 一个更复杂的提示模板示例 const systemPrompt 你是一个经验丰富的${languageId}开发助手。你的任务是理解代码意图并生成简洁、正确、符合最佳实践的代码片段。只返回代码不要包含任何解释性文字。; let userPrompt 现有代码上下文\n\\\${languageId}\n${textBeforeCursor}\n\\\\n; if (selectedText) { userPrompt 用户选中了以下部分可能需要完善、修改或基于此生成代码\n\\\${languageId}\n${selectedText}\n\\\\n; userPrompt 请基于选中的内容和上下文生成最合适的代码。; } else { userPrompt 请根据以上上下文生成接下来最可能的一段代码。; } // 一些模型使用 [INST] 等特殊标记来区分系统提示和用户提示请根据你的模型调整 // 这里是一个通用格式 return ${systemPrompt}\n\n${userPrompt}; }你可以在实际使用中不断调整这个模板比如加入“生成单元测试”、“用更优雅的方式重写”等特定指令。5.2 添加配置选项把API地址和密钥硬编码在代码里不安全也不灵活。VS Code插件支持用户设置。我们可以在package.json中定义配置项{ contributes: { configuration: { title: My AI Code Helper, properties: { myAiCodeHelper.modelEndpoint: { type: string, default: , description: 部署的AI模型API地址 }, myAiCodeHelper.apiKey: { type: string, default: , description: 访问模型API所需的密钥 }, myAiCodeHelper.maxTokens: { type: number, default: 150, description: 生成代码的最大长度 } } } } }然后在代码中读取这些配置import * as vscode from vscode; const config vscode.workspace.getConfiguration(myAiCodeHelper); const MODEL_API_ENDPOINT config.get(modelEndpoint, ); const API_KEY config.get(apiKey, ); const MAX_TOKENS config.get(maxTokens, 150);用户可以在VS Code的设置界面Ctrl,中搜索“My AI Code Helper”来填写这些配置。5.3 实现一个输入框进阶除了快捷键触发我们还可以提供一个输入框让用户能更精确地描述他们的需求。这需要用到vscode.window.showInputBox方法。你可以在命令处理函数里添加// 在调用模型前先询问用户的具体需求 const userRequest await vscode.window.showInputBox({ placeHolder: 请描述你想要生成的代码例如写一个快速排序函数, prompt: AI代码补全 }); if (userRequest undefined) { return; } // 用户取消了 // 然后将 userRequest 也加入到构建的提示词中 let prompt ... [之前的上下文部分] ...; if (userRequest) { prompt \n\n用户的额外要求${userRequest}\n; } prompt 请生成合适的代码;6. 总结跟着上面的步骤走下来你应该已经拥有了一个能够运行、具备基本AI代码补全功能的VS Code插件雏形。整个过程其实可以分解为几个清晰的环节搭建插件开发环境、学会调用外部API、掌握与VS Code编辑器交互的方法最后再把它们像拼积木一样组合起来。这个初始版本虽然简单但已经展示了核心的idea将本地化的、私有部署的大模型能力无缝集成到我们日常的开发工具中。你可以在此基础上做很多有趣的扩展比如为不同的编程语言优化提示词模板、增加“解释代码”或“生成注释”的额外命令、甚至实现一个侧边栏面板来管理对话历史。开发过程中最关键的可能就是调试和迭代。多按F5启动调试窗口进行测试仔细观察控制台的输出日志。如果模型返回的结果不理想别灰心这往往是提示词需要调整的信号。试着把你的需求描述得更清晰或者给模型一些更具体的例子在提示词里效果通常会好很多。最后记得把硬编码的API地址和密钥移到配置文件中这样你的插件才能安全地分享给别人使用。希望这个小小的插件能成为你探索AI赋能开发工作的一个起点亲手打造工具的过程本身也是一种极佳的学习和创造体验。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。