S-Tracker - VSCode 埋点事件追踪插件
版本 1.1.9
自动识别、高亮和追踪代码中的 bridge.trackEvent() 埋点事件
文档：Bridge埋点专用实现 · 配置指南 · 架构流程图
✨ 功能特性
🎯 精准识别
专门识别 bridge.trackEvent 调用
- 点击埋点 (clk)
- PV埋点 (pv)
- 曝光埋点 (exp)
- 支持带参数埋点
|
🌈 差异化视觉
根据埋点类型区分显示
- 蓝色高亮 + 斜体E图标 (clk)
- 绿色高亮 + 斜体E图标 (pv)
- 橙色高亮 + 斜体E图标 (exp)
- 悬停显示详情 + 可点击跳转平台
|
⚡ 实时更新
编辑时即时反馈
- 文档修改自动刷新
- 防抖优化性能
- 缓存机制加速
- 异步解析不阻塞
|
🔧 简单配置
开箱即用
- 专注 bridge.trackEvent
- 可调整高亮颜色
- 支持 JS/TS/JSX/TSX
- 启用/禁用开关
|
🚀 快速开始
1. 安装依赖
npm install
2. 编译项目
npm run compile
3. 启动调试
按 F5 启动调试，会打开一个新的 VSCode 窗口。
4. 测试插件
在新窗口中打开 test-example.js 或 test-example.vue 文件查看效果。
📸 效果预览
// 点击埋点 - 蓝色 🅔
bridge.trackEvent('clk', 'button_click');
// PV埋点 - 绿色 🅔
bridge.trackEvent('pv', 'page_view', { par: { id: 123 } });
// 曝光埋点 - 橙色 🅔
bridge.trackEvent('exp', 'item_exposure');
// 不合法 - 黄色 ⚠️
bridge.trackEvent('clk', '123-invalid');
📚 文档
| 文档 |
说明 |
| bridge埋点专用实现.md |
完整实现方案 + 技术架构（核心文档） |
| 配置指南.md |
详细配置说明 |
| 架构流程图.md |
可视化架构图 |
🛠️ 技术栈
- TypeScript + VSCode Extension API
- TypeScript Compiler API（AST 精确解析）
- 支持 JS/TS/JSX/TSX/Vue 文件
📂 项目结构
s-tracker/
├── src/
│ ├── extension.ts # 插件入口
│ ├── tracker/ # 解析器和类型定义
│ ├── decorations/ # 高亮和图标装饰
│ └── utils/ # 工具函数
├── resources/icons/ # SVG 图标
├── docs/ # 文档
└── test-example.* # 测试文件
🎯 支持格式
bridge.trackEvent('clk', 'event_name') // 点击
bridge.trackEvent('pv', 'event_name', { par: {} }) // PV
bridge.trackEvent('exp', 'event_name') // 曝光
支持文件：JS、TS、JSX、TSX、Vue
⚙️ 配置项
{
"s-tracker.platformUrl": "https://point-platform.soulapp-inc.cn/point/document",
"s-tracker.eventNamePattern": "^[A-Za-z][A-Za-z0-9_]*$",
"s-tracker.clickColor": "rgba(33, 150, 243, 0.2)",
"s-tracker.pvColor": "rgba(76, 175, 80, 0.2)",
"s-tracker.exposureColor": "rgba(255, 152, 0, 0.2)"
}
详细配置说明请查看 docs/配置指南.md 文件
🔥 核心特性
- AST 精确解析: 使用 TypeScript Compiler API，支持复杂语法
- 差异化视觉设计: 三种类型独立的图标和颜色
- 事件名验证: 不合法的事件名显示黄色警告
- 平台跳转: 悬停查看详情，点击跳转埋点平台
- 性能优化: 防抖 500ms + 缓存机制
💡 常见问题
- 图标不显示: 检查
resources/icons/ 文件，重启 VSCode
- Vue 文件不识别: 确认
package.json 中包含 "onLanguage:vue"
- 大文件卡顿: 增加防抖时间或启用缓存机制
详细文档请查看 docs/bridge埋点专用实现.md 文件
📄 许可证
MIT License
Made with ❤️ for Bridge Tracking
