Handle links in the terminal from your VSCode extension

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

For a while now, I have been thinking about a way to handle links shown in the Visual Studio Code terminal. By default, when you control/command + click on a link, you navigate to them, but in my case, I wanted to be able to handle the link in the extension.

To look for a solution, I opened the Visual Studio Code editor its code and found the registerTerminalLinkProvider API, which is also available for extensions.

The terminal link provider allows you to register a provider that enables the detection and handling of links within the terminal. This API is exactly what I have been looking for, and it is also reasonably easy to start using it.

The solution

The registerTerminalLinkProvider method requires two properties:

provideTerminalLinks: The provider that detects the links;
handleTerminalLink: The handler when you click on the link.

The solution I came up with is to check if the terminal line contains a link, and if it does, provide the Terminal Link action.

In the terminal link handler, I let Visual Studio Code show an information message to allow the user to choose between navigating to the link or running it in the extension.

The code for this looks as follows:

1
import * as vscode from 'vscode';
2

3
export const UrlRegex = /(http|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+)|(localhost))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/gi;
4

5
interface CustomTerminalLink extends vscode.TerminalLink {
6
  data: string;
7
}
8

9
export function activate(context: vscode.ExtensionContext) {
10
  vscode.window.registerTerminalLinkProvider({
11
    provideTerminalLinks: (context: vscode.TerminalLinkContext, token: vscode.CancellationToken) => {
12
      // Detect the first instance of the word "link" if it exists and linkify it
13
      const matches = [...context.line.matchAll(UrlRegex)];
14

15
      if (matches.length === 0) {
16
        return [];
17
      }
18

19
      return matches.map(match => {
20
        const line = context.line;
21

22
        const startIndex = line.indexOf(match[0]);
23

24
        return {
25
          startIndex,
26
          length: match[0].length,
27
          tooltip: 'Handle link',
28
          data: match[0],
29
        } as CustomTerminalLink;
30
      })
31
    },
32
    handleTerminalLink: (link: CustomTerminalLink) => {
33
      vscode.window.showInformationMessage(`How would you like to handle the link?`, 'Navigate', 'Run in extension').then(action => {
34
        if (action === 'Navigate') {
35
          vscode.commands.executeCommand('vscode.open', vscode.Uri.parse(link.data));
36
        } else if (action === 'Run in extension') {
37
          // Do something else with the link
38
        }
39
      });
40
    }
41
  });
42
}
43

44
// this method is called when your extension is deactivated
45
export function deactivate() {}

The result of the code can be seen here:

Handle links in the terminal from your VSCode extension

The solution

Related articles

#DevHack: Open custom VSCode WebView panel and focus input

#DevHack: How to rename a file from a VSCode extension

#DevHack: language-specific settings in a VSCode extension

Report issues or make changes on GitHub

Comments

Elio Struyf