Integrate your VS Code extension in SCM input

For a new Visual Studio Code extension called CommitHelper, I wanted to integrate the extension in the Source Control Management (SCM) input. The extension should provide a list of predefined commit messages from which the user can select by using a slash / in the input field.

I got the idea from the GitHub Pull Requests extension that provides a similar experience when tagging/linking issues.

In this article, I will explain how to integrate your Visual Studio Code extension into the SCM input.

Using the VS Code language features

To integrate your extension in the SCM input, you can use the VS Code language features. The language features allow you to provide IntelliSense, hover information, text completion, and more for your language.

The SCM input field also has a language identifier, which you can use to provide text completion for your extension. The language identifier for the SCM input field is scminput.

In case you want to add text completion to the SCM input field, you can do this by registering a completion item provider for the scminput language identifier like this:

1
context.subscriptions.push(
2
  vscode.languages.registerCompletionItemProvider(
3
    "*", // All document types
4
    new MessageCompletionProvider(),
5
    "/" // The trigger character
6
 )
7
);

The MessageCompletionProvider class looks like this:

1
import * as vscode from "vscode";
2

3
export class MessageCompletionProvider implements vscode.CompletionItemProvider
4
{
5
  constructor() {}
6

7
  public async provideCompletionItems(
8
    document: vscode.TextDocument,
9
    position: vscode.Position,
10
    token: vscode.CancellationToken,
11
    context: vscode.CompletionContext
12
  ) {
13
    // No completion items if the SMC input is not used
14
    if (
15
      document.languageId !== "scminput" &&
16
      context.triggerKind === vscode.CompletionTriggerKind.Invoke
17
    ) {
18
      return [];
19
    }
20

21
    const range = new vscode.Range(
22
      new vscode.Position(position.line, position.character - 1),
23
      position
24
    );
25

26
    const list: vscode.CompletionList = new vscode.CompletionList();
27

28
    // Add your completion items
29
    list.items.push({
30
      label: "feat",
31
      insertText: `feat `,
32
      kind: vscode.CompletionItemKind.Value,
33
      additionalTextEdits: [vscode.TextEdit.delete(range)], // Delete the trigger character
34
    });
35

36
    list.items.push({
37
      label: "fix",
38
      insertText: `fix `,
39
      kind: vscode.CompletionItemKind.Value,
40
      additionalTextEdits: [vscode.TextEdit.delete(range)], // Delete the trigger character
41
    });
42

43
    return list;
44
  }
45
}

You can add your completion items in the MessageCompletionProvider class. In the example above, I added two: feat and fix. When the user selects one of these items, it inserts the text in the SCM input field.

Happy coding!

Integrate your VS Code extension in SCM input

Using the VS Code language features

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