将 2000 ts 模型加载到 Monaco 编辑器以进行智能感知的高性能方式答案

【问题标题】：Performant way to load 2000 ts models into Monaco editor for intellisense将 2000 ts 模型加载到 Monaco 编辑器以进行智能感知的高性能方式
【发布时间】：2022-10-05 21:09:46
【问题描述】：

我正在尝试从 2000+ .ts 文件中获取 Monaco 编辑器中的智能感知。加载模型需要 4-5 秒，但自动完成建议会在 10-15 秒后出现，并且会看到“正在加载...”。

下面是我的代码的简化版本，可以在Monaco Playground 中运行

monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: true,
    noSyntaxValidation: true,
    noSuggestionDiagnostics: true
});

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: true,
    noSyntaxValidation: true,
    noSuggestionDiagnostics: true
});

editor = monaco.editor.create(
    document.getElementById(\'container\'),
    {
        minimap: { enabled: true },
        scrollBeyondLastLine: true,
        // model: null,
        language: \'typescript\',
        theme: \'vs-dark\',
        value: \'function () {}\\n\\n\'
    }
);

// simulate 2000 .ts files
for (var fileIdx = 0; fileIdx < 2000; fileIdx++) {
    for (var fnIdx = 0; fnIdx < 1; fnIdx++) {
        monaco.editor.createModel(`
            function test_${fileIdx}_${fnIdx}() {}
            function fn_${fileIdx}_${fnIdx}() {}
            function foo_${fileIdx}_${fnIdx}() {}
            function bar_${fileIdx}_${fnIdx}() {}
            function out_${fileIdx}_${fnIdx}() {}
            `,
            \'typescript\'
        );
    }
}

我关注了https://github.com/microsoft/monaco-editor/issues/2030 和Monaco Editor intellisense from multiple files，但没有运气。

有人可以阐明实现这一目标的高效方式吗？

为什么需要预先创建 2000 个模型？你不能在需要其中一个的时候增量创建它们吗？
难道我不需要预先创建模型来从所有源文件中获取自动完成的候选者吗？我在 Monaco API 文档中找不到太多细节。谢谢
如果它仅用于代码完成，请检查我的答案。

标签： performance monaco-editor

【解决方案1】：

对于代码完成，手头有库的类型而不是整个源代码就足够了。这通常通过向 Monaco TS/JS 引擎添加类型（类型声明）来完成：

    public static addTypings(typings: string, source: string): void {
        if (monaco.languages.typescript) {
            monaco.languages.typescript.javascriptDefaults.addExtraLib(typings, source);
            monacolanguages.typescript.typescriptDefaults.addExtraLib(typings, source);
        }
    }

对于第 3 方库，它们通常带有类型（从 TS 代码生成时）。否则https://github.com/DefinitelyTyped/DefinitelyTyped 可能会有所帮助。

如果您要加载的代码是您自己的并且是 Typescript，您可以通过 tsc 发送它并让它为您生成类型，否则手动编写。

【讨论】：