时间戳

首页 > 解决方案 > Vscode 扩展：如何实现悬停功能以向命令添加参数，例如，使用查询运行搜索命令

javascript - Vscode 扩展：如何实现悬停功能以向命令添加参数，例如，使用查询运行搜索命令

问题描述

我正在尝试在 vscode 悬停功能中开发一个自定义按钮。这意味着如果我单击快捷按钮，它将转到搜索侧边栏并进行特定的查询搜索。参考上传的两张图片。

悬停搜索按钮

结果侧边栏更改

在 vscode 命令形式中，扩展代码将如下所示。（这很好用，除了它需要从命令托盘运行）

let disposable = vscode.commands.registerCommand('test-hover.helloWorldSearch', () => {
    var word = "i_want_to_search";
    const searchOptions = {
        query: word,
    };
    vscode.commands.executeCommand('workbench.action.findInFiles', searchOptions);
});
context.subscriptions.push(disposable);

之后，我通过使用 vscode.languages.registerHoverProvider 转换为悬停，代码如下所示：

     let disposable1 = vscode.languages.registerHoverProvider('javascript', {
     provideHover(document, position, token) {
            var word = "i_want_to_search";
            const searchOptions = {
                query: word,
            };
            const commentCommandUri = vscode.Uri.parse(`command:workbench.action.findInFiles`);
            const contents = new vscode.MarkdownString(`[Search String](${commentCommandUri})`);
            contents.isTrusted = true;
            return new vscode.Hover(contents);
        }
    });
    context.subscriptions.push(disposable1);

此代码能够导航侧边栏以在文件中搜索但无需任何查询 seacrh。 问题是，如果我使用“vscode.Uri.parse”，则无法将“searchOptions”传递给命令。有没有其他方法可以执行与上述代码相同的操作但能够通过 searchOption？我曾尝试在互联网上搜索许多不同的示例，但大多数只是在没有 searchOption 的情况下运行命令。

标签： javascriptvisual-studio-codevscode-extensions

解决方案

命令的参数必须作为编码字符串附加，如command-uris所示。

const searchCommandUri = vscode.Uri.parse(
    `command:workbench.action.findInFiles?${encodeURIComponent(JSON.stringify(searchOptions))}`
);

const contents = new vscode.MarkdownString(`[Search String](${searchCommandUri})`);

如果您想获得悬停的单词，请尝试以下代码：

const word = document.getText(document.getWordRangeAtPosition(position));

现在您的“搜索字符串”悬停按钮将搜索被悬停的单词。

然后将文本：“搜索字符串”更改为您要搜索的实际单词：

const contents = new vscode.MarkdownString(`[Search: ${word}](${searchCommandUri})`);

悬停搜索按钮演示

推荐阅读