尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

VS Code 基金插件视图空白?让走 TaoToken 的 Codex 查 activationEvents

VS Code 基金插件视图空白?让走 TaoToken 的 Codex 查 activationEvents 用 Yeoman 的yo code生成 VS Code 基金插件按示例把contributes.views里的fund-list、TreeDataProvider以及window.registerTreeDataProvider(fund-list, provider)都写好F5 调试后活动栏确实多出一个基金图标点开却是空白没有 loading没有异常getChildren的断点也不进。这个现象多半不是基金接口挂了而是package.json的activationEvents漏了onView:fund-list。想在本地快速把这条链路对清楚可以先用 TaoToken 把 Codex 通道配通打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册并创建一把 Key把 Codex 的 Base URL 填成https://taotoken.net/api再让它读package.json和src/extension.ts做对照。TaoToken 在这个流程里只负责提供 Key 和统一接入地址TreeDataProvider、注册视图、基金请求逻辑都不归它管。很多教程把注册视图、注册TreeDataProvider、补activationEvents混在一起讲结果读者改完Provider.ts发现还是空白就以为是数据源失败。实际这三件事分别发生在三个位置package.json管声明和激活extension.ts管注册Provider.ts管数据。先把激活那一步确认掉后面才轮得到基金接口。下面按这个顺序拆开中间需要用 Codex 对照文件时再把 TaoToken 的通道接上。1. 侧边栏有基金图标却没列表先别急着改 TreeDataProvider1.1 视图空白的典型现象F5 启动扩展宿主后活动栏出现基金图标点击展开面板区域是空的。输出面板没有报错调试控制台也没异常在getChildren第一行打的console.log根本不执行。另一种表现是视图标题旁出现一个刷新按钮点它也没反应因为扩展进程里压根没注册过这个TreeDataProvider。还有一种容易被误判的情况getChildren确实执行了但返回空数组视图同样空白。区分方法很简单——在getChildren里打日志能进说明激活和注册都通了问题在数据层不能进就先查activationEvents别去翻api.ts的请求参数。1.2 Yeoman 脚手架保证能编译但不保证视图被激活yo code生成的最小模板里activationEvents通常只带一条命令激活比如onCommand:fund-plugin.helloWorld。contributes.viewsContainers、contributes.views和activationEvents里的onView都需要自己补。模板没有义务替你猜视图 id所以漏写onView:fund-list是很常见的状态。这里有个版本差异值得留意较新的 VS Code 会根据contributes.views自动推断激活事件但老模板生成的engines.vscode版本较低时推断不一定生效。显式写上onView:fund-list跨版本都稳。1.3 先判断是没激活还是数据空推荐在extension.ts的activate里先打一行日志观察扩展是否被激活export function activate(context: vscode.ExtensionContext) { console.log([fund-plugin] activate called); const provider new FundProvider(context); context.subscriptions.push( vscode.window.registerTreeDataProvider(fund-list, provider) ); }F5 后如果这行没打印说明扩展根本没启动和基金数据无关。如果这行打印了但getChildren没打印那要检查registerTreeDataProvider的第一个参数和package.json里views.id是否都是fund-list。两边只要有一个拼写不同视图就是空白且不会有任何提示。2. package.json 的 contributes.views 与 activationEvents 对账2.1 contributes.viewsContainers 和 contributes.views 的对应关系先看容器和视图的层级。viewsContainers.activitybar定义活动栏上的图标views的 key 必须等于容器的id数组里的id才是视图 id。下面这段是基金插件里比较常见的一组声明{ contributes: { viewsContainers: { activitybar: [ { id: fund-explorer, title: 基金, icon: media/fund.svg } ] }, views: { fund-explorer: [ { id: fund-list, name: 我的基金 } ] } } }注意views里的fund-list才是待会儿传给registerTreeDataProvider的名字。图标文件路径写错时活动栏图标可能显示默认方块但视图 id 写错就直接空白两种错误表现不同。2.2 activationEvents 缺 onView:fund-list 会发生什么package.json顶层的activationEvents决定扩展在什么时机被加载。视图对应的写法是{ activationEvents: [ onView:fund-list ] }少了这一条用户点开基金图标时 VS Code 不会拉起扩展进程activate不执行registerTreeDataProvider自然没跑过。视图容器和标题由contributes静态渲染所以图标会出现但里面没有任何 provider 提供节点显示为空白。可以把它理解成contributes.views相当于在墙上装了一个空相框activationEvents是告诉管理员“有人来看这幅画时把画挂上”。只装相框不喊人看到的就是白墙。2.3 extension.ts 里 registerTreeDataProvider 的注册位置注册动作必须写在activate函数体内用context.subscriptions托管扩展停用时才会自动释放import * as vscode from vscode; import { FundProvider } from ./Provider; export function activate(context: vscode.ExtensionContext) { const provider new FundProvider(context); context.subscriptions.push( vscode.window.registerTreeDataProvider(fund-list, provider) ); } export function deactivate() {}如果这段代码写在activate外面或者视图 id 和package.json不一致同样表现为空白。补activationEvents之前先把这两处 id 对齐避免改完一个又冒出另一个。3. 让 Codex 读 package.json 和 extension.ts 排查激活事件3.1 在 TaoToken 官网注册并创建 Key这一步和基金逻辑没有任何耦合只是给 Codex 准备一把能对话的 Key。打开 TaoToken 注册账号进入控制台创建 API Key复制出来先放本地。Key 统一用占位符表示后面配置里出现YOUR_API_KEY时就替换成你自己那一串。同一页面还能看到模型广场的当前列表。模型 ID 不要凭记忆写也不要用网上旧文章里的例子以模型广场当时展示的为准避免出现“Key 是好的但模型名对不上”的情况。3.2 在 ~/.codex/config.toml 里把 Base URL 指向 https://taotoken.net/apiCodex 的配置放在用户目录下的~/.codex/config.toml。要做的是新增一个自定义 provider把base_url指向统一接入地址model YOUR_MODEL_ID model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY环境变量在终端里导出Key 不要写进配置文件提交到仓库export TAOTOKEN_API_KEYYOUR_API_KEY两个容易混的地方base_url末尾不要加/v1接口地址就是https://taotoken.net/api注册和看模型广场用的是带 UTM 的落地页不要把落地页地址填进base_url。区分清楚以后Codex 走的是统一 API和你本地装的 VS Code 扩展互不干扰。3.3 对话里怎么问才能让它指出 onView:fund-list配置好以后启动 Codex把两个文件的内容贴进去问题问具体一点下面是一个 VS Code 基金插件的 package.json 和 src/extension.ts。 现象是 F5 后活动栏出现基金图标但点开视图空白getChildren 断点不进。 请对照 contributes.views 里的视图 id 和 activationEvents 说明为什么扩展没有被激活并指出需要补哪一条激活事件。 不要改代码只给结论。预期结果是它把views.id的fund-list和activationEvents做比对指出缺少onView:fund-list。修改仍然由你在 VS Code 里手动完成Codex 只承担读文件、解释、对照的角色。基金请求、api.ts里的接口地址、数据解析逻辑都不在这个排查范围内别让它顺手重写这些部分。4. 补上 onView:fund-list 后怎么验证视图真的活了4.1 改完 package.json 先重新 F5在activationEvents数组里补一条保存后回到扩展开发宿主窗口按CtrlShiftF5重启或者关掉宿主窗口重新 F5。再点活动栏的基金图标视图区域应该出现节点。如果仍然空白先看调试控制台的activate called有没有打印没打印就是配置还没生效确认改动保存到了正确的package.json。4.2 用日志或 OutputChannel 确认 getChildren 被调用视图出现但内容为空时加日志确认 provider 被调用import * as vscode from vscode; export class FundItem extends vscode.TreeItem { constructor( public readonly code: string, public readonly label: string, public readonly nav: string ) { super(label, vscode.TreeItemCollapsibleState.None); this.description nav; } } export class FundProvider implements vscode.TreeDataProviderFundItem { private _onDidChangeTreeData new vscode.EventEmittervoid(); readonly onDidChangeTreeData this._onDidChangeTreeData.event; constructor(private context: vscode.ExtensionContext) {} getChildren(element?: FundItem): vscode.ProviderResultFundItem[] { console.log([fund-list] getChildren, element); if (element) { return []; } return [new FundItem(000001, 示例基金, 1.234)]; } getTreeItem(element: FundItem): vscode.TreeItem { return element; } }日志能打印说明激活、注册、视图 id 三件事都对了。这时再换成api.ts返回的真实数据如果列表为空问题就落到请求或解析上和activationEvents无关。4.3 顺手对照 Provider.ts 与 api.ts 的职责Provider.ts只负责把数据转成TreeItemapi.ts负责发请求和解析。视图空白属于第一层问题数据为空属于第二层。先补onView让第一层通过再去api.ts里检查基金代码拼装、返回结构字段名、超时处理。把两层混在一起改很容易在激活没通的情况下反复调接口浪费时间。5. 视图还空白时按这张表对照排查5.1 激活、注册、数据三层的常见现象现象优先检查处理方向图标出现展开空白activate日志不打印activationEvents补onView:fund-listactivate打印getChildren不进registerTreeDataProvider的 id与views.id对齐getChildren进了但无节点api.ts返回值检查请求与解析Codex 对话报连接失败config.toml的base_url用https://taotoken.net/api不带/v15.2 模型 ID 与 Base URL 的坑Codex 侧最常见的两个错误都出在配置行。模型 ID 写了不存在的名字对话会直接报模型不可用这时回到 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 看模型广场当前列表用展示的 ID 重新填。base_url多写/v1请求会打到不存在的路径上现象可能是 404也可能直接超时。改成https://taotoken.net/api后重启 Codex 再试。5.3 激活通了但基金数据拿不到如果getChildren已经执行返回[]把api.ts的请求地址先放进浏览器验证一次确认返回结构没变。基金接口字段偶尔会调整解析代码里写死的键名对不上时map出来就是空数组。把响应片段贴给 Codex让它对照FundItem的构造参数说明差异改哪一行由你自己决定。6. 跑通之后去控制台对一下这次调用配好通道、让 Codex 指出onView:fund-list之后建议把这次对话当成一次真实验证去 TaoToken 模型对话 用同一把 Key 发一条消息确认模型 ID 和 Base URL 没填错。如果后续要长期用 Codex 读工程、查package.json可以看 Coding Plan 是否合适Key 不够用时在 控制台 API Keys 再建一把。回到插件本身activationEvents补完只是让视图亮起来接下来照着原始教程继续写api.ts里的基金请求把真实净值渲染到TreeItem上才算把这条排障闭环走完。
返回列表