monaco-editor添加自定义代码提示

初始想法

monaco-editor 添加自定义代码提示，提示需要支持功能 当前输入的对象下的所有属性、方法、以及原型 prototype 上所有的方法

实现原理

1. js代码自动解析所有属性、方法

2. 拿到所有属性方法组成一个数组

3. 当用户输入关键字且.时候弹出提示当前对象支持的属性和方法

查找monaco-editor原生支持添加自定义代码提示

monaco.languages.registerCompletionItemProvider()

代码实现

const triggerCharacters = ['xxx', '.'].concat(Object.keys(window.xxx || {}));
this.registerObject.completionItemProvider = monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems(model, position) {
        // 获取当前行数
        const line = position.lineNumber;
        // 获取当前列数
        const column = position.column;
        // 获取当前输入行的所有内容
        const content = model.getLineContent(line);
        // 通过下标来获取当前光标后一个内容，即为刚输入的内容
        const sym = content[column - 2];
        // const textUntilPosition = model.getValueInRange({
        //     startLineNumber: 1,
        //     startColumn: 1,
        //     endLineNumber: position.lineNumber,
        //     endColumn: position.column
        // });
        // console.log(textUntilPosition);
        const word = model.getWordUntilPosition({
            ...position,
            column: column - 1 // . 往前一位获取单词
        });
        // const range = {
        //     startLineNumber: position.lineNumber,
        //     endLineNumber: position.lineNumber,
        //     startColumn: word.startColumn,
        //     endColumn: word.endColumn
        // };
        // console.log(word, range);
        // ---------------------------------------------------
        // 上面的代码仅仅是为了获取sym，即提示符
        // ---------------------------------------------------
        const suggestions = [];
        if (sym === '.' && triggerCharacters.includes(word.word)) {
            // 拦截到用户输入triggerCharacters，开始设置提示内容
            const prototypeObj = word.word === 'xxx' ? window.xxx : window.xxx[word.word];
            const keyList = Object.getOwnPropertyNames(Object.getPrototypeOf(prototypeObj || {}) || {})
                            .concat(Object.getOwnPropertyNames(prototypeObj?.prototype || {}));
            for (const key of keyList) {
                suggestions.push({
                    label: key, // 显示的提示内容
                    kind: monaco.languages.CompletionItemKind['Function'], // 用来显示提示内容后的不同的图标
                    insertText: key, // 选择后粘贴到编辑器中的文字
                    detail: '', // 提示内容后的说明
                    // range: range
                });
            }
        }
        return {
            suggestions
        };
    },
    triggerCharacters
});

剩下的就是将代码优化，然后使用

注意

使用this.registerObject.completionItemProvider将编辑器储存起来，在组件销毁时this.registerObject.completionItemProvider.dispose(); 否则会导致大量的重复提示