VSCode自定义扩展如何实现点击按钮时显示标准蓝色加载条？

你可以直接使用VSCode官方提供的window.withProgressAPI来实现这个效果，这正是Git扩展用来显示提交进度的方式，具体实现步骤如下：

核心实现代码 #

在按钮的点击回调函数中，用withProgress包裹你的耗时计算逻辑：

import * as vscode from 'vscode';

// 按钮点击处理函数
async function onButtonClick() {
  await vscode.window.withProgress({
    // 指定进度条显示位置：源代码控制面板顶部（和Git提交的位置一致）
    location: vscode.ProgressLocation.SourceControl,
    // 进度条旁的提示文本
    title: "正在计算结果...",
    // 是否允许用户取消操作，按需设置
    cancellable: false
  }, async (progress, cancellationToken) => {
    // 执行你的耗时计算逻辑
    const calculationResult = await runLongCalculation();

    // 计算完成后给出提示
    vscode.window.showInformationMessage(`计算完成：${calculationResult}`);

    // 若需分步更新进度，可调用此方法
    // progress.report({ increment: 50, message: "完成一半..." });
  });
}

// 模拟耗时计算的函数
async function runLongCalculation() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("最终计算结果");
    }, 3000);
  });
}

关键参数说明 #

• location: vscode.ProgressLocation.SourceControl：这个枚举值决定了进度条显示在源代码控制面板的顶部，完全匹配Git提交时的蓝色进度条位置。
• title：设置进度条旁边的提示文字，让用户清楚当前操作内容。
• cancellable：如果设为true，用户可点击进度条旁的取消按钮终止操作，此时cancellationToken会触发取消信号，你可以在计算逻辑中通过cancellationToken.isCancellationRequested判断是否需要中断任务。

进阶：分步更新进度 #

如果你的计算可以拆分为多个阶段，还能实时更新进度百分比和提示信息：

progress.report({ increment: 20, message: "初始化数据..." });
// 执行第一阶段任务
await stageOneTask();

progress.report({ increment: 30, message: "处理核心逻辑..." });
// 执行第二阶段任务
await stageTwoTask();

progress.report({ increment: 50, message: "生成结果..." });
// 执行最后阶段任务
await finalStageTask();

内容的提问来源于stack exchange，提问作者NiceGuySaysHi