Monaco 使用 CompletionItemProvider

Monaco 中 CompletionItemProvider 为代码进行提示时提供数据，和 InlineCompletionsProvider 很相似只是显示方式不一样，一个是行内一个是弹框。先看一下显示效果：

provideCompletionItems 需要实现两个方法

• provideCompletionItems：返回 CompletionItem[]; 穿线 弹出框中的信息
• resolveCompletionItem：选中item 时可以添加更多信息，这个方法是可选的，可以 provideCompletionItems 提供，如果有需要额外处理逻辑，可以在这个方法中实现。
  
  提示项详情：
  

代码实现

export function itemCompletion(editor, monaco){
    monaco.languages.registerCompletionItemProvider('javascript', {
        provideCompletionItems: (model, position) => {
            const word = model.getWordUntilPosition(position);
            const range = new monaco.Range(
              position.lineNumber,
              word.startColumn,
              position.lineNumber,
              word.endColumn
            );
  
            return {
              suggestions: [
                {
                  label: 'codeLog',
                  kind: monaco.languages.CompletionItemKind.Function,
                  insertText: 'console.log()',
                  range: range,
                  documentation: 'Logs output to console'
                },
                {
                  label: 'alert',
                  kind: monaco.languages.CompletionItemKind.Function,
                  insertText: 'alert()',
                  range: range,
                  documentation: 'Displays an alert dialog'
                }
              ]
            };
          },
          resolveCompletionItem: (item) => {
            if (item.label === 'codeLog') {
              item.detail = 'console.log(message?: any, ...optionalParams: any[]): void';
              item.documentation = 'Logs output to console. Useful for debugging.';
            } else if (item.label === 'alert') {
              item.detail = 'alert(message?: string): void';
              item.documentation = 'Displays an alert dialog with the specified message.';
            }
            return item;
          }
    });
}