如何在 vscode 中实现忙碌指示器?

Mik*_*hke 3 typescript visual-studio-code vscode-extensions

对于长时间运行的过程,我想在 Visual Studio Code 中显示一个繁忙的指示器。拥有类似 typescript 扩展使用的东西就已经足够了:

在此处输入图片说明

但是,使用正常的状态栏项目无法按预期工作。我什至无法在开始操作之前立即显示该项目,因为它似乎需要为此将控制权返回给 vscode。

我试过的是这样的:

...
busyIndicator = window.createStatusBarItem(StatusBarAlignment.Left, 1000);
busyIndicator.text = "##";
busyIndicator.show();

...

workspace.onDidSaveTextDocument((doc: TextDocument) => {
    if (doc.languageId === "antlr") {
        //busyIndicator.show();
        busyIndicator.text = "X";
        let tempPath = Utils.createTempFolder();
        let result = backend.generate(doc.fileName, { outputDir: tempPath, listeners: false, visitors: false });
        Utils.deleteFolderRecursive(tempPath);
        //busyIndicator.hide();
        busyIndicator.text = "Y";
    }
});
Run Code Online (Sandbox Code Playgroud)

值 X 永远不会显示,而 Y 在操作结束时出现(如预期)。如果连简单的文本更新都不起作用,我怎么能显示动画呢?

rea*_*pie 9

我无法弄清楚何时withProgress添加了对在状态栏中使用的支持,但我今天可以执行以下操作。

编辑我发现添加对此的支持时,是 2017 年 4 月。请在此处查看 vscode 发行说明

 vscode.window.withProgress({
    location: vscode.ProgressLocation.Window,
    cancellable: false,
    title: 'Loading customers'
}, async (progress) => {
    
    progress.report({  increment: 0 });

    await Promise.resolve();

    progress.report({ increment: 100 });
});
Run Code Online (Sandbox Code Playgroud)

在下图中查看它的实际效果

gif


Mar*_*ark 5

现在查看https://code.visualstudio.com/updates/v1_22#_show-long-running-operations-as-notifications-with-cancellation-support不是状态栏而是通知。

**

将长时间运行的操作显示为具有取消支持的通知

**

我们添加了一个新 API,以在通知中心显示长时间运行的操作,并提供可选的取消支持。在这里显示长时间运行的操作的好处是: 多个操作可以同时报告进度。您可以显示操作进度。用户可以选择取消操作。

调用window.withProgress新的进度位置 ProgressLocation.Notification。将cancellable 设置为true 以显示取消按钮并检查CancellationToken回调中提供的取消 。要显示进度,请在报告进度时利用增量值。请参阅使用此新 API 的扩展的进度示例。