Custom javascript code completion for "this" in monaco editor

Question

The scenario:

• We are using the monaco editor in a javascript application to let the users enter custom javascript code (sort of a js-fiddle thing for an internal dashboarding application)
• Within the javascript code that the users edit this is bound to a custom framework-provided object when the code is executed.

Question:

• Is there a way to configure monaco so that it will provide code completion when the users type this.?
• The this object is compiled from a TypeScript class with type annotation. Is it possible to use the typescript compiler to produce data that the custom monaco code completion can use?

Answer 1

If I understood you correctly, you may use registerCompletionItemProvider. But I'm not sure if you are using any other library or something you've created. Because each autocomplete item needs to be defined one by one. If the library created dynamically maybe you can add this definition process to your main compilation process.

I'm guessing you might end up with more work than you expected to do.

https://microsoft.github.io/monaco-editor/api/modules/monaco.languages.html#registercompletionitemprovider

If you are expecting a cross-file autocompletion I believe your answer is here. Monaco Editor intellisense from multiple files

Answer 2

After few days of trying different ideas (mostly registerCompletionItemProvider), this is very easy than I thought.

All you need to do you add a declaration as extra lib.

monaco.languages.typescript.javascriptDefaults.addExtraLib(
    'declare function Factory (this: Number, n: Number) : void;',   <----- change the `this` type to whatever you want
    'ts:this-lib.d.ts'
);

See this monaco issue for more context and monaco playground link for full example.

Best thing is I don't have to fiddle with the current line/word based logic anymore (and no custom provider is needed), leaving all it to language worker which is best at it

Answer 3

You can reference this link. There are many apis for what you want.

https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html#acceptsuggestiononenter