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

迈克·李施克

对于长时间运行的过程，我想在Visual Studio Code中显示繁忙的指示器。像打字稿扩展名这样的使用已经足够了：

但是，使用正常状态栏项目无法正常工作。在开始操作之前，我什至无法显示该项目，因为它似乎需要为此将控制权返回给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值。如果连简单的文本更新都行不通，我怎么还可以显示动画？

阿莱夫尼亚尼

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

该的WebPack进展扩展是如何做到这一点的好例子。

基本上，您必须创建要更新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";
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。