How can I add these code completion features my VSCode extension?

Question

I'm in the process of creating a VSCode extension to do code completion for an existing Lua API.

I'm having a bit of trouble achieving the following (examples are JavaScript):

I've been looking for examples and tutorials but haven't come up with much. I assume I may need to do a fair amount of string processing, around the current cursor position, to get enough data to lookup the appropriate documentation (which I stored in an array of json objects). But presently I don't know how to get the meta-data dialog to show when entering parameters.

P.S. I have reviewed the official extension samples.

Answer 1

Your screenshots show two VS Code features:

The first screenshot shows a hover / quick info. It is used to display information about the current word the user is hovering over. To add a hover, your extension should implement and register a HoverProvider

The second screenshot shows parameter hints / signature help. It displays information to the user as they complete a function call. To add signature help, your extension should implement and register a SignatureHelpProvider

---

In both cases, how you implement the functionality is entirely up to your extension. Most language extensions maintain a structural representation of the file (such as an AST) and use this to provide hover and signature help info.

You can also either implement your extension as a direct VS Code extension or using the language server protocol (which works across editors). See VS Code's Language Extensions Overview for more information about developing a language extension and why you may want to consider the Language Server Protocol