Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Flash Component TrackerNew to Visual Studio Code? Get it now.
Flash Component Tracker

Flash Component Tracker

fangdeng

|
13 installs
| (0) | Free
A VSCode extension to track Vue component dependencies.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Flash Component Tracker

一个用于追踪Vue组件依赖关系的VSCode插件,并提供金额变量安全检查和弱网环境问题检测功能。

功能特性

组件依赖追踪

  • 自动扫描并识别项目中的Vue组件
  • 分析组件之间的依赖关系
  • 显示组件被引用的位置
  • 在修改组件时提供影响范围预警
  • 支持自定义组件路径管理

金额变量安全检查

  • 自动检测代码中可能存在精度问题的金额变量
  • 发现直接使用数字赋值的金额变量并给出警告
  • 识别可能导致精度丢失的算术运算
  • 支持Vue、JavaScript和TypeScript文件

弱网环境问题检测

  • 检测没有设置超时时间的网络请求
  • 识别缺少错误处理机制的网络调用
  • 发现同步XHR请求等阻塞UI线程的操作
  • 检测页面容器和弹窗是否有加载状态处理
  • 提供弱网环境下可能导致问题的代码修复建议

复制粘贴问题检测

  • 自动识别可能由复制粘贴导致的代码问题
  • 检测相似但不完全相同的API路径,避免接口调用错误
  • 发现重复的变量赋值和对象属性,减少字段名错误
  • 智能分析代码上下文,降低误报率
  • 提供详细的问题描述和修复建议

跨文件复制粘贴检测

  • 自动识别跨文件复制粘贴的代码片段
  • 检测不同文件中相似度高的函数实现
  • 发现重复的组件模板和实现代码
  • 提供相似度分析和公共代码提取建议
  • 支持Vue、React、JavaScript和TypeScript文件

使用方法

  1. 在活动栏中点击组件追踪器图标
  2. 在组件浏览器中查看项目组件列表
  3. 点击组件分析其依赖关系
  4. 在依赖关系视图中查看组件被引用的位置

金额检查功能

  1. 在编辑器中编辑JavaScript/TypeScript/Vue文件时,会自动检查金额变量问题
  2. 在编辑器右键菜单或标题栏中点击"检查金额变量"手动触发检查
  3. 问题将显示在VSCode的"问题"面板中

弱网检测功能

  1. 在编辑器中编辑JavaScript/TypeScript/Vue文件时,会自动检查弱网环境可能导致的问题
  2. 在编辑器右键菜单或标题栏中点击"检查弱网问题"手动触发检查
  3. 问题将显示在VSCode的"问题"面板中,包含详细的问题描述和修复建议
  4. 支持检测页面容器和弹窗中是否有加载状态处理,避免弱网环境下的用户体验问题

复制粘贴检测功能

  1. 在编辑器中编辑JavaScript/TypeScript/Vue文件时,会自动检查可能由复制粘贴导致的问题
  2. 在编辑器右键菜单或标题栏中点击"检查复制粘贴问题"手动触发检查
  3. 问题将显示在VSCode的"问题"面板中,包含详细的问题描述和修复建议
  4. 支持检测相似API路径、重复变量赋值和对象属性等常见复制粘贴问题

跨文件复制粘贴检测功能

  1. 在编辑器中编辑JavaScript/TypeScript/Vue/JSX/TSX文件时,会自动检查可能存在的跨文件复制粘贴问题
  2. 在编辑器右键菜单或标题栏中点击"检查跨文件复制粘贴问题"手动触发检查
  3. 首次检查会扫描工作区中的相关文件,建立代码片段索引
  4. 问题将显示在VSCode的"问题"面板中,包含详细的问题描述、相似度分析和公共代码提取建议
  5. 支持检测跨文件的函数实现和组件模板重复,帮助提取公共代码

配置选项

"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: 检查跨文件复制粘贴问题
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft