How do I recreate the vscode's snippet functionality?

Hello 👋

I would like to have the exact same functionality as vscode does for snippets when they are inserted into the editor.

To clarify; I would like to insert a piece of snippet text into the editor e.g.

const snippetTextToInsert = [
  "for (const ${2:defaultElement} of ${1:defaultArray}) {",
  "\tconsole.log(${2});",
  "}",
];

Then have that render in the editor as it does in vscode e.g.

for (const defaultElement of defaultArray) {
  console.log(defaultElement);
}

Once the code is inserted in the editor, I would like to be able to press the TAB key and have it focus on the variable elements in the order provided i.e. ${1:defaultArray} then ${2:defaultElement} and so on.

Thank you!

[rcjsuen]

@jackrobertscott There is no good way to do this. See #342.

let editor = monaco.editor.create(document.getElementById("container"), {
    value: "",
    language: "javascript"
});

let contribution = editor.getContribution("snippetController2");
contribution.insert('for (const ${2:defaultElement} of ${1:defaultArray}) {\n\tconsole.log(${2});\n}');

[rcjsuen]

Duplicate of #734.

function createDependencyProposals() {
    return [
        {
            label: 'forloop',
            insertText: {
                value: 'for (const ${2:defaultElement} of ${1:defaultArray}) {\n\tconsole.log(${2});\n}'
            }
        }
    ];
}


monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems: function(model, position) {
        return createDependencyProposals();
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: "for",
    language: "javascript"
});