VSCode扩展用TextEditor.setDecorations()动态更新gutter图标时最后项不刷新的问题求解

问题现象 #

• 扩展初始化阶段会创建3种行槽装饰类型，分别对应测试无结果、通过、失败三个状态。初始状态下，所有识别到的测试行都能正常显示无结果状态的行槽图标。
• 逐行运行测试时，已运行的测试能正常切换为对应状态的图标，但始终存在1个已完成运行的测试行残留显示初始的无结果图标；且残留位置固定跟随最后一个运行的测试，和测试本身的代码位置无关。
• 实验验证：如果在非测试关联的行位置额外添加一个无结果状态的行槽占位图标，所有测试行的图标都能正常更新，不会出现残留。

根因定位 #

• setDecorations方法的设计逻辑为：针对传入的装饰类型，全量替换其在当前编辑器上挂载的所有装饰范围。只要该方法被触发，该装饰类型之前设置的所有装饰范围会被完全清除，替换为本次传入的范围集合；即便传入空集合，也会执行全量清空。
• 现有代码的核心缺陷：为每个装饰类型的更新增加了多余的非空判断，仅当对应状态的范围集合长度大于0时，才会调用setDecorations。这种写法会在某类装饰的覆盖范围从非空变为空时，跳过方法调用，导致旧的装饰范围无法被清除。
• 对应场景的残留触发流程：
  1. 初始化阶段所有测试行均被挂载为无结果状态的装饰类型。
  2. 前9个测试完成运行时，无结果状态的范围集合始终保持非空，每次更新都会触发对应装饰的全量替换，已切换为通过/失败状态的行会被自动从无结果装饰的挂载列表中移除，图标正常切换。
  3. 最后一个测试完成运行时，所有测试均已产出结果，无结果状态的范围集合长度变为0。此时代码因非空判断跳过了无结果装饰的setDecorations调用，导致无结果装饰的挂载列表中仍残留最后这个测试行。
  4. 残留的无结果装饰与后设置的通过/失败装饰叠加在同一行，触发行槽图标渲染冲突，最终表现为该行列始终显示初始的无结果图标。
• 实验现象的验证逻辑：额外添加的非测试行无结果占位装饰，让无结果状态的范围集合永远不会变为空，每次更新都会触发全量替换逻辑，自动把最后那个已运行的测试行从无结果装饰的挂载列表中清除，残留问题自然消失。
• 与官方示例的写法差异：官方装饰示例中未对范围集合增加非空判断，而是直接对每个装饰类型执行全量更新，因此不会触发该类残留问题。

解决方案 #

• 删除代码中针对范围集合长度的非空判断，每一轮装饰更新时，对三个装饰类型分别执行一次setDecorations调用，无论对应范围集合的长度是多少。
• 修改后的核心代码片段：

// 移除原有非空判断，对所有装饰类型执行全量范围更新
this.activeEditor.setDecorations(this.decorationPass, rangePass);
this.activeEditor.setDecorations(this.decorationFail, rangeFail);
this.activeEditor.setDecorations(this.decorationNone, rangeNone);

• 说明：传入空范围集合时，setDecorations会正常执行清空逻辑，不会带来额外性能开销，也不会干扰其他装饰类型的正常渲染。

内容的提问来源于stack exchange，提问作者Priceline Negotiator