Monaco Auto-complete Example

monaco-completion.js

const snippets = [
  'const example = autocompleteSuggestionFn1(() => console.log("this is an example function")'
];

const buildSuggestion = (model, position) => {
  const suggestions = [];

  // Contextually aware autocompletion, i.e. snippets in handlebars delimiters,
  // This will allow you to only insert suggestions if the previous character is
  // X, Y, or Z, for example.
  if (model && position && snippets.length) {
    const textUntilPosition = model.getValueInRange({
      startLineNumber: position.lineNumber,
      startColumn: 1,
      endLineNumber: position.lineNumber,
      endColumn: position.column
    });
    const word = model.getWordUntilPosition(position);
    const range = {
      startLineNumber: position.lineNumber,
      endLineNumber: position.lineNumber,
      startColumn: word.startColumn,
      endColumn: word.endColumn
    };

    // Regex to match opening delimiter
    if (textUntilPosition.match(/.*{{#?>\s?$/m)) {
      for (const snippet of this.snippets) {
        suggestions.push({
          label: snippet.name,
          // languages var comes from Monaco itself
          kind: languages.CompletionItemKind.Snippet,
          insertText: ` ${snippet.name} `,
          range: range,
          command: { id: "editor.action.insertLineAfter" }
        });
      }
      return suggestions;
    }
  }

  // Here you can enable other global auto-complete's that can be enabled
  // In these examples by a global Boolean (think user preferences)
  if (enableSuggestionsType1) {
    Object.keys(suggestionsType1).forEach((key) => {
      const { prefix, body, description } = suggestionsType1[key];
      suggestions.push({
        label: prefix,
        // There are more CompletionKind's like Variable, Snippet, Reference, etc
        kind: languages.CompletionItemKind.Reference,
        detail: description,
        insertText: Array.isArray(body) ? body.join("\n") : body,
        insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet
      });
    });
  }

  if (enableSuggestionsType2) {
    Object.keys(suggestionsType2).forEach((key) => {
      const { prefix, body, description } = suggestionsType2[key];
      suggestions.push({
        label: prefix,
        kind: languages.CompletionItemKind.Reference,
        detail: description,
        insertText: Array.isArray(body) ? body.join("\n") : body,
        insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet
      });
    });
  }

  return suggestions;
};

// `registerCompletionProvider` is the general hook for auto-complete helpers
languages.registerCompletionItemProvider(this.language, {
  triggerCharacters: [".", ">"],
  provideCompletionItems: (model, position) => {
    return {
      // this is the primary function where all the action happens above
      suggestions: buildSuggestion(model, position)
    };
  }
});