Qwen2.5-Coder-1.5B与VSCode深度集成智能编程助手实战不知道你有没有过这样的经历写代码时卡在一个函数名上或者面对一个复杂的算法逻辑脑子里一片空白只能去搜索引擎里大海捞针。又或者好不容易写完了代码却因为一个拼写错误或者语法问题调试了半天。我以前也经常这样直到我开始尝试把AI编程助手直接集成到我的开发环境里。今天要聊的就是把一个专门为代码而生的AI模型——Qwen2.5-Coder-1.5B变成你VSCode里的贴身编程伙伴。它不是那种简单的代码片段补全而是能理解你的意图、帮你生成完整函数、甚至修复bug的智能助手。想象一下你刚写下一行注释“# 这里需要一个快速排序函数”旁边就自动出现了完整的Python实现。或者你写了一段有问题的代码编辑器直接给你标出来还告诉你该怎么改。这就是我们要实现的效果。1. 为什么选择Qwen2.5-Coder-1.5B在开始动手之前咱们先聊聊为什么选这个模型。市面上代码模型不少但Qwen2.5-Coder-1.5B有几个特别适合我们这种场景的优点。首先它够小。1.5B的参数规模意味着它能在普通的开发电脑上流畅运行不需要什么顶级显卡。我试过在我的笔记本上跑16GB内存加个集成显卡就能带起来响应速度还挺快。更重要的是它是专门为代码任务训练的。根据技术报告这个模型在超过5.5万亿个token的代码数据上训练过涵盖了40多种编程语言。这意味着它不只是会写PythonJavaScript、Java、Go这些主流语言它都懂甚至连Haskell、Racket这种相对小众的语言也能处理。我实际用下来发现它在代码生成、代码推理和代码修复这三个方面确实有料。比如你让它写个二叉树遍历它不仅能给出代码还会考虑边界情况和时间复杂度。你写了个有bug的递归函数它能指出哪里可能栈溢出并给出迭代版本的实现。还有一个很实际的好处它是开源的Apache 2.0许可证。这意味着你可以随便用不用担心版权问题也不用担心哪天服务突然收费或者停掉。对于咱们开发者来说这种自主可控的感觉很重要。2. 环境准备与模型部署好了说干就干。咱们先从最基础的开始把模型跑起来。2.1 本地部署模型服务虽然可以直接在VSCode插件里调用模型但我建议先单独部署一个模型服务。这样有几个好处服务稳定运行多个编辑器可以共用而且调试起来也方便。最简单的办法是用Ollama。如果你还没安装去官网下载对应系统的安装包几分钟就搞定了。安装好后打开终端一行命令就能把模型拉下来ollama pull qwen2.5-coder:1.5b这个命令会下载大约1GB左右的模型文件。下载完成后启动服务ollama run qwen2.5-coder:1.5b默认情况下Ollama会在本地的11434端口启动一个HTTP服务。你可以用curl测试一下curl http://localhost:11434/api/generate -d { model: qwen2.5-coder:1.5b, prompt: 写一个Python函数计算斐波那契数列的第n项, stream: false }如果看到返回了代码说明服务运行正常。不过对于代码补全这种实时性要求高的场景我建议用vLLM来部署速度会快很多。先安装必要的包pip install vllm然后写个简单的Python脚本来启动服务from vllm import LLM, SamplingParams # 加载模型 llm LLM(modelQwen/Qwen2.5-Coder-1.5B-Instruct) # 创建采样参数 sampling_params SamplingParams(temperature0.1, max_tokens256) # 测试一下 prompts [用Python实现二分查找算法] outputs llm.generate(prompts, sampling_params) for output in outputs: print(output.outputs[0].text)这个脚本会加载模型并测试生成效果。实际部署时你可以用FastAPI包装一下做成一个标准的HTTP服务。2.2 配置VSCode开发环境接下来准备VSCode这边的环境。咱们要开发一个自定义的插件所以需要Node.js环境。建议用最新的LTS版本。打开VSCode确保安装了以下扩展TypeScript咱们的插件会用TypeScript写类型检查能让代码更可靠ESLint保持代码风格一致Prettier自动格式化代码然后创建一个新的插件项目npm install -g yo generator-code yo code按照提示选择“New Extension (TypeScript)”输入插件名称比如“qwen-coder-assistant”其他选项用默认的就行。创建完成后用VSCode打开项目文件夹。你会看到一个基本的插件结构主要文件是src/extension.ts这是插件的入口点。3. 构建智能代码补全功能现在进入核心部分让模型能实时给我们补全代码。这比传统的基于词频的补全要智能得多。3.1 理解代码上下文传统的补全工具只能看到当前文件的内容但我们的AI助手应该更聪明。我们需要收集更多的上下文信息比如当前文件的全部内容同目录下其他相关文件项目的依赖信息最近编辑过的代码片段在VSCode插件里我们可以通过vscode.workspaceAPI获取这些信息。下面是一个收集上下文的函数import * as vscode from vscode; import * as fs from fs; import * as path from path; async function gatherCodeContext( document: vscode.TextDocument, position: vscode.Position ): Promisestring { const contextParts: string[] []; // 1. 当前文件内容 const fullText document.getText(); contextParts.push(当前文件${document.fileName}\n${fullText}); // 2. 获取光标位置附近的代码前后各50行 const startLine Math.max(0, position.line - 50); const endLine Math.min(document.lineCount - 1, position.line 50); const nearbyCode document.getText( new vscode.Range(startLine, 0, endLine, Number.MAX_SAFE_INTEGER) ); contextParts.push(光标附近代码\n${nearbyCode}); // 3. 同目录下的其他Python/JavaScript文件如果是相关项目 const fileDir path.dirname(document.fileName); const files fs.readdirSync(fileDir); const relevantFiles files.filter(f f.endsWith(.py) || f.endsWith(.js) || f.endsWith(.ts) || f.endsWith(.java) || f.endsWith(.go) ).slice(0, 5); // 最多取5个文件 for (const file of relevantFiles) { if (file path.basename(document.fileName)) continue; try { const content fs.readFileSync(path.join(fileDir, file), utf-8); // 只取文件开头部分避免上下文太长 const preview content.substring(0, 1000); contextParts.push(相关文件 ${file}\n${preview}...); } catch (error) { // 忽略读取失败的文件 } } return contextParts.join(\n\n); }3.2 调用模型API有了上下文接下来就是调用模型服务了。我们创建一个专门的服务类class CodeCompletionService { private apiEndpoint: string; constructor(endpoint: string http://localhost:8000/v1/completions) { this.apiEndpoint endpoint; } async getCompletion( context: string, prefix: string, // 光标前的文本 suffix: string // 光标后的文本用于填充中间 ): Promisestring[] { // 构建适合代码补全的prompt const prompt this.buildCodeCompletionPrompt(context, prefix, suffix); try { const response await fetch(this.apiEndpoint, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ model: qwen2.5-coder-1.5b, prompt: prompt, max_tokens: 256, temperature: 0.2, stop: [\n\n, , def , function , class ], // 代码相关的停止词 n: 3, // 生成3个候选结果 }), }); if (!response.ok) { throw new Error(API请求失败: ${response.statusText}); } const data await response.json(); return data.choices.map((choice: any) choice.text.trim()); } catch (error) { console.error(代码补全请求失败:, error); return []; } } private buildCodeCompletionPrompt( context: string, prefix: string, suffix: string ): string { // 使用FIMFill-In-Middle格式让模型填充中间代码 if (suffix) { return |fim_prefix|${prefix}|fim_suffix|${suffix}|fim_middle|; } // 普通补全 return 你是一个专业的编程助手。请根据以下上下文补全代码。 上下文 ${context} 当前光标位置代码 ${prefix} 请补全接下来的代码只返回代码部分不要解释; } }3.3 集成到VSCode补全提示现在把服务集成到VSCode的补全提供者里export class QwenCompletionProvider implements vscode.CompletionItemProvider { private completionService: CodeCompletionService; constructor() { this.completionService new CodeCompletionService(); } async provideCompletionItems( document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken ): Promisevscode.CompletionItem[] { // 只在特定情况下触发AI补全 const linePrefix document.lineAt(position).text.substring(0, position.character); // 检测是否需要AI补全比如写了注释、函数名开头等 const shouldTrigger this.shouldTriggerAICompletion(linePrefix); if (!shouldTrigger) { return []; } // 获取代码上下文 const context await gatherCodeContext(document, position); // 获取光标前后的文本 const prefix document.getText( new vscode.Range(new vscode.Position(0, 0), position) ); const suffix document.getText( new vscode.Range(position, new vscode.Position(document.lineCount, 0)) ); // 调用模型 const completions await this.completionService.getCompletion(context, prefix, suffix); // 转换为VSCode的补全项 return completions.map((completion, index) { const item new vscode.CompletionItem( AI建议 ${index 1}, vscode.CompletionItemKind.Snippet ); item.insertText new vscode.SnippetString(completion); item.detail Qwen2.5-Coder智能补全; item.documentation new vscode.MarkdownString(\\\\n${completion}\n\\\); // 给不同的建议设置不同的排序优先级 item.sortText String.fromCharCode(97 index); // a, b, c... return item; }); } private shouldTriggerAICompletion(linePrefix: string): boolean { // 触发规则示例 // 1. 以注释开头后面跟着TODO、FIXME等 if (linePrefix.match(/^#\s*(TODO|FIXME|HACK|NOTE|XXX)/i)) { return true; } // 2. 输入了函数/类定义的开头 if (linePrefix.match(/(def|class|function)\s\w$/) || linePrefix.match(/(public|private|protected)\s(static\s)?\w\s\w\(/)) { return true; } // 3. 输入了常见的代码模式开头 if (linePrefix.match(/for\s*\(.*\)\s*{$/) || linePrefix.match(/if\s*\(.*\)\s*{$/) || linePrefix.match(/try\s*{$/)) { return true; } // 4. 用户手动触发比如按了快捷键 // 这个在extension.ts里处理 return false; } }4. 实现代码解释与文档生成除了补全代码我们还可以让AI助手解释代码、生成文档。这对于阅读别人的代码或者写API文档特别有用。4.1 代码解释功能选中一段代码右键菜单里点“解释这段代码”AI就会用通俗的语言告诉你这段代码在干什么async function explainSelectedCode() { const editor vscode.window.activeTextEditor; if (!editor) { return; } const selection editor.selection; const selectedText editor.document.getText(selection); if (!selectedText.trim()) { vscode.window.showWarningMessage(请先选择要解释的代码); return; } // 显示进度提示 await vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: AI正在分析代码..., cancellable: true }, async (progress, token) { const prompt 请解释以下代码的功能、输入输出、以及可能的问题 \\\ ${selectedText} \\\ 请用中文回答面向编程新手解释要通俗易懂; const explanation await callModelAPI(prompt); // 在侧边栏显示解释 const panel vscode.window.createWebviewPanel( codeExplanation, 代码解释, vscode.ViewColumn.Beside, { enableScripts: true } ); panel.webview.html !DOCTYPE html html head style body { padding: 20px; font-family: sans-serif; line-height: 1.6; } .code-block { background: #f5f5f5; padding: 10px; border-radius: 5px; } .explanation { margin-top: 20px; } /style /head body h3选中的代码/h3 pre classcode-block${selectedText}/pre h3AI解释/h3 div classexplanation${explanation.replace(/\n/g, br)}/div /body /html ; }); }4.2 自动生成文档注释写文档是很多程序员的痛。我们可以让AI根据函数实现自动生成文档字符串async function generateDocstring() { const editor vscode.window.activeTextEditor; if (!editor) { return; } const document editor.document; const position editor.selection.active; // 找到当前函数/方法的范围 const functionRange await findFunctionRange(document, position); if (!functionRange) { vscode.window.showWarningMessage(未找到函数定义); return; } const functionText document.getText(functionRange); const language document.languageId; // 根据语言选择文档格式 let docstringFormat ; switch (language) { case python: docstringFormat Google风格docstring; break; case javascript: case typescript: docstringFormat JSDoc格式; break; case java: docstringFormat JavaDoc格式; break; default: docstringFormat 通用格式; } const prompt 请为以下${language}函数生成${docstringFormat}的文档注释 \\\${language} ${functionText} \\\ 要求 1. 包含函数功能描述 2. 列出所有参数及其类型、含义 3. 说明返回值及其类型 4. 如果有异常抛出也要说明 5. 如果有使用示例可以加上 只返回文档注释部分不要其他内容; const docstring await callModelAPI(prompt); // 插入到函数开头 await editor.edit(editBuilder { editBuilder.insert(functionRange.start, docstring \n); }); vscode.window.showInformationMessage(文档注释已生成); } async function findFunctionRange( document: vscode.TextDocument, position: vscode.Position ): Promisevscode.Range | undefined { // 从当前位置向上查找函数定义 let lineNumber position.line; const text document.getText(); const lines text.split(\n); // 简单的函数检测逻辑实际实现会更复杂 for (let i lineNumber; i 0; i--) { const line lines[i]; // 检测各种语言的函数定义 if (line.match(/^\s*(def|function)\s\w/) || // Python/JS line.match(/^\s*(public|private|protected|static).*\(.*\)/) || // Java/C# line.match(/^\s*\w\s\w\(.*\)\s*{/) // C/C ) { // 找到函数开始现在找函数结束 let braceCount 0; let inString false; let stringChar ; for (let j i; j lines.length; j) { const currentLine lines[j]; // 简单的括号匹配忽略字符串内的括号 for (let k 0; k currentLine.length; k) { const char currentLine[k]; if (!inString (char || char || char )) { inString true; stringChar char; } else if (inString char stringChar) { inString false; } if (!inString) { if (char { || char ( || char [) { braceCount; } else if (char } || char ) || char ]) { braceCount--; } } } // Python没有大括号用缩进判断 if (document.languageId python) { if (j i currentLine.trim() lines[j - 1].trim() ! ) { // 遇到空行可能是函数结束 const indent lines[i].match(/^\s*/)?.[0].length || 0; if (currentLine.match(/^\s*$/) lines[j 1]?.match(/^\s{0,${indent}}\S/)) { return new vscode.Range(i, 0, j, 0); } } } else if (braceCount 0 j i) { // 括号匹配完成找到函数结束 return new vscode.Range(i, 0, j 1, 0); } } } } return undefined; }5. 智能错误检测与修复建议最后一个重磅功能让AI帮你找bug。不是简单的语法检查而是能理解代码逻辑找出潜在的问题。5.1 实时错误检测我们可以在后台运行一个诊断服务定期分析当前文件class CodeDiagnosticService { private diagnosticCollection: vscode.DiagnosticCollection; private timer?: NodeJS.Timeout; constructor() { this.diagnosticCollection vscode.languages.createDiagnosticCollection(qwen-coder); } startWatching(editor: vscode.TextEditor) { // 停止之前的定时器 if (this.timer) { clearTimeout(this.timer); } // 防抖处理停止输入后500ms再分析 this.timer setTimeout(() { this.analyzeCode(editor.document); }, 500); } async analyzeCode(document: vscode.TextDocument) { const code document.getText(); // 跳过太短的文件 if (code.length 10) { return; } const prompt 请分析以下代码找出潜在的错误、性能问题或代码异味 \\\ ${code} \\\ 请按以下格式回复 1. [行号] 问题类型问题描述 建议修复修复建议 例如 1. [15] 性能问题在循环中重复计算字符串长度 建议修复将str.length提到循环外计算 如果没有发现问题回复未发现明显问题; const analysis await callModelAPI(prompt); if (analysis.includes(未发现明显问题)) { this.diagnosticCollection.clear(); return; } // 解析AI的回复 const diagnostics: vscode.Diagnostic[] []; const lines analysis.split(\n); for (let i 0; i lines.length; i) { const line lines[i]; const match line.match(/\[(\d)\]\s([^:]):\s*(.)/); if (match) { const lineNum parseInt(match[1]) - 1; // 转换为0-based const problemType match[2]; const description match[3]; // 获取修复建议通常是下一行 let suggestion ; if (i 1 lines.length lines[i 1].includes(建议修复)) { suggestion lines[i 1].replace(建议修复, ).trim(); } // 创建诊断信息 const range new vscode.Range(lineNum, 0, lineNum, Number.MAX_SAFE_INTEGER); const diagnostic new vscode.Diagnostic( range, ${problemType}: ${description}${suggestion ? \n建议${suggestion} : }, this.getDiagnosticSeverity(problemType) ); diagnostics.push(diagnostic); } } this.diagnosticCollection.set(document.uri, diagnostics); } private getDiagnosticSeverity(problemType: string): vscode.DiagnosticSeverity { switch (problemType.toLowerCase()) { case 语法错误: case 运行时错误: return vscode.DiagnosticSeverity.Error; case 逻辑错误: case 安全漏洞: return vscode.DiagnosticSeverity.Warning; case 性能问题: case 代码异味: return vscode.DiagnosticSeverity.Information; default: return vscode.DiagnosticSeverity.Hint; } } dispose() { if (this.timer) { clearTimeout(this.timer); } this.diagnosticCollection.dispose(); } }5.2 一键修复建议检测到问题后我们还可以提供快速修复export class CodeFixProvider implements vscode.CodeActionProvider { static readonly providedCodeActionKinds [ vscode.CodeActionKind.QuickFix ]; provideCodeActions( document: vscode.TextDocument, range: vscode.Range, context: vscode.CodeActionContext ): vscode.CodeAction[] { const actions: vscode.CodeAction[] []; for (const diagnostic of context.diagnostics) { // 只处理我们自己的诊断 if (diagnostic.source ! qwen-coder) { continue; } // 提取问题描述中的建议 const message diagnostic.message; const suggestionMatch message.match(/建议(.)/); if (suggestionMatch) { const suggestion suggestionMatch[1]; // 创建快速修复动作 const action new vscode.CodeAction( 应用修复${suggestion}, vscode.CodeActionKind.QuickFix ); action.diagnostics [diagnostic]; action.isPreferred true; // 这里可以关联一个命令来执行修复 action.command { command: qwen-coder.applyFix, title: 应用AI建议的修复, arguments: [document, range, suggestion] }; actions.push(action); } // 添加详细解释动作 const explainAction new vscode.CodeAction( 详细解释这个问题, vscode.CodeActionKind.QuickFix ); explainAction.diagnostics [diagnostic]; explainAction.command { command: qwen-coder.explainProblem, title: 解释问题, arguments: [document, range, diagnostic.message] }; actions.push(explainAction); } return actions; } }6. 实际效果与使用体验我把这套东西搭起来用了一段时间说说真实感受。最明显的提升是在写重复性代码的时候。比如要写一堆CRUD接口以前得一个个手敲现在写个模板让AI补全剩下的部分能省一半时间。特别是写错误处理、输入验证这些样板代码AI做得又快又好。代码解释功能对读开源项目特别有用。有些复杂的算法实现看半天不明白让AI一解释瞬间清晰。生成文档的功能也实用虽然生成的文档有时候需要微调但基础框架都有了比自己从头写快得多。错误检测比我预想的要聪明。它不止能发现语法错误还能看出一些逻辑问题。比如有一次我写了个死循环自己没注意到AI直接标出来说“循环条件永远为真”。还有一次我用了不安全的字符串拼接方式AI建议我用模板字符串确实更优雅。响应速度方面在本地部署的情况下补全建议基本在1-2秒内返回可以接受。如果是简单的补全甚至更快。文档生成和错误检测这种后台任务稍微慢点也没关系。当然也有不足的地方。模型毕竟只有1.5B太复杂的代码逻辑它可能理解不了。有时候生成的代码需要手动调整才能用。但总的来说利远大于弊。如果你也想试试建议先从代码补全开始这个功能最实用上手也简单。等用习惯了再慢慢加上文档生成和错误检测。模型部署可以用Ollama最简单如果追求性能就用vLLM。VSCode插件开发也不难TypeScript写起来挺顺手的。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Qwen2.5-Coder-1.5B与VSCode深度集成：智能编程助手实战
发布时间：2026/7/13 17:59:29
Qwen2.5-Coder-1.5B与VSCode深度集成智能编程助手实战不知道你有没有过这样的经历写代码时卡在一个函数名上或者面对一个复杂的算法逻辑脑子里一片空白只能去搜索引擎里大海捞针。又或者好不容易写完了代码却因为一个拼写错误或者语法问题调试了半天。我以前也经常这样直到我开始尝试把AI编程助手直接集成到我的开发环境里。今天要聊的就是把一个专门为代码而生的AI模型——Qwen2.5-Coder-1.5B变成你VSCode里的贴身编程伙伴。它不是那种简单的代码片段补全而是能理解你的意图、帮你生成完整函数、甚至修复bug的智能助手。想象一下你刚写下一行注释“# 这里需要一个快速排序函数”旁边就自动出现了完整的Python实现。或者你写了一段有问题的代码编辑器直接给你标出来还告诉你该怎么改。这就是我们要实现的效果。1. 为什么选择Qwen2.5-Coder-1.5B在开始动手之前咱们先聊聊为什么选这个模型。市面上代码模型不少但Qwen2.5-Coder-1.5B有几个特别适合我们这种场景的优点。首先它够小。1.5B的参数规模意味着它能在普通的开发电脑上流畅运行不需要什么顶级显卡。我试过在我的笔记本上跑16GB内存加个集成显卡就能带起来响应速度还挺快。更重要的是它是专门为代码任务训练的。根据技术报告这个模型在超过5.5万亿个token的代码数据上训练过涵盖了40多种编程语言。这意味着它不只是会写PythonJavaScript、Java、Go这些主流语言它都懂甚至连Haskell、Racket这种相对小众的语言也能处理。我实际用下来发现它在代码生成、代码推理和代码修复这三个方面确实有料。比如你让它写个二叉树遍历它不仅能给出代码还会考虑边界情况和时间复杂度。你写了个有bug的递归函数它能指出哪里可能栈溢出并给出迭代版本的实现。还有一个很实际的好处它是开源的Apache 2.0许可证。这意味着你可以随便用不用担心版权问题也不用担心哪天服务突然收费或者停掉。对于咱们开发者来说这种自主可控的感觉很重要。2. 环境准备与模型部署好了说干就干。咱们先从最基础的开始把模型跑起来。2.1 本地部署模型服务虽然可以直接在VSCode插件里调用模型但我建议先单独部署一个模型服务。这样有几个好处服务稳定运行多个编辑器可以共用而且调试起来也方便。最简单的办法是用Ollama。如果你还没安装去官网下载对应系统的安装包几分钟就搞定了。安装好后打开终端一行命令就能把模型拉下来ollama pull qwen2.5-coder:1.5b这个命令会下载大约1GB左右的模型文件。下载完成后启动服务ollama run qwen2.5-coder:1.5b默认情况下Ollama会在本地的11434端口启动一个HTTP服务。你可以用curl测试一下curl http://localhost:11434/api/generate -d { model: qwen2.5-coder:1.5b, prompt: 写一个Python函数计算斐波那契数列的第n项, stream: false }如果看到返回了代码说明服务运行正常。不过对于代码补全这种实时性要求高的场景我建议用vLLM来部署速度会快很多。先安装必要的包pip install vllm然后写个简单的Python脚本来启动服务from vllm import LLM, SamplingParams # 加载模型 llm LLM(modelQwen/Qwen2.5-Coder-1.5B-Instruct) # 创建采样参数 sampling_params SamplingParams(temperature0.1, max_tokens256) # 测试一下 prompts [用Python实现二分查找算法] outputs llm.generate(prompts, sampling_params) for output in outputs: print(output.outputs[0].text)这个脚本会加载模型并测试生成效果。实际部署时你可以用FastAPI包装一下做成一个标准的HTTP服务。2.2 配置VSCode开发环境接下来准备VSCode这边的环境。咱们要开发一个自定义的插件所以需要Node.js环境。建议用最新的LTS版本。打开VSCode确保安装了以下扩展TypeScript咱们的插件会用TypeScript写类型检查能让代码更可靠ESLint保持代码风格一致Prettier自动格式化代码然后创建一个新的插件项目npm install -g yo generator-code yo code按照提示选择“New Extension (TypeScript)”输入插件名称比如“qwen-coder-assistant”其他选项用默认的就行。创建完成后用VSCode打开项目文件夹。你会看到一个基本的插件结构主要文件是src/extension.ts这是插件的入口点。3. 构建智能代码补全功能现在进入核心部分让模型能实时给我们补全代码。这比传统的基于词频的补全要智能得多。3.1 理解代码上下文传统的补全工具只能看到当前文件的内容但我们的AI助手应该更聪明。我们需要收集更多的上下文信息比如当前文件的全部内容同目录下其他相关文件项目的依赖信息最近编辑过的代码片段在VSCode插件里我们可以通过vscode.workspaceAPI获取这些信息。下面是一个收集上下文的函数import * as vscode from vscode; import * as fs from fs; import * as path from path; async function gatherCodeContext( document: vscode.TextDocument, position: vscode.Position ): Promisestring { const contextParts: string[] []; // 1. 当前文件内容 const fullText document.getText(); contextParts.push(当前文件${document.fileName}\n${fullText}); // 2. 获取光标位置附近的代码前后各50行 const startLine Math.max(0, position.line - 50); const endLine Math.min(document.lineCount - 1, position.line 50); const nearbyCode document.getText( new vscode.Range(startLine, 0, endLine, Number.MAX_SAFE_INTEGER) ); contextParts.push(光标附近代码\n${nearbyCode}); // 3. 同目录下的其他Python/JavaScript文件如果是相关项目 const fileDir path.dirname(document.fileName); const files fs.readdirSync(fileDir); const relevantFiles files.filter(f f.endsWith(.py) || f.endsWith(.js) || f.endsWith(.ts) || f.endsWith(.java) || f.endsWith(.go) ).slice(0, 5); // 最多取5个文件 for (const file of relevantFiles) { if (file path.basename(document.fileName)) continue; try { const content fs.readFileSync(path.join(fileDir, file), utf-8); // 只取文件开头部分避免上下文太长 const preview content.substring(0, 1000); contextParts.push(相关文件 ${file}\n${preview}...); } catch (error) { // 忽略读取失败的文件 } } return contextParts.join(\n\n); }3.2 调用模型API有了上下文接下来就是调用模型服务了。我们创建一个专门的服务类class CodeCompletionService { private apiEndpoint: string; constructor(endpoint: string http://localhost:8000/v1/completions) { this.apiEndpoint endpoint; } async getCompletion( context: string, prefix: string, // 光标前的文本 suffix: string // 光标后的文本用于填充中间 ): Promisestring[] { // 构建适合代码补全的prompt const prompt this.buildCodeCompletionPrompt(context, prefix, suffix); try { const response await fetch(this.apiEndpoint, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ model: qwen2.5-coder-1.5b, prompt: prompt, max_tokens: 256, temperature: 0.2, stop: [\n\n, , def , function , class ], // 代码相关的停止词 n: 3, // 生成3个候选结果 }), }); if (!response.ok) { throw new Error(API请求失败: ${response.statusText}); } const data await response.json(); return data.choices.map((choice: any) choice.text.trim()); } catch (error) { console.error(代码补全请求失败:, error); return []; } } private buildCodeCompletionPrompt( context: string, prefix: string, suffix: string ): string { // 使用FIMFill-In-Middle格式让模型填充中间代码 if (suffix) { return |fim_prefix|${prefix}|fim_suffix|${suffix}|fim_middle|; } // 普通补全 return 你是一个专业的编程助手。请根据以下上下文补全代码。 上下文 ${context} 当前光标位置代码 ${prefix} 请补全接下来的代码只返回代码部分不要解释; } }3.3 集成到VSCode补全提示现在把服务集成到VSCode的补全提供者里export class QwenCompletionProvider implements vscode.CompletionItemProvider { private completionService: CodeCompletionService; constructor() { this.completionService new CodeCompletionService(); } async provideCompletionItems( document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken ): Promisevscode.CompletionItem[] { // 只在特定情况下触发AI补全 const linePrefix document.lineAt(position).text.substring(0, position.character); // 检测是否需要AI补全比如写了注释、函数名开头等 const shouldTrigger this.shouldTriggerAICompletion(linePrefix); if (!shouldTrigger) { return []; } // 获取代码上下文 const context await gatherCodeContext(document, position); // 获取光标前后的文本 const prefix document.getText( new vscode.Range(new vscode.Position(0, 0), position) ); const suffix document.getText( new vscode.Range(position, new vscode.Position(document.lineCount, 0)) ); // 调用模型 const completions await this.completionService.getCompletion(context, prefix, suffix); // 转换为VSCode的补全项 return completions.map((completion, index) { const item new vscode.CompletionItem( AI建议 ${index 1}, vscode.CompletionItemKind.Snippet ); item.insertText new vscode.SnippetString(completion); item.detail Qwen2.5-Coder智能补全; item.documentation new vscode.MarkdownString(\\\\n${completion}\n\\\); // 给不同的建议设置不同的排序优先级 item.sortText String.fromCharCode(97 index); // a, b, c... return item; }); } private shouldTriggerAICompletion(linePrefix: string): boolean { // 触发规则示例 // 1. 以注释开头后面跟着TODO、FIXME等 if (linePrefix.match(/^#\s*(TODO|FIXME|HACK|NOTE|XXX)/i)) { return true; } // 2. 输入了函数/类定义的开头 if (linePrefix.match(/(def|class|function)\s\w$/) || linePrefix.match(/(public|private|protected)\s(static\s)?\w\s\w\(/)) { return true; } // 3. 输入了常见的代码模式开头 if (linePrefix.match(/for\s*\(.*\)\s*{$/) || linePrefix.match(/if\s*\(.*\)\s*{$/) || linePrefix.match(/try\s*{$/)) { return true; } // 4. 用户手动触发比如按了快捷键 // 这个在extension.ts里处理 return false; } }4. 实现代码解释与文档生成除了补全代码我们还可以让AI助手解释代码、生成文档。这对于阅读别人的代码或者写API文档特别有用。4.1 代码解释功能选中一段代码右键菜单里点“解释这段代码”AI就会用通俗的语言告诉你这段代码在干什么async function explainSelectedCode() { const editor vscode.window.activeTextEditor; if (!editor) { return; } const selection editor.selection; const selectedText editor.document.getText(selection); if (!selectedText.trim()) { vscode.window.showWarningMessage(请先选择要解释的代码); return; } // 显示进度提示 await vscode.window.withProgress({ location: vscode.ProgressLocation.Notification, title: AI正在分析代码..., cancellable: true }, async (progress, token) { const prompt 请解释以下代码的功能、输入输出、以及可能的问题 \\\ ${selectedText} \\\ 请用中文回答面向编程新手解释要通俗易懂; const explanation await callModelAPI(prompt); // 在侧边栏显示解释 const panel vscode.window.createWebviewPanel( codeExplanation, 代码解释, vscode.ViewColumn.Beside, { enableScripts: true } ); panel.webview.html !DOCTYPE html html head style body { padding: 20px; font-family: sans-serif; line-height: 1.6; } .code-block { background: #f5f5f5; padding: 10px; border-radius: 5px; } .explanation { margin-top: 20px; } /style /head body h3选中的代码/h3 pre classcode-block${selectedText}/pre h3AI解释/h3 div classexplanation${explanation.replace(/\n/g, br)}/div /body /html ; }); }4.2 自动生成文档注释写文档是很多程序员的痛。我们可以让AI根据函数实现自动生成文档字符串async function generateDocstring() { const editor vscode.window.activeTextEditor; if (!editor) { return; } const document editor.document; const position editor.selection.active; // 找到当前函数/方法的范围 const functionRange await findFunctionRange(document, position); if (!functionRange) { vscode.window.showWarningMessage(未找到函数定义); return; } const functionText document.getText(functionRange); const language document.languageId; // 根据语言选择文档格式 let docstringFormat ; switch (language) { case python: docstringFormat Google风格docstring; break; case javascript: case typescript: docstringFormat JSDoc格式; break; case java: docstringFormat JavaDoc格式; break; default: docstringFormat 通用格式; } const prompt 请为以下${language}函数生成${docstringFormat}的文档注释 \\\${language} ${functionText} \\\ 要求 1. 包含函数功能描述 2. 列出所有参数及其类型、含义 3. 说明返回值及其类型 4. 如果有异常抛出也要说明 5. 如果有使用示例可以加上 只返回文档注释部分不要其他内容; const docstring await callModelAPI(prompt); // 插入到函数开头 await editor.edit(editBuilder { editBuilder.insert(functionRange.start, docstring \n); }); vscode.window.showInformationMessage(文档注释已生成); } async function findFunctionRange( document: vscode.TextDocument, position: vscode.Position ): Promisevscode.Range | undefined { // 从当前位置向上查找函数定义 let lineNumber position.line; const text document.getText(); const lines text.split(\n); // 简单的函数检测逻辑实际实现会更复杂 for (let i lineNumber; i 0; i--) { const line lines[i]; // 检测各种语言的函数定义 if (line.match(/^\s*(def|function)\s\w/) || // Python/JS line.match(/^\s*(public|private|protected|static).*\(.*\)/) || // Java/C# line.match(/^\s*\w\s\w\(.*\)\s*{/) // C/C ) { // 找到函数开始现在找函数结束 let braceCount 0; let inString false; let stringChar ; for (let j i; j lines.length; j) { const currentLine lines[j]; // 简单的括号匹配忽略字符串内的括号 for (let k 0; k currentLine.length; k) { const char currentLine[k]; if (!inString (char || char || char )) { inString true; stringChar char; } else if (inString char stringChar) { inString false; } if (!inString) { if (char { || char ( || char [) { braceCount; } else if (char } || char ) || char ]) { braceCount--; } } } // Python没有大括号用缩进判断 if (document.languageId python) { if (j i currentLine.trim() lines[j - 1].trim() ! ) { // 遇到空行可能是函数结束 const indent lines[i].match(/^\s*/)?.[0].length || 0; if (currentLine.match(/^\s*$/) lines[j 1]?.match(/^\s{0,${indent}}\S/)) { return new vscode.Range(i, 0, j, 0); } } } else if (braceCount 0 j i) { // 括号匹配完成找到函数结束 return new vscode.Range(i, 0, j 1, 0); } } } } return undefined; }5. 智能错误检测与修复建议最后一个重磅功能让AI帮你找bug。不是简单的语法检查而是能理解代码逻辑找出潜在的问题。5.1 实时错误检测我们可以在后台运行一个诊断服务定期分析当前文件class CodeDiagnosticService { private diagnosticCollection: vscode.DiagnosticCollection; private timer?: NodeJS.Timeout; constructor() { this.diagnosticCollection vscode.languages.createDiagnosticCollection(qwen-coder); } startWatching(editor: vscode.TextEditor) { // 停止之前的定时器 if (this.timer) { clearTimeout(this.timer); } // 防抖处理停止输入后500ms再分析 this.timer setTimeout(() { this.analyzeCode(editor.document); }, 500); } async analyzeCode(document: vscode.TextDocument) { const code document.getText(); // 跳过太短的文件 if (code.length 10) { return; } const prompt 请分析以下代码找出潜在的错误、性能问题或代码异味 \\\ ${code} \\\ 请按以下格式回复 1. [行号] 问题类型问题描述 建议修复修复建议 例如 1. [15] 性能问题在循环中重复计算字符串长度 建议修复将str.length提到循环外计算 如果没有发现问题回复未发现明显问题; const analysis await callModelAPI(prompt); if (analysis.includes(未发现明显问题)) { this.diagnosticCollection.clear(); return; } // 解析AI的回复 const diagnostics: vscode.Diagnostic[] []; const lines analysis.split(\n); for (let i 0; i lines.length; i) { const line lines[i]; const match line.match(/\[(\d)\]\s([^:]):\s*(.)/); if (match) { const lineNum parseInt(match[1]) - 1; // 转换为0-based const problemType match[2]; const description match[3]; // 获取修复建议通常是下一行 let suggestion ; if (i 1 lines.length lines[i 1].includes(建议修复)) { suggestion lines[i 1].replace(建议修复, ).trim(); } // 创建诊断信息 const range new vscode.Range(lineNum, 0, lineNum, Number.MAX_SAFE_INTEGER); const diagnostic new vscode.Diagnostic( range, ${problemType}: ${description}${suggestion ? \n建议${suggestion} : }, this.getDiagnosticSeverity(problemType) ); diagnostics.push(diagnostic); } } this.diagnosticCollection.set(document.uri, diagnostics); } private getDiagnosticSeverity(problemType: string): vscode.DiagnosticSeverity { switch (problemType.toLowerCase()) { case 语法错误: case 运行时错误: return vscode.DiagnosticSeverity.Error; case 逻辑错误: case 安全漏洞: return vscode.DiagnosticSeverity.Warning; case 性能问题: case 代码异味: return vscode.DiagnosticSeverity.Information; default: return vscode.DiagnosticSeverity.Hint; } } dispose() { if (this.timer) { clearTimeout(this.timer); } this.diagnosticCollection.dispose(); } }5.2 一键修复建议检测到问题后我们还可以提供快速修复export class CodeFixProvider implements vscode.CodeActionProvider { static readonly providedCodeActionKinds [ vscode.CodeActionKind.QuickFix ]; provideCodeActions( document: vscode.TextDocument, range: vscode.Range, context: vscode.CodeActionContext ): vscode.CodeAction[] { const actions: vscode.CodeAction[] []; for (const diagnostic of context.diagnostics) { // 只处理我们自己的诊断 if (diagnostic.source ! qwen-coder) { continue; } // 提取问题描述中的建议 const message diagnostic.message; const suggestionMatch message.match(/建议(.)/); if (suggestionMatch) { const suggestion suggestionMatch[1]; // 创建快速修复动作 const action new vscode.CodeAction( 应用修复${suggestion}, vscode.CodeActionKind.QuickFix ); action.diagnostics [diagnostic]; action.isPreferred true; // 这里可以关联一个命令来执行修复 action.command { command: qwen-coder.applyFix, title: 应用AI建议的修复, arguments: [document, range, suggestion] }; actions.push(action); } // 添加详细解释动作 const explainAction new vscode.CodeAction( 详细解释这个问题, vscode.CodeActionKind.QuickFix ); explainAction.diagnostics [diagnostic]; explainAction.command { command: qwen-coder.explainProblem, title: 解释问题, arguments: [document, range, diagnostic.message] }; actions.push(explainAction); } return actions; } }6. 实际效果与使用体验我把这套东西搭起来用了一段时间说说真实感受。最明显的提升是在写重复性代码的时候。比如要写一堆CRUD接口以前得一个个手敲现在写个模板让AI补全剩下的部分能省一半时间。特别是写错误处理、输入验证这些样板代码AI做得又快又好。代码解释功能对读开源项目特别有用。有些复杂的算法实现看半天不明白让AI一解释瞬间清晰。生成文档的功能也实用虽然生成的文档有时候需要微调但基础框架都有了比自己从头写快得多。错误检测比我预想的要聪明。它不止能发现语法错误还能看出一些逻辑问题。比如有一次我写了个死循环自己没注意到AI直接标出来说“循环条件永远为真”。还有一次我用了不安全的字符串拼接方式AI建议我用模板字符串确实更优雅。响应速度方面在本地部署的情况下补全建议基本在1-2秒内返回可以接受。如果是简单的补全甚至更快。文档生成和错误检测这种后台任务稍微慢点也没关系。当然也有不足的地方。模型毕竟只有1.5B太复杂的代码逻辑它可能理解不了。有时候生成的代码需要手动调整才能用。但总的来说利远大于弊。如果你也想试试建议先从代码补全开始这个功能最实用上手也简单。等用习惯了再慢慢加上文档生成和错误检测。模型部署可以用Ollama最简单如果追求性能就用vLLM。VSCode插件开发也不难TypeScript写起来挺顺手的。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
)
