CODEWITHSUNDEEP
monaco-editorvisual-studio-monaco
Vignesh Prakash
Vignesh Prakash

Reputation: 59

How to add custom tag and attributes for code completions in html language of monaco editor?

I need to provide a list of web components in the code completions of the monaco editor, I tried writing snippets but those snippets are not getting triggered if i start with '<'

Upvotes: 0

Views: 1533

Answers (2)

MrCano369x
MrCano369x

Reputation: 547

In this way.

 monaco.languages.html.htmlDefaults.setOptions({
   data: {
     dataProviders: {
       myprovider: {
         tags: [
           {
             name: "custom-tag",
             description: {
               kind: "markdown",
               value: "A custom HTML tag",
             },
             attributes: [
               {
                 name: "custom-attr",
                 description: "A custom attribute",
                 valueSet: "set1",
               },
             ],
           },
         ],
         globalAttributes: [
           {
             name: "custom-global-attr",
             description: "A custom global attribute",
           },
         ],
         valueSets: [
           {
             name: "set1",
             values: [
               {
                 name: "true",
               },
               {
                 name: "false",
               },
             ],
           },
         ],
       },
     },
     useDefaultDataProvider: false,
   },
 });

documentation here: https://microsoft.github.io/monaco-editor/typedoc/interfaces/languages.html.LanguageServiceDefaults.html#setOptions

Upvotes: 0

Nikolay
Nikolay

Reputation: 12245

I am not sure if there is a ready-to-use solution, I've tried to approach "the hard way" by using XSD (a schema file for defining the syntax and then parsing it). Unfortunately for XML completion the schema direct support is not there as far as I know (please correct me if I am wrong). So puzzled with the same question I've start with custom auto-completion provider.

Here is an article that helped me a lot. https://mono.software/2017/04/11/custom-intellisense-with-monaco-editor/

This is the matching repository: https://github.com/isimic413/monaco-editor-custom-intellisense/tree/master/sample-editor

Please note that it's not updated to the latest version of the API; you may need to make some code corrections to make it work.

Upvotes: 1

Related Questions