codemirror duplicate finder 的高亮是按组标记而非实时染色,仅在触发扫描后生效,侧边栏聚合显示重复块并支持跳转,背景反白瞬时提示,避免视觉污染。

CodeMirror Duplicate Finder 的高亮机制不是“自动渲染”,而是分组标记
它不会像语法高亮那样实时染色整段代码,而是在检测到重复块后,把所有匹配位置统一打上「可跳转的高亮标签」,并聚合显示在侧边栏。你点击其中一处,编辑器会滚动并聚焦到对应行,同时该行背景短暂反白(类似 Ctrl+F 搜索命中效果),但不会常驻着彩色背景。
这个设计是为了避免视觉污染——连续 12 行重复代码若每行都涂满颜色,反而看不清结构。真正起作用的是侧边栏里的分组列表,每组标题标明重复次数和文件路径,点开就能批量跳转。
- 高亮只在触发
Find Duplicates in Workspace后生效,不随编辑实时更新 - 默认不标记单行或空行、注释行、纯空白行;若需包含字符串内容(如 JSX 中的重复模板),得手动开启
duplicate-finder.includeStrings - 相似度低于阈值(默认 85%)或行数不足(默认 8 行)的片段完全不进列表,也不会被标出
为什么重复代码“看起来没高亮”?常见三类漏判场景
不是插件失效,而是输入条件没满足。最常踩的坑是:扫描范围被过滤、内容被跳过、或重复本身不符合检测逻辑。
-
**/node_modules/**、**/.git/**等路径默认被排除——如果你怀疑某处重复藏在lib/或dist/下,先去设置里临时关掉files.exclude相关项 - 两段逻辑等价但写法不同(比如
for (let i = 0; i vs <code>arr.forEach(...))不会被识别——它比对的是文本连续块,不是 AST - 重复块中间夹了单行注释或空行,会直接断开成两个片段;想让它连起来,得调低
duplicate-finder.similarityThreshold并启用duplicate-finder.ignoreWhitespace
如何让高亮更明显?靠 settings.json 补一手
插件本身不提供背景色配置,但你可以用 VSCode 原生的 editor.wordHighlightBackground 强制给重复位置加一层底色——前提是这些重复块已被识别为“同一语义单元”。操作路径很窄,只适用于变量名、函数名等被语言服务标记过的标识符。
- 打开
settings.json,加入:"editor.wordHighlightBackground": "#ff9e4d40",<br>"editor.wordHighlightStrongBackground": "#ff9e4d80"
- 这两行只对「已由语言服务解析出作用域」的重复变量有效;纯文本重复(比如两段 JSON 配置)依然不会变色
- 别碰
editor.selectionHighlightBackground——它只管你当前选中的那个词,不影响其他匹配项
真要视觉强提示,得换思路:用 highlight-words 插件手动标
当 CodeMirror Duplicate Finder 找出重复块后,你可以复制其中一段典型代码(比如 5–6 行核心逻辑),用 highlight-words 插件把它设为关键词,全项目高亮。这不是自动检测,但胜在醒目可控。
- 安装
highlight-words后,必须在settings.json里配highlightwords.colors和highlightwords.defaultMode,否则不生效 - 推荐模式值设为
3(全词 + 忽略大小写),避免map把mapStateToProps也带进来 - 快捷键
Ctrl+Shift+H绑定后,输入刚复制的代码片段回车,所有匹配位置立刻叠加半透明色块,比原生检测直观得多











