如何根据前置输入文本动态过滤monaco-editor的补全建议项

数据老陈

2026-10-2

Monaco编辑器根据点号前文本动态过滤补全项实现方案

我们可以直接利用provideCompletionItems回调传入的上下文参数获取当前输入的前缀文本，再结合预先配置的匹配规则过滤补全列表即可实现需求。

实现步骤

第一步：预先定义前缀和对应补全项的映射关系
第二步：在provideCompletionItems中获取光标前的文本，提取点号前面的触发前缀
第三步：根据前缀匹配到对应的补全列表，生成补全项返回

完整实现代码

// 预先定义前缀和对应补全项的映射规则
const prefixMatchMap = {
  wash: ['car'],
  get: ['dog', 'pet']
  // 可按需扩展更多前缀规则
}
// 补全项生成方法
const createSuggestions = (list) => list.map(suggestion => ({
  label: suggestion,
  kind: monaco.languages.CompletionItemKind.Keyword,
  insertText: suggestion
}));

monaco.languages.registerCompletionItemProvider('typescript', {
  triggerCharacters: ["."],
  provideCompletionItems: (model, position) => {
    // 获取当前光标所在行的全部内容
    const lineContent = model.getLineContent(position.lineNumber);
    // 截取光标前的文本片段
    const contentBeforeCursor = lineContent.slice(0, position.column - 1);
    // 匹配点号前面最近的单词作为触发前缀
    const prefixMatch = contentBeforeCursor.match(/(\w+)\.$/);
    if (!prefixMatch) return { suggestions: [] };
    const triggerPrefix = prefixMatch[1];
    // 从映射规则中拿到对应补全列表，不存在则返回空列表
    const matchedItems = prefixMatchMap[triggerPrefix] || [];
    return {
      suggestions: createSuggestions(matchedItems)
    }
  }
});