Flash Component Tracker
一个用于追踪Vue组件依赖关系的VSCode插件，并提供金额变量安全检查和弱网环境问题检测功能。
功能特性
组件依赖追踪
- 自动扫描并识别项目中的Vue组件
- 分析组件之间的依赖关系
- 显示组件被引用的位置
- 在修改组件时提供影响范围预警
- 支持自定义组件路径管理
金额变量安全检查
- 自动检测代码中可能存在精度问题的金额变量
- 发现直接使用数字赋值的金额变量并给出警告
- 识别可能导致精度丢失的算术运算
- 支持Vue、JavaScript和TypeScript文件
弱网环境问题检测
- 检测没有设置超时时间的网络请求
- 识别缺少错误处理机制的网络调用
- 发现同步XHR请求等阻塞UI线程的操作
- 检测页面容器和弹窗是否有加载状态处理
- 提供弱网环境下可能导致问题的代码修复建议
复制粘贴问题检测
- 自动识别可能由复制粘贴导致的代码问题
- 检测相似但不完全相同的API路径，避免接口调用错误
- 发现重复的变量赋值和对象属性，减少字段名错误
- 智能分析代码上下文，降低误报率
- 提供详细的问题描述和修复建议
跨文件复制粘贴检测
- 自动识别跨文件复制粘贴的代码片段
- 检测不同文件中相似度高的函数实现
- 发现重复的组件模板和实现代码
- 提供相似度分析和公共代码提取建议
- 支持Vue、React、JavaScript和TypeScript文件
使用方法
- 在活动栏中点击组件追踪器图标
- 在组件浏览器中查看项目组件列表
- 点击组件分析其依赖关系
- 在依赖关系视图中查看组件被引用的位置
金额检查功能
- 在编辑器中编辑JavaScript/TypeScript/Vue文件时，会自动检查金额变量问题
- 在编辑器右键菜单或标题栏中点击"检查金额变量"手动触发检查
- 问题将显示在VSCode的"问题"面板中
弱网检测功能
- 在编辑器中编辑JavaScript/TypeScript/Vue文件时，会自动检查弱网环境可能导致的问题
- 在编辑器右键菜单或标题栏中点击"检查弱网问题"手动触发检查
- 问题将显示在VSCode的"问题"面板中，包含详细的问题描述和修复建议
- 支持检测页面容器和弹窗中是否有加载状态处理，避免弱网环境下的用户体验问题
复制粘贴检测功能
- 在编辑器中编辑JavaScript/TypeScript/Vue文件时，会自动检查可能由复制粘贴导致的问题
- 在编辑器右键菜单或标题栏中点击"检查复制粘贴问题"手动触发检查
- 问题将显示在VSCode的"问题"面板中，包含详细的问题描述和修复建议
- 支持检测相似API路径、重复变量赋值和对象属性等常见复制粘贴问题
跨文件复制粘贴检测功能
- 在编辑器中编辑JavaScript/TypeScript/Vue/JSX/TSX文件时，会自动检查可能存在的跨文件复制粘贴问题
- 在编辑器右键菜单或标题栏中点击"检查跨文件复制粘贴问题"手动触发检查
- 首次检查会扫描工作区中的相关文件，建立代码片段索引
- 问题将显示在VSCode的"问题"面板中，包含详细的问题描述、相似度分析和公共代码提取建议
- 支持检测跨文件的函数实现和组件模板重复，帮助提取公共代码
配置选项
"componentTracker.commonPaths": {
"type": "array",
"default": ["src/components", "src/views/lib"],
"description": "公共组件目录"
},
"componentTracker.moneyCheck": {
"type": "object",
"default": {
"enabled": true,
"checkOnSave": true,
"moneyKeywords": [
"amount", "price", "money", "balance", "payment", "cost", "fee", "charge",
"金额", "价格", "余额", "费用", "支付", "成本", "单价", "总价"
]
},
"description": "金额变量检查配置"
},
"componentTracker.networkCheck": {
"type": "object",
"default": {
"enabled": true,
"checkOnSave": true,
"enableLoadingCheck": false,
"rules": {
"noTimeout": true,
"noErrorHandling": true,
"syncXHR": true,
"containerLoading": true
}
},
"description": "弱网问题检查配置"
},
"componentTracker.duplicateCheck": {
"type": "object",
"default": {
"enabled": true,
"checkOnSave": true,
"rules": {
"duplicateApi": true,
"duplicateVariable": true,
"duplicateProperty": true
},
"similarityThreshold": 0.8,
"proximityLines": 30
},
"description": "复制粘贴问题检查配置"
},
"componentTracker.crossFileDuplicateCheck": {
"type": "object",
"default": {
"enabled": true,
"checkOnSave": true,
"rules": {
"functionDuplicate": true,
"componentDuplicate": true
},
"similarityThreshold": 0.9,
"minFragmentLines": 5,
"maxFragmentLines": 50,
"maxCacheFiles": 100
},
"description": "跨文件复制粘贴问题检查配置"
}
命令列表
component-tracker.analyzeComponent: 分析组件依赖component-tracker.refreshComponents: 刷新组件列表component-tracker.openComponent: 打开组件component-tracker.gotoReference: 跳转到引用component-tracker.addCustomPath: 添加自定义组件路径component-tracker.removeCustomPath: 移除自定义组件路径component-tracker.checkMoneyUsage: 检查金额变量component-tracker.checkNetworkIssues: 检查弱网问题component-tracker.checkDuplicateCode: 检查复制粘贴问题component-tracker.checkCrossFileDuplicateCode: 检查跨文件复制粘贴问题
