How to create a modal for a VSCode extension?

Question

I'm trying to make an extension for VSCode to Find text in File (Like in Notepad++).

Is there an API for using a modal in a VSCode extension? or at least extend the Command Palette?

Answer 1

VS Code (1.34) has no concept modal UI. Extensions can only show basic dialog messages modally using the showMessage apis.

Messages can show message text and a set of buttons. By default VS Code will render messages in its UI. The MessageOptions.modal option makes VS Code render the message using system UI instead.

---

Try positing a more specific question about what you are trying to accomplish. VS Code's extension model is different from other editors, so if you are trying to replicate functionality from another editor like Notepad++ you may need to rethink the user experience.

Answer 2

As mentioned above there are the limited built-in inputs and message box (which can also be used to display choice buttons).

You can also have a look at WebView these can be used to display a side-bar view (like the EXPLORER) or a full document. They are made up from HTML and plain old JavaScript. You will have to pass simple string messages between your HTML/JS view and vscode itself.

https://code.visualstudio.com/api/extension-guides/webview

https://github.com/Microsoft/vscode-extension-samples/tree/main/tree-view-sample

A large 'document' view example vscode extension is call 'nearest-icons' https://github.com/noGreg/nearest-icons