Cancel progress programmatically in VS Code extensions

This post is over a year old, some of this information may be out of date.

With the Visual Studio Code progress notification (vscode.window.withProgress), you can make it cancellable. This cancellable option allows the user to cancel it by clicking on a cancel button.

Progress notification in Visual Studio Code

What if you want to cancel it programmatically? That was the case for one of my extensions. When a user performs another action triggered outside the progress, it should stop the current progress and remove the notification.

For example, in your progress, you are processing all files because the user requested to analyze these. Once the user opens another view or requests to analyze a single file, the other progress can be stopped.

The cancellation token

With the progress its callback, you get a CancellationToken argument, although this token can only be used to monitor if the user has canceled the operation.

1
vscode.window.withProgress({
2
    title: 'Please wait...',
3
    location: vscode.ProgressLocation.Notification,
4
    cancellable: true
5
  },
6
  async (progress, token) => {
7
  // You code to process the progress
8

9
  const seconds = 10;
10
  for (let i = 0; i < seconds; i++) {
11
    // Increment is summed up with the previous value
12
    progress.report({ increment: seconds })
13
    await sleep(1000);
14
  }
15
});

If we want to do this programmatically, you must create your own CancellationToken logic. The nice thing is that Visual Studio Code’s extension API already provides this.

To create your cancellation logic, you can use the vscode.CancellationTokenSource class. When creating a new instance, you will get a cancellation token that you can cancel and dismiss. All you have to do is hook it up in your progress and listen to the cancellation trigger.

The code for this looks as follows:

1
import * as vscode from 'vscode';
2

3
const sleep = (time: number) => {
4
  return new Promise((resolve) => {
5
    setTimeout(() => {
6
      resolve(true);
7
    }, time);
8
  });
9
}
10

11
let customCancellationToken: vscode.CancellationTokenSource | null = null;
12

13
export function activate(context: vscode.ExtensionContext) {
14

15
  vscode.window.withProgress({
16
    title: 'Please wait...',
17
    location: vscode.ProgressLocation.Notification,
18
    cancellable: true
19
  },
20
  async (progress, token) => {
21
    return new Promise((async (resolve) => {
22
      // You code to process the progress
23

24
      customCancellationToken = new vscode.CancellationTokenSource();
25

26
      customCancellationToken.token.onCancellationRequested(() => {
27
        customCancellationToken?.dispose();
28
        customCancellationToken = null;
29

30
        vscode.window.showInformationMessage("Cancelled the progress");
31
        resolve(null);
32
        return;
33
      });
34

35
      const seconds = 30;
36
      for (let i = 0; i < seconds; i++) {
37
        await sleep(1000);
38
      }
39

40
      resolve(null);
41
    }));
42
  });
43

44

45
  // Cancel the progress after 10 seconds
46
  setTimeout(() => {
47
    if (customCancellationToken) {
48
      customCancellationToken.cancel();
49
    }
50
  }, 10000);
51
}

Cancel progress programmatically in VS Code extensions

The cancellation token

Related articles

SharePoint Framework snippets extension for Visual Studio Code

SharePoint Framework Script Check extension for Visual Studio Code

#DevHack: Open custom VSCode WebView panel and focus input

Report issues or make changes on GitHub

Comments

Elio Struyf