Monaco Editor选择代码片段后自动跳转至$0位置的实现方法

云原生阿岚

2026-5-27

如何让Monaco Editor选择型代码片段选完选项后自动跳转到$0位置？

我参考Monaco Editor的官方示例使用选择型代码片段，把第9行代码替换成了：

insertText: { value: "\"lodash\": \"${1|one,two,three|}\" $0" }

现在希望按下Enter选择one/two/three中的某一选项后，光标能自动跳转到插入字符串末尾的$0位置，不需要再按Tab键，请问有没有可行的实现方法？

解决方案

当然有可行的实现方式！核心思路是利用Monaco Editor内置的命令，在代码片段插入后自动触发光标跳转到终止占位符$0的动作。

具体实现步骤

在你的补全项定义中，除了设置带选择项的insertText，还要给补全项添加command属性，指定插入后执行editor.action.jumpToNextSnippetPlaceholder命令——这个命令会让光标直接从选中的${1}占位符跳转到$0位置，无需手动按Tab。

完整代码示例

monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems: function(model, position) {
        return {
            suggestions: [
                {
                    label: 'Add lodash dependency',
                    kind: monaco.languages.CompletionItemKind.Snippet,
                    insertText: { value: "\"lodash\": \"${1|one,two,three|}\" $0" },
                    // 关键配置：插入片段后自动执行跳转命令
                    command: {
                        id: 'editor.action.jumpToNextSnippetPlaceholder',
                        title: 'Jump to final snippet position'
                    }
                }
            ]
        };
    }
});