S-Tracker - VSCode 埋点事件追踪插件

版本 1.3.2

自动识别、高亮和追踪代码中的 bridge.trackEvent() 埋点事件

文档：Bridge埋点专用实现 · 配置指南 · 架构流程图

✨ 功能特性

🎯 精准识别

专门识别 bridge.trackEvent 调用

点击埋点 (clk)
PV埋点 (pv)
曝光埋点 (exp)
支持带参数埋点

🌈 差异化视觉

根据埋点类型区分显示

蓝色高亮 + 斜体E图标 (clk)
绿色高亮 + 斜体E图标 (pv)
橙色高亮 + 斜体E图标 (exp)
黄色警告 + 警告图标（不合法）
悬停显示详情 + 可点击跳转平台

📊 统计面板

埋点可视化统计

侧边栏树形视图
当前文件埋点统计
文件夹批量扫描
点击跳转到代码行

⚡ 实时更新

编辑时即时反馈

文档修改自动刷新
防抖优化性能（500ms）
支持 JS/TS/JSX/TSX/Vue
配置实时热更新

🚀 快速开始

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	详细配置说明

🛠️ 技术栈

TypeScript + VSCode Extension API
TypeScript Compiler API（AST 精确解析）
支持 JS/TS/JSX/TSX/Vue 文件

📂 项目结构

s-tracker/
├── src/
│   ├── extension.ts              # 插件入口
│   ├── tracker/
│   │   ├── parser.ts             # Bridge埋点解析器（AST解析）
│   │   └── types.ts              # 类型定义
│   ├── decorations/
│   │   ├── highlighter.ts        # 代码高亮装饰器
│   │   └── gutterIcon.ts         # Gutter 图标装饰器
│   ├── views/
│   │   └── trackerTreeView.ts    # 埋点统计树形视图
│   └── utils/
│       └── folderScanner.ts      # 文件夹扫描器
├── resources/
│   └── icons/                    # SVG 图标资源
│       ├── click.svg             # 点击图标（蓝色）
│       ├── pageview.svg          # PV图标（绿色）
│       ├── exposure.svg          # 曝光图标（橙色）
│       ├── warning.svg           # 警告图标（黄色）
│       └── logo.svg              # Logo图标
├── docs/                         # 完整文档
│   ├── bridge埋点专用实现.md     # 核心实现文档
│   ├── 配置指南.md               # 配置说明
│   └── 架构流程图.md             # 架构设计
├── test-example.js               # JS测试文件
├── test-example.vue              # Vue测试文件
└── test-folder/                  # 文件夹扫描测试

🎯 支持格式

bridge.trackEvent('clk', 'event_name')              // 点击
bridge.trackEvent('pv', 'event_name', { par: {} })  // PV
bridge.trackEvent('exp', 'event_name')              // 曝光

支持文件：JS、TS、JSX、TSX、Vue

⚙️ 配置项

{
  "s-tracker.enable": true,
  "s-tracker.platformUrl": "https://your-tracker-platform.com/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)",
  "s-tracker.invalidColor": "rgba(255, 193, 7, 0.2)",
  "s-tracker.supportedLanguages": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "vue"
  ]
}

详细配置说明请查看 docs/配置指南.md 文件

🔥 核心特性

AST 精确解析: 使用 TypeScript Compiler API，支持复杂语法和 Vue 文件
差异化视觉设计: 四种类型独立的图标和颜色（clk/pv/exp/invalid）
事件名验证: 不合法的事件名显示黄色警告，可配置验证规则
统计面板: 侧边栏显示埋点统计，支持文件夹批量扫描
平台跳转: 悬停查看详情，点击跳转埋点平台（可配置 URL）
性能优化: 防抖 500ms + 配置热更新

💡 使用指南

文件模式 - 当前文件统计

打开任意 JS/TS/Vue 文件，左侧活动栏自动显示埋点统计：

✅ 编辑时自动刷新
✅ 按类型分组显示（clk/pv/exp）
✅ 显示合法/不合法埋点数量
✅ 点击跳转到代码行

文件夹模式 - 批量扫描统计

三种启动方式：

右键菜单（推荐）
- 在资源管理器中右键文件夹
- 选择 "扫描文件夹埋点"
工具栏按钮
- 打开"埋点追踪"面板
- 点击标题栏的搜索图标 🔍
命令面板
- Cmd/Ctrl+Shift+P → 输入"扫描文件夹埋点"

扫描特性：

📊 支持扫描整个文件夹（递归）
🚀 自动跳过 node_modules
📁 按文件分组显示结果
🎯 点击埋点跨文件跳转

实际应用场景：

项目埋点审查：检查模块埋点是否完整
不合法埋点排查：找出所有命名不规范的埋点
代码重构检查：确认埋点没有丢失
埋点文档生成：导出统计结果

快速跳转

代码 → 平台：悬停在埋点代码上，点击链接跳转到埋点平台
面板 → 代码：在统计面板中点击埋点项，自动跳转到代码行
跨文件跳转：文件夹扫描模式支持在不同文件间快速定位

自定义配置

打开设置 → 搜索 "S-Tracker" → 调整：

🎨 高亮颜色（4种类型）
🔗 埋点平台地址
✅ 事件名验证规则
📝 支持的文件类型

📄 许可证

MIT License

Made with ❤️ for Bridge Tracking

S-Tracker: Bridge埋点追踪

s-tracker