如何自定义VS Code资源管理器中文件的悬停提示弹窗？

云原生阿岚

2026-7-5

自定义VS Code资源管理器文件悬停弹窗的方法

可以实现自定义，让悬停弹窗显示文件顶部注释的描述信息，主要有两种途径：

一、用现成扩展搞定

Hover Preview：这类扩展支持自定义悬停内容，安装后在设置里配置规则，指定提取文件顶部的注释块（比如匹配/** ... */这类块注释），就能在悬停时展示注释里的描述。
File Hover：这个扩展允许自定义悬停模板，你可以通过设置fileHover.contentTemplate，引用文件头部注释的变量，实现提取描述信息的效果。

二、自己写简易扩展（适合有基础的用户）

如果现成扩展满足不了需求，用VS Code的API写个简单扩展也不难，核心步骤如下：

注册监听资源管理器文件项的onHover事件
触发悬停时，读取目标文件内容，提取顶部的注释描述
将提取到的内容返回，展示在悬停弹窗里

核心代码片段（以TS为例）：

import * as vscode from 'vscode';
import * as fs from 'fs';

export function activate(context: vscode.ExtensionContext) {
    const disposable = vscode.languages.registerHoverProvider({ scheme: 'file' }, {
        provideHover(document) {
            // 读取文件内容
            const fileContent = fs.readFileSync(document.uri.fsPath, 'utf8');
            // 提取JS/TS风格的顶部块注释，可根据自己的文件类型调整正则
            const commentMatch = fileContent.match(/^\/\*\*(.*?)\*\//s);
            if (commentMatch) {
                // 清理注释里的星号前缀
                const desc = commentMatch[1].replace(/^\s*\*\s?/gm, '').trim();
                return new vscode.Hover(desc);
            }
            return undefined;
        }
    });

    context.subscriptions.push(disposable);
}

注意：要适配不同文件类型的注释格式，比如Python的"""多行注释、Java的块注释，需要调整正则表达式。