如何获取用户选中的补全项？为provideCompletionItems添加选中回调

有两种常用方式实现需求，可根据场景选择：

方法一：全局监听补全项选中事件 #

通过编辑器的onDidAcceptSuggestion事件，能监听所有补全项的选中动作，回调参数会直接返回选中的补全项详情。

代码示例 #

// 假设editor是你的Monaco Editor实例
const acceptListener = editor.onDidAcceptSuggestion((event) => {
  const selectedCompletion = event.suggestion;
  console.log('选中的补全项：', selectedCompletion);
  
  // 针对特定项（比如apple）执行逻辑
  if (selectedCompletion.label === 'apple') {
    // 这里写你需要触发的回调逻辑
    console.log('触发apple专属处理逻辑');
  }
});

// 注意：组件销毁或不需要监听时，记得销毁监听避免内存泄漏
// acceptListener.dispose();

方法二：给单个补全项绑定自定义命令 #

如果只需要针对特定补全项绑定回调，可以自定义命令，再把命令关联到目标补全项上。

步骤1：注册自定义命令 #

// 注册一个自定义命令，用于处理补全项选中事件
monaco.commands.registerCommand('completion.handleAppleSelect', (completionItem) => {
  console.log('选中的apple补全项：', completionItem);
  // 执行你的回调逻辑
});

步骤2：修改补全项配置 #

把原补全项的command替换为自定义命令，并传递补全项信息作为参数：

{
  label: 'apple',
  insertText:'apple',
  kind: monaco.languages.CompletionItemKind.Event,
  insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
  command: {
    id: 'completion.handleAppleSelect',
    title: '处理apple补全选中',
    // 将当前补全项作为参数传递给命令回调
    arguments: [{
      label: 'apple',
      insertText: 'apple',
      documentation: keyword?.description
    }]
  },
  range,
  documentation: keyword?.description,
}

两种方式对比 #

• 全局监听适合需要统一处理所有补全项选中动作的场景；
• 自定义命令更灵活，能针对单个补全项绑定专属逻辑，避免全局判断。

内容的提问来源于stack exchange，提问作者user9195146