企业官网建设流程全解析

用 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_source=taotoken_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. 侧边栏有基金图标却没列表，先别急着改 TreeDataProvider

1.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/api

Codex 的配置放在用户目录下的~/.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_KEY=YOUR_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数组里补一条，保存后回到扩展开发宿主窗口，按Ctrl+Shift+F5重启，或者关掉宿主窗口重新 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.TreeDataProvider<FundItem> { private _onDidChangeTreeData = new vscode.EventEmitter<void>(); readonly onDidChangeTreeData = this._onDidChangeTreeData.event; constructor(private context: vscode.ExtensionContext) {} getChildren(element?: FundItem): vscode.ProviderResult<FundItem[]> { 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只负责把数据转成TreeItem，api.ts负责发请求和解析。视图空白属于第一层问题，数据为空属于第二层。先补onView让第一层通过，再去api.ts里检查基金代码拼装、返回结构字段名、超时处理。把两层混在一起改，很容易在激活没通的情况下反复调接口，浪费时间。

5. 视图还空白时，按这张表对照排查

5.1 激活、注册、数据三层的常见现象

5.2 模型 ID 与 Base URL 的坑

Codex 侧最常见的两个错误都出在配置行。模型 ID 写了不存在的名字，对话会直接报模型不可用，这时回到 https://taotoken.net/?utm_source=taotoken_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上，才算把这条排障闭环走完。