摩纳哥编辑器自定义语言智能感知

Question

I am new to Monaco editor. I am trying to include Monaco editor in my web application. I want to know how can I add a custom language defined by me into Monaco editor with rich IntelliSense and validation. Can anyone help me on this? Thank you.

Answer 1

You can implement this by defining your own custom CompletionItemProvider .

I suggest you take a look at the Completion provider example to get yourself started.

Answer 2

This is an example of an CompletionItemProvider with keywords that were dynamically added.

 monaco.languages.registerCompletionItemProvider('CustomExpressionLanguage', {
                provideCompletionItems: () => {
                    if (!items || items.length <= 0)
                        return { suggestions: [] };

                    window.varSuggestions = items.map(function (x) {
                        const one = {
                            label: x.Value,
                            kind: monaco.languages.CompletionItemKind.Keyword,
                            insertText: `Col("${x.Key}")`,
                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                        };
                        return one;
                    });

                    window.pythonSuggestions = window.pythonMathMethods.map((x) => {
                        var item = {
                            label: x.label,
                            kind: monaco.languages.CompletionItemKind.Funcion,
                            insertText: `${x.label}${x.arguments}`,
                            documentation: x.documentation,
                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                        };
                        return item;
                    });

                    window.suggestions = window.varSuggestions.concat(window.pythonSuggestions);
                    return { suggestions: window.suggestions };
                }
            });