能查Vue组件里的重复,但默认跳过template/script中的注释和字符串,需手动开启duplicate-finder.includeStrings:true并调小duplicate-finder.minLines至5,同时确保目录未被.gitignore排除。

CodeMirror Duplicate Finder 能不能查 Vue 组件里的重复?
能,但默认不查——它会跳过 <template></template>、<script></script> 块里的注释和字符串内容,更不会解析 Vue 的编译时语法(比如 v-if、v-for 或插值表达式)。如果你的重复逻辑藏在 JSX 风格的模板里、带换行的 `${a} ${b}` 模板字符串中,或者被 // TODO: 复制自 xxx.vue 这类注释隔开,插件直接无视。
要让它生效,必须手动开启两个配置项:
-
duplicate-finder.minLines改成5(Vue 单文件组件里很多逻辑钩子/计算属性不足 8 行) -
duplicate-finder.includeStrings设为true(否则所有<template></template>和带反引号的 JS 字符串全被过滤)
另外确认 files.exclude 或 .gitignore 没把 src/views/** 或 src/components/** 排除掉——漏目录比漏配置更常见。
为什么 Ctrl+Shift+F 在 .vue 文件里搜不到“逻辑重复”?
因为 VS Code 原生搜索只做字面匹配,完全不管 Vue 的语义结构。典型失效场景:
立即学习“前端免费学习笔记(深入)”;
- 一处写
axios.get('/user', { params: { id } }),另一处写fetch(`/user?id=${id}`)→ 关键词不同,搜axios或fetch各漏一半 - 两段
<el-table-column></el-table-column>渲染逻辑,仅差一个prop名(userNamevsnickName)→ 字符串不等,直接判为不同 - 重复的表单校验逻辑被拆在
rules对象和onSubmit函数里 → 非连续多行,插件和搜索都抓不住
这时候更务实的做法是:用 Ctrl+Shift+F 搜共性副作用关键词,比如 ElMessage.error、this.$router.push、localStorage.setItem,把结果里前 3–4 个文件打开并排查看,肉眼扫结构相似度。
Vue 项目里哪些重复类型插件根本发现不了?
CodeMirror Duplicate Finder 对以下情况基本无响应:
- 同一段数据处理逻辑,一处写成
computed,另一处写成methods里的函数 - 两个
setup()函数,一个用ref+.value,另一个用reactive+ 解构 → 变量访问模式不同,文本相似度骤降 - 重复的错误兜底逻辑,但被塞进不同
catch块,且其中一处多了console.warn→ 差一行日志,就跨过阈值
这类“变体重复”没有银弹,只能靠人工辅助:把疑似块复制进 diffchecker.com,或用命令行工具 simian(需配 simian.json)跑一次跨文件扫描——它对空格缩进更宽容,但依然不理解 ref 和 reactive 是等价的。
检测完之后,合并重复代码要注意什么?
插件只负责标出“长得像”,不判断“能不能合”。尤其在 Vue 项目里,这两点最容易踩坑:
- 两处重复分别在
src/views/order/和src/views/user/下 → 合并前先问:未来订单模块加字段校验、用户模块加权限控制,这个公共函数要不要跟着改?别为了去重把耦合埋进核心逻辑 - 重复块里有
this.$t('xxx')或useI18n()→ 抽成独立函数后,i18n 上下文可能丢失,得显式传t函数或用defineComponent包一层
真正难的从来不是找重复,而是判断哪一段该抽象、哪一段该保留差异——工具扫出 12 处疑似,最后只合并了 3 处,这很正常。


















