VSCode扩展开发：装饰器前图标悬停Hover及条目排序问题

问题1：实现鼠标悬停在装饰器前的图标时显示Hover #

当前通过before: { contentIconPath: "image.svg" }添加的图标属于CSS伪元素，VSCode默认不会为伪元素单独触发Hover事件，可通过以下两种方案解决：

• 方案1：用独立空装饰器承载图标与Hover
  放弃before伪元素配置，创建一个覆盖目标位置前空白区域的空文本装饰器，将图标设置为该装饰器的contentIconPath，同时指定hoverMessage。示例代码：

  const iconDecoration = vscode.window.createTextEditorDecorationType({
    contentIconPath: vscode.Uri.file(path.join(extensionPath, 'image.svg')),
    rangeBehavior: vscode.DecorationRangeBehavior.ClosedClosed
  });
  // 计算图标对应的空范围（如在目标文本前的位置创建空范围）
  const iconRange = new vscode.Range(line, col, line, col);
  textEditor.setDecorations(iconDecoration, [{ range: iconRange, hoverMessage: '你的Hover内容' }]);
  

• 方案2：扩展装饰器范围并绑定Hover
  将装饰器的range扩展至包含图标所在虚拟区域（比如把起始位置往前偏移一个字符的虚拟位置），让鼠标悬停图标区域时触发整个装饰器的Hover，同时调整CSS样式确保图标显示位置正确。

问题2：控制Hover内的条目排序 #

要将自定义插入的Hover内容从位置2调整到位置3，可根据内容来源选择对应方法：

• 自定义内容通过Decoration的hoverMessage添加时
  改用vscode.languages.registerHoverProvider注册自定义Hover提供者，并设置较低优先级，让自定义内容排在语言服务（如TS/JS类型提示）等内容之后：

  vscode.languages.registerHoverProvider('typescript', {
    provideHover(document, position, token) {
      return new vscode.Hover('你的自定义Hover内容');
    }
  }, { priority: vscode.HoverProviderPriority.Low });
  

• 需要修改已有Hover内容顺序时
  在自定义Hover提供者中，先获取已有Hover内容，再对内容数组重排序后返回：

  async function provideHover(document, position, token) {
    const existingHovers = await vscode.commands.executeCommand<vscode.Hover[]>(
      'vscode.executeHoverProvider',
      document.uri,
      position
    );
    // 提取已有内容并重新排序，将自定义内容插入到第3位（索引从0开始）
    const allContents = [];
    existingHovers.forEach(hover => allContents.push(...hover.contents));
    const customContent = new vscode.MarkdownString('你的自定义内容');
    allContents.splice(2, 0, customContent);
    return new vscode.Hover(allContents);
  }
  

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