vscode extension how to display a form

Question

I wish to create a VSCode extension with an entry form on it - some way of input. So far I have only seen document processing or output for an extension.

How can you display a form of input fields in a vscode extension?

Answer 1

The Visual Studio Code API does not have any native methods to display forms to collect input. You can however, chain together Input Boxes, Quick Picks, etc... You can find all these methods under vscode.window.(...).

If these do not satisfy your needs you can implement a webview which allows you to render integrated HTML in Visual Studio Code and trade messages with the extension.

The most simple aproach would be to simple send all collected data from the form to the extension once you hit the submit button or something similar.

You have a nice little tutorial on how to do that here.

Answer 2

Another approach is to see how far you can go with editing JSON objects in settings.json. I thought I would need a form for 8-10 fields, but it turns out that I can create a settings template that has a series of labels and and entry fields (with type validation).

Answer 3

How much data do they need to enter? If it's not much, you should be able to handle it with a series of InputBoxes

From https://code.visualstudio.com/docs/extensionAPI/vscode-api

showInputBox(options?: InputBoxOptions): Thenable<string>

Opens an input box to ask the user for input.

The returned value will be undefined if the input box was canceled (e.g. pressing ESC). Otherwise the returned value will be the string typed by the user or an empty string if the user did not type anything but dismissed the input box with OK.

Parameter   Description
options?: InputBoxOptions   
Configures the behavior of the input box.

Returns Description
Thenable<string>    
A promise that resolves to a string the user provided or to undefined in case of dismissal.