VSCode原生不支持语义查重,需依赖CodeMirror Duplicate Finder(调低minLines至5、similarityThreshold至75、开启includeStrings)和jsinspect(AST级检测,忽略标识符与字面量差异)组合使用。

VSCode 原生不支持语义查重,必须靠插件或命令行工具;对前端项目最实用的组合是 CodeMirror Duplicate Finder(快速扫结构重复)+ jsinspect(深挖 AST 级逻辑重复)。
为什么 Ctrl+Shift+F 搜不到真正的重复代码
它只做字符串匹配,完全无视语义差异:axios.post 和 fetch 调用同一接口,变量名从 data 改成 payload,缩进从 2 空格变成 4 空格,甚至包裹在 JSX 或模板字符串里——这些都会直接漏掉。常见错误现象包括:手动搜 localStorage.setItem 找到 4 处,第 5 处用了 sessionStorage 就被跳过;两个几乎一样的错误处理函数,仅因注释位置不同,就被当成完全无关。
CodeMirror Duplicate Finder 怎么调才真有用
装完不等于能用,得改三个关键配置项:
- 把
duplicate-finder.minLines改成5(默认是 8),否则 React Hook 或小型工具函数根本触发不了 - 把
duplicate-finder.similarityThreshold调到75(默认 85),变量名一换相似度就崩到 60 以下 - 若重复藏在
jsx或`${a} ${b}`里,必须开duplicate-finder.includeStrings: true - 确认
.gitignore没排除待查目录(比如src/hooks/**被忽略了,那再准也扫不到)
触发方式很简单:右键 → Find Duplicates in Workspace,结果按组显示在侧边栏,点任意一处直接跳转所有匹配位置。
jsinspect 适合查“长得不像但逻辑一样”的前端重复
它基于 AST,能识别 for (let i = 0; i 和 arr.forEach(item => {...}) 是等价遍历逻辑,对 Vue/JSX/TS 全支持。安装和运行只需两步:
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。
npm install -g jsinspect-
jsinspect -I -L -t 30 --ignore "node_modules|test" src/(-I忽略标识符差异,-L忽略字面量,-t 30只报超 30 字节的重复块)
注意:它不扫描注释、不处理 BOM 文件,Windows 上若文件编码是 UTF-8 with BOM,先用 VSCode 右下角点击编码 → Convert to UTF-8(无 BOM)再跑。
别指望工具自动合并,人工判断才是关键
插件只能告诉你“这两段代码很像”,但该不该合并,得你来定:
- 两处重复分别在
src/user/和src/order/下?先想清楚它们未来会不会有不同演化路径——比如用户中心要加埋点,订单模块却要删日志 - 一段逻辑被拆进两个
if分支,或者只差一行if (!x) return;,插件基本标不出,这时更高效的是:Ctrl+Shift+F搜共性关键词(如catch (err)、setError),把疑似块复制进 diffchecker.com 快速比对 - 所有操作前务必
Ctrl+S保存当前文件——未保存的内容不会被任何插件或命令行工具读取
最易被忽略的一点:重复代码检测不是“有没有”,而是“值不值得抽”。工具扫出 12 组疑似重复,其中 9 组是临时调试日志或样板代码,真正需要重构的可能只有 2 处。别让数字干扰判断。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










