1. 从零写一个会“说话”的 VS Code 插件卡在哪一步VS Code 插件开发学习这件事最容易被低估的不是activate函数怎么写也不是contributes.commands怎么注册而是插件真正要调用 AI 能力时Key 和请求通道怎么统一管理。我见过太多自研插件在本地调试阶段把 API Key 硬编码在extension.ts里等到要分发给同事或者上架市场时才发现Key 泄露风险、多模型切换麻烦、每个开发者各自配一套环境变量维护成本直接爆炸。这篇内容聚焦的就是这个环节你已经在用yo code生成了 TypeScript 插件骨架已经能在扩展宿主里按 F5 弹出 Hello World接下来想给插件加上代码补全或者对话功能。此时插件侧需要一个稳定的配置入口让 Key、模型名、请求地址这些参数不散落在代码各处而是集中收口到settings.json里通过 VS Code 的配置系统读取。适合谁看正在做 VS Code 插件开发学习、准备给插件接入 AI 补全或对话能力的开发者已经写过基础命令注册、但对“插件如何安全地持有并调用外部模型服务”还没有清晰方案的工程师。读完你能拿到一套可复制的settings.json配置骨架、插件侧读取配置并发出请求的完整代码、以及在扩展宿主中验证配置是否生效的具体动作。TaoToken 在这里的角色是一个统一的 API 通道你不需要在插件里分别对接多家模型服务而是通过一个 Key、一个 Base URL 来调用不同模型。官网入口在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 路径不带 UTM 参数配置时直接写这个就行。2. 前置准备插件工程、Key 与配置分层在动settings.json之前先把三件事理清楚否则后面配置会反复返工。第一插件工程本身要能跑起来。如果你还没创建项目按官方流程走一遍全局安装脚手架npm i yo generator-code -g然后yo code选择New Extension (TypeScript)填名称、标识、描述构建工具选 webpack包管理选 npm。进入目录后npm i装依赖。此时src/extension.ts是主入口package.json里的contributes负责声明命令和配置项。按 F5 会打开一个扩展宿主窗口CtrlShiftP能搜到你注册的命令说明骨架没问题。第二Key 从哪来。进入 TaoToken 控制台创建 API Key地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。创建后复制那串 Key先放在手边。如果你还想先验证模型对话是否通可以打开模型对话页面 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 发一条消息确认账号状态正常。Key 的完整管理入口在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。第三配置分层要想清楚。VS Code 插件的配置有三层默认值写在package.json的contributes.configuration里用户级配置存在 VS Code 的全局 settings 中工作区级配置存在项目.vscode/settings.json里。Key 这类敏感信息不要写默认值也不要提交到工作区配置让用户自己填。模型名、请求地址这类非敏感参数可以给默认值方便开箱即用。这里有个容易踩的坑很多人把 Key 直接写进package.json的默认配置打包成 vsix 分发后所有安装者共享同一个 Key额度瞬间被刷光。正确做法是默认值留空插件启动时检测到空值就提示用户去设置。3. 可复制配置settings.json 骨架与插件侧读取先看package.json里声明配置项的部分。这段决定了用户在 VS Code 设置界面能看到哪些选项{ contributes: { configuration: { title: AI 补全插件, properties: { aiCompletion.apiKey: { type: string, default: , markdownDescription: TaoToken API Key在控制台创建后填入 }, aiCompletion.baseUrl: { type: string, default: https://taotoken.net/api, description: 统一 API 请求地址 }, aiCompletion.model: { type: string, default: claude-sonnet-4-20250514, description: 用于补全或对话的模型名称 }, aiCompletion.maxTokens: { type: number, default: 512, description: 单次请求最大生成 token 数 } } } } }用户侧的settings.json用户级或工作区级只需要填 Key 和按需覆盖其他项{ aiCompletion.apiKey: sk-你的Key, aiCompletion.baseUrl: https://taotoken.net/api, aiCompletion.model: claude-sonnet-4-20250514, aiCompletion.maxTokens: 512 }注意baseUrl写的是https://taotoken.net/api不带任何查询参数。请求时拼接的完整路径是/v1/chat/completions所以最终请求地址是https://taotoken.net/api/v1/chat/completions。接下来是插件侧读取配置并发出请求的核心代码。在src/extension.ts里用vscode.workspace.getConfiguration读取import * as vscode from vscode; interface CompletionConfig { apiKey: string; baseUrl: string; model: string; maxTokens: number; } function readConfig(): CompletionConfig { const cfg vscode.workspace.getConfiguration(aiCompletion); return { apiKey: cfg.getstring(apiKey, ), baseUrl: cfg.getstring(baseUrl, https://taotoken.net/api), model: cfg.getstring(model, claude-sonnet-4-20250514), maxTokens: cfg.getnumber(maxTokens, 512) }; } async function requestCompletion(prompt: string): Promisestring { const config readConfig(); if (!config.apiKey) { throw new Error(未配置 aiCompletion.apiKey请在设置中填入 TaoToken Key); } const response await fetch(${config.baseUrl}/v1/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${config.apiKey} }, body: JSON.stringify({ model: config.model, max_tokens: config.maxTokens, messages: [ { role: system, content: 你是一个代码补全助手只返回补全后的代码片段。 }, { role: user, content: prompt } ] }) }); if (!response.ok) { const errText await response.text(); throw new Error(请求失败 ${response.status}: ${errText}); } const data await response.json() as any; return data.choices?.[0]?.message?.content ?? ; }Node 18 以上内置了fetchVS Code 扩展宿主基于 Electron运行时自带 fetch不需要额外装 axios。如果你用的是更早的 Node 版本换成https模块或者node-fetch即可。把请求挂到一个命令上方便手动触发验证export function activate(context: vscode.ExtensionContext) { const disposable vscode.commands.registerCommand(aiCompletion.testRequest, async () { try { const result await requestCompletion(写一个 TypeScript 函数输入两个数字返回它们的和); vscode.window.showInformationMessage(返回${result.slice(0, 80)}); } catch (err: any) { vscode.window.showErrorMessage(err.message); } }); context.subscriptions.push(disposable); }对应的package.json命令声明{ contributes: { commands: [ { command: aiCompletion.testRequest, title: AI 补全测试请求 } ] } }4. 验证请求在扩展宿主里跑通一次真实调用配置写完了必须验证它真的生效。步骤很具体第一步按 F5 启动扩展宿主。会弹出一个新的 VS Code 窗口标题栏带[Extension Development Host]字样。第二步在新窗口里按CtrlShiftP输入AI 补全测试请求回车。如果你之前没配 Key会看到错误提示“未配置 aiCompletion.apiKey”这说明配置读取逻辑生效了只是值没填。第三步在新窗口里打开设置Ctrl,搜索aiCompletion把 Key 填进去。或者直接在新窗口的settings.json里加{ aiCompletion.apiKey: sk-你的真实Key }第四步再次执行AI 补全测试请求命令。如果一切正常右下角会弹出信息提示显示模型返回的代码片段前 80 个字符。看到这个提示说明从settings.json读取配置、拼接请求、携带 Authorization 头、解析响应这条链路全部打通。如果你想更直观地看请求细节可以在requestCompletion里加一行日志console.log(请求地址:, ${config.baseUrl}/v1/chat/completions); console.log(使用模型:, config.model);然后在扩展宿主窗口的帮助 切换开发人员工具里看 Console 输出。实测下来这个日志对排查“地址拼错”和“模型名写错”特别有用。验证通过后你可以把请求逻辑接到vscode.languages.registerCompletionItemProvider上实现真正的行内补全。补全提供者的provideCompletionItems里调用requestCompletion把当前行上下文拼成 prompt 传进去返回CompletionItem数组即可。这部分代码量不大但要注意加防抖和超时控制否则用户每敲一个字符都发请求体验会很差。5. 本篇常见错排查报错一401 Unauthorized或invalid api key。最常见的原因是 Key 复制时带了空格或者把Bearer后面的空格漏了。检查Authorization头的格式必须是Bearer sk-xxx中间一个空格。另外确认 Key 是在 TaoToken 控制台创建的没有过期或被删除。报错二404 Not Found。九成是baseUrl拼错了。正确值是https://taotoken.net/api请求路径拼成/v1/chat/completions。如果你把baseUrl写成https://taotoken.net/api/v1再拼/v1/chat/completions就变成了/api/v1/v1/chat/completions必然 404。建议在代码里打印完整 URL 确认。报错三配置改了但插件读到的还是旧值。VS Code 的配置读取有缓存getConfiguration返回的对象在配置变更后不会自动刷新。如果你在插件运行期间修改了设置需要监听vscode.workspace.onDidChangeConfiguration事件重新读取或者重启扩展宿主。调试阶段最省事的办法就是改完配置按CtrlR重载宿主窗口。报错四fetch is not defined。说明你的扩展宿主 Node 版本低于 18。解决办法是在package.json的engines.vscode里声明较高的 VS Code 版本或者在代码里改用https.request。更稳妥的做法是引入node-fetch并显式 import。报错五打包 vsix 时报 README 模板错误。这个和 AI 配置无关但插件开发学习路上必踩。错误信息是It seems the README.md still contains template text。解决方法是打开项目根目录的README.md把脚手架生成的模板文字删掉写点实际内容再执行vsce package。如果package.json里没配repository字段打包命令要加--allow-missing-repository。报错六请求超时但没有明确错误。补全场景对延迟敏感建议在fetch外层包一层AbortController设置 8 到 10 秒超时。超时后返回空补全项不要弹错误打扰用户。代码大概是这样const controller new AbortController(); const timeout setTimeout(() controller.abort(), 10000); try { const response await fetch(url, { signal: controller.signal, ... }); } finally { clearTimeout(timeout); }6. 把 Key 收口之后下一步往哪走配置骨架跑通之后你会发现插件侧的 AI 接入其实就三件事读配置、发请求、处理响应。真正花时间的是补全触发时机、上下文裁剪、多模型切换这些工程细节。如果你打算长期做编码类插件或者 Agent 方向的扩展可以了解一下 Coding Plan地址是 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 它针对持续编码场景做了额度上的安排比按次调用更适合高频补全。接入过程中如果遇到请求格式或鉴权问题接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有完整的请求示例和参数说明。Claude Code 相关的接入方式可以参考 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_codeutm_campaignrewrite 。最后留一个实用建议在插件里加一个“检查配置”命令启动时自动跑一次轻量请求把结果输出到 Output Channel。这样用户装完插件第一件事就知道 Key 有没有配对省掉大量“为什么没反应”的沟通成本。这个命令的实现直接复用requestCompletion传一个极短的 prompt比如“回复 ok”判断返回非空即可。
