企业官网建设流程全解析

1. 从一次插件调试说起：Command 注册了却按不动

写 VS Code 插件的人大多经历过这个瞬间：registerCommand写完了，package.json里也填了contributes.commands，F5 一按，命令面板里搜得到，回车却没反应，或者干脆报「command not found」。更麻烦的是，插件里要接 AI 能力时，Key 散落在各个文件里，调试一次改一次，改到最后自己都记不清哪个是当前生效的。

这篇就围绕两个实操点展开：一是把自定义 Command 从注册到调试跑通，二是用 TaoToken 统一管理插件里的 API Key 和请求通道，让 Command 触发时能稳定拿到模型返回。适合已经在写 VS Code 插件、准备在插件内接入 AI 能力的开发者。读完你能拿到一份可直接复制的package.json骨架、settings.json配置片段，以及 F5 调试验证 Command 的具体动作。

先说清楚 TaoToken 在这里的角色：它是一个统一的模型 API 接入层，插件不需要为每个模型单独维护 Key 和地址，通过一个 API Key 就能调用对话、编码等能力。官网在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，API 入口是 https://taotoken.net/api 。插件里我们只关心两件事：Key 从哪读、请求发到哪。

2. TaoToken 前置：Key 与通道先备好

在写代码之前，先把外部依赖准备好，否则调试时容易把「Key 没配」误判成「Command 没注册」。

第一步是拿到 API Key。打开 https://taotoken.net/api-keys ，登录后创建一个 Key，复制出来。这个 Key 后面会写进 VS Code 的settings.json，而不是硬编码在插件源码里。硬编码的坑我踩过：一旦提交到仓库，Key 就泄露了，而且换 Key 要重新打包插件。

第二步是确认 API 通道地址。插件里请求的 base URL 用 https://taotoken.net/api ，不要带任何多余路径。很多请求 404 的情况，都是因为把 base URL 写成了带/v1/chat/completions的完整地址，又在代码里拼了一次。

第三步是了解模型标识。TaoToken 的模型对话入口在 https://taotoken.net/models ，你可以在页面上直接试跑，确认模型名和返回格式，再写进插件配置。插件里建议把模型名也做成可配置项，方便切换。

如果你后续要做长期编码类插件或 Agent 类功能，可以关注 Coding Plan：https://taotoken.net/coding-plan 。它更适合高频调用场景，这里先不展开，本篇聚焦 Command 与调试。

注意：Key 只放在用户级或工作区级的settings.json里，不要写进package.json的contributes.configuration默认值，默认值会随插件分发出去。

3. 可复制配置：package.json 与 settings.json

这一节给两份可直接抄的配置。先看package.json里 Command 注册和配置项声明的骨架。

{ "name": "ai-command-demo", "version": "0.0.1", "engines": { "vscode": "^1.85.0" }, "activationEvents": [], "main": "./out/extension.js", "contributes": { "commands": [ { "command": "aiCommandDemo.askModel", "title": "AI: Ask Model", "category": "AI Command Demo" }, { "command": "aiCommandDemo.openSettings", "title": "AI: Open TaoToken Settings", "category": "AI Command Demo" } ], "configuration": { "title": "AI Command Demo", "properties": { "aiCommandDemo.apiKey": { "type": "string", "default": "", "description": "TaoToken API Key，请在设置中填写" }, "aiCommandDemo.baseUrl": { "type": "string", "default": "https://taotoken.net/api", "description": "TaoToken API 通道地址" }, "aiCommandDemo.model": { "type": "string", "default": "gpt-4o-mini", "description": "调用的模型标识" } } } }, "scripts": { "compile": "tsc -p ./", "watch": "tsc -watch -p ./" }, "devDependencies": { "@types/vscode": "^1.85.0", "@types/node": "^20.0.0", "typescript": "^5.3.0" } }

几个关键点。activationEvents在新版本里可以留空，VS Code 会根据contributes.commands自动推断激活时机，不用再手写onCommand。contributes.commands里的command字段必须和代码里registerCommand的第一个参数完全一致，大小写都不能差，这是「命令面板搜得到但执行报错」最常见的原因。

再看settings.json的配置片段。用户级设置通过命令面板「Preferences: Open User Settings (JSON)」打开，工作区级则是.vscode/settings.json。

{ "aiCommandDemo.apiKey": "sk-你的TaoToken密钥", "aiCommandDemo.baseUrl": "https://taotoken.net/api", "aiCommandDemo.model": "gpt-4o-mini" }

插件代码里通过vscode.workspace.getConfiguration('aiCommandDemo')读取这三项。这样调试时改 Key 不用动源码，改完保存即可生效，省去反复编译。

4. 注册 Command 并接入模型请求

配置就绪后，写extension.ts。下面这段把 Command 注册、配置读取、请求发送串起来。

import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { const askModel = vscode.commands.registerCommand( 'aiCommandDemo.askModel', async () => { const config = vscode.workspace.getConfiguration('aiCommandDemo'); const apiKey = config.get<string>('apiKey'); const baseUrl = config.get<string>('baseUrl'); const model = config.get<string>('model'); if (!apiKey) { vscode.window.showErrorMessage('请先在设置中填写 aiCommandDemo.apiKey'); return; } const editor = vscode.window.activeTextEditor; const selected = editor ? editor.document.getText(editor.selection) : ''; if (!selected) { vscode.window.showWarningMessage('请先选中一段代码再执行'); return; } await vscode.window.withProgress( { location: vscode.ProgressLocation.Notification, title: '请求模型中...' }, async () => { try { const res = await fetch(`${baseUrl}/v1/chat/completions`, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${apiKey}` }, body: JSON.stringify({ model, messages: [ { role: 'system', content: '你是一个代码解释助手，回答简洁。' }, { role: 'user', content: `解释这段代码：\n${selected}` } ] }) }); if (!res.ok) { const text = await res.text(); vscode.window.showErrorMessage(`请求失败 ${res.status}: ${text}`); return; } const data = await res.json(); const content = data.choices?.[0]?.message?.content ?? '无返回内容'; const doc = await vscode.workspace.openTextDocument({ content, language: 'markdown' }); await vscode.window.showTextDocument(doc, vscode.ViewColumn.Beside); } catch (err) { vscode.window.showErrorMessage(`请求异常: ${String(err)}`); } } ); } ); const openSettings = vscode.commands.registerCommand( 'aiCommandDemo.openSettings', () => { vscode.commands.executeCommand( 'workbench.action.openSettings', 'aiCommandDemo' ); } ); context.subscriptions.push(askModel, openSettings); }

这里有两个设计取舍值得说。第一，用fetch而不是引入额外 HTTP 库，Node 18 以上内置了fetch，VS Code 1.85 对应的 Electron 版本已经支持，少一个依赖少一层打包问题。第二，把结果写进一个新的 Markdown 文档而不是弹窗，长回答在弹窗里会被截断，文档里可以滚动、复制、继续编辑。

openSettings这个 Command 是顺手加的，它调用内置命令workbench.action.openSettings并传入过滤词，用户点一下就能跳到本插件的配置项，比让用户自己去设置里翻要友好。

5. F5 调试验证：Command 触发的完整动作

配置和代码都写完后，进入验证环节。按下面的顺序操作，每一步都有明确的预期结果。

先编译。在终端执行npm run compile，确认out/extension.js生成且无 TypeScript 报错。如果报Cannot find module 'vscode'，检查devDependencies里是否装了@types/vscode。

然后按 F5 启动扩展开发宿主。VS Code 会新开一个窗口，标题栏带[Extension Development Host]。这个新窗口里才加载了你刚写的插件，原窗口不会生效，这是新手最容易搞混的一点。

在新窗口里按Ctrl+Shift+P打开命令面板，输入AI: Ask Model。如果搜不到，回到package.json检查contributes.commands的command和title是否拼写正确，改完需要重新 F5。

搜到后先别急着执行，打开新窗口的设置，搜索aiCommandDemo，把apiKey填上。保存后回到编辑器，选中一段代码，再执行AI: Ask Model。预期结果是右下角出现进度通知，随后侧边打开一个 Markdown 文档，里面是模型返回的解释。

如果进度通知一闪而过并弹出错误，看错误内容。401说明 Key 不对或没填；404多半是baseUrl拼错，确认是https://taotoken.net/api且代码里拼的是/v1/chat/completions；model not found则是模型名写错，去 https://taotoken.net/models 核对。

验证openSettings命令：命令面板输入AI: Open TaoToken Settings，回车后应直接跳到设置页并过滤出本插件配置项。这一步能过，说明 Command 注册和executeCommand调用都没问题。

调试过程中改代码，如果开了npm run watch，TypeScript 会自动重编译，但扩展宿主窗口需要按Ctrl+R重载才生效，不用关掉重开。

6. 本篇常见错排查

把上面流程里高频出现的几个问题集中列一下，方便对照。

命令面板搜不到命令。九成是package.json的contributes.commands没写、写错，或者改完没重新 F5。注意command字段是唯一标识，title才是显示名，两者不要混。

执行命令报command 'xxx' not found。说明registerCommand没执行到，通常是activate函数里抛了异常提前退出，或者命令名和package.json不一致。在activate开头加一行console.log('activated')，在扩展宿主的「帮助 > 切换开发人员工具」里看控制台输出。

请求一直转圈或超时。先确认网络能访问https://taotoken.net/api，再确认baseUrl没有多余斜杠。如果用了公司网络，检查是否有出站限制。

返回401。Key 没填、填错，或者填到了工作区设置但当前打开的是另一个工作区。用openSettings命令跳过去确认当前生效的值。

返回内容为空。检查data.choices[0].message.content的路径是否和实际返回一致，不同模型返回结构可能有细微差别，建议先把data打印出来看一次。

选中文本为空导致警告。这是预期行为，askModel里做了空选中拦截。如果希望不选中也能用，可以把selected为空时改成取整个文档内容，但要注意长文档会超出上下文限制。

Key 相关操作和接入细节可以对照文档：https://taotoken.net/doc 。需要直接试跑模型确认返回格式，用模型对话页：https://taotoken.net/models 。长期做编码类插件、调用频率高的话，看 Coding Plan：https://taotoken.net/coding-plan 。Key 管理入口统一在 https://taotoken.net/api-keys 。

最后补一个实用技巧：把aiCommandDemo.model做成快速切换项，在package.json里加一个enum类型的配置，或者在插件里注册一个aiCommandDemo.switchModel命令，用vscode.window.showQuickPick列出常用模型，选中后写回配置。这样调试不同模型时不用反复开设置页，Command 体系也能顺势扩展成一个小型命令中心。