How to insert snippet in Monaco Editor?

Question

I am using Monaco Editor v 0.10.1 in a webpage, and wonder if anybody knows if it is possible to add a set of Snippets that will pop up in Command Palette -> Insert Snippet like for the Visual Code editor.

n.Drake · Accepted Answer · 2020-04-11 12:14:28Z

5

monaco.languages.registerCompletionItemProvider('javascript', {
  provideCompletionItems: () => {
    return {
      suggestions: [
        {
          label: 'Async Block',
          kind: monaco.languages.CompletionItemKind.Snippet,
          documentation: 'Add an async block',
          insertText: [
            '(async () => {',
            '\t',
            '})()'].join('\n')
        }
      ]
    };
  }
});

Reference: https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example

answered Apr 11, 2020 at 12:14

n.Drake

2,6352 gold badges18 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

joverall22 · Accepted Answer · 2018-03-08 11:31:33Z

2

You can use the AddAction method to do this...

//Register a custom snippet
monaco.languages.registerCompletionItemProvider('javascript', {
      provideCompletionItems: () => {
        return [
          {
            label: 'for: Array',
            kind: monaco.languages.CompletionItemKind.Snippet,
            documentation: 'Iterate over an Array',
            insertText: [
              'for(let i=0; i < arr.length; i++){',
              '\tlet elem = arr[i];',
              '',
              '}'].join('\n')
          }
        ]
      }
    });

//Add custom action
this.editor = window.monaco.editor.create(this.$el, options);
window.activeEditor = this.editor
this.editor.addAction({
      id: 'insert-text-at-cusor-command',
      label: 'Command Snippet',
      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
      contextMenuGroupId: 'snippets',
      contextMenuOrder: 1.5,
      run: function (ed) {
        activeEditor.focus()
        activeEditor.trigger('keyboard', 'type', {text: "for"});
      }
});

answered Mar 8, 2018 at 11:31

joverall22

3501 silver badge15 bronze badges

3 Comments

bagya Over a year ago

provide any link for working example. I tried same way it's not working

Devid Over a year ago

Inside snippetCompletionProvider triggerCharacters is missing but also insertText is a string and insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet should be added

agentpx Over a year ago

Not working probably this is an old syntax. What worked for me is @n.Drake answer.

AndersMad · Accepted Answer · 2018-01-11 22:39:23Z

0

No, not in the current version - hopefully there will come an updated version soon :) But you can however register your own snippet in code the will be available in autocomplete / CTRL + SPACE and then later in the command palette.

answered Jan 11, 2018 at 22:39

AndersMad

3382 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to insert snippet in Monaco Editor?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related