Question

对于长时间运行的过程，我想在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";
    }
});

当操作结束时（如预期的那样），X值从不显示，Y出现。如果甚至没有简单的文本更新，我怎么能显示动画？

Answer 1

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

**

将长时间运行的操作显示为带取消的通知支撑

**

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

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

Answer 2

我无法确定何时添加了在状态栏中使用withProgress的支持，但是今天我可以执行以下操作。

我发现添加此功能的支持是在2017年4月，我发现它。请参阅vscode发行说明here

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

    progress.report({  increment: 0 });

    await Promise.resolve();

    progress.report({ increment: 100 });
});

在下图中看到它的作用

gif

Answer 3

没有已发布的API与Tasks类似（显示在StatusBar中旋转）。但是看一下VSCode源代码，特别是task.contributions.ts，您可以看到它结合了setInterval和EventEmitter来处理进度和状态栏更新

Webpack Progress extension是如何做到这一点的一个很好的例子。

基本上，您必须创建希望更新StatusBar的时间间隔。这将是您的backend流程监控：

initializeWacher() {
    this.timer = setInterval(() => {
        this.progress++;
        fs.stat(tempPath, (err, state) => {
            if(err && err.code === "ENOENT") {
                this.emit("progressFinish")
            } else {
                this.emit("progressChange", this.percentage)
            }
        });        
    }, 300);
}

处理间隔发出的事件：

watcher.initializeWacher();
watcher.on("progressChange", (progress) => {
    progress.updateProgress(progress);
});
watcher.on("progressFinish", () => {
    progress.finishProgress();
    watcher.dispose();
});

当事件发生时（旋转本身）更新StatusBar：

private static progressChars: string = '|/-\\';
...
updateProgress(percentage) {
    ...
    let index = percentage % BusyIndicatorItem.progressChars.length;
    let chars = BusyIndicatorItem.progressChars.charAt(index);
    busyIndicator.text = "Backend processing " + chars;
}

finishProgress() {
    this.statusBarItem.text = "Backend finished";
}

如何在vscode中实现忙指示？

3 个答案: