将 2000 个 ts 模型加载到 Monaco 编辑器以进行智能感知的高效方法

问题描述 投票:0回答:1

我正在尝试从 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/2030Monaco Editor intellisense,但没有运气。

有人可以阐明实现这一目标的高性能方法吗?

模组#1:

加载

.d.ts
文件而不是
.ts
文件(直接取自此处):

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

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

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

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    typeRoots: ["node_modules/@types"]
});

// Case #1: Load 2000 .d.ts files with each having 1 function declaration
let extraLibs = []
for (let i = 0; i < 2000; i++) {
    extraLibs.push(
        {
        content: `export declare function next${i}() : string`,
        filePath:  monaco.Uri.file(`/node_modules/@types/external${i}/index.d.ts`).toString(true)
        }
    );
}

// Case #2: Load 1 .d.ts file with 2000 function declarations
/*let def = ''
for (let i = 0; i < 2000; i++) {
    def = def.concat(`export declare function next${i}() : string\n`);
}
let extraLibs = []
extraLibs.push(
    {
    content: def,
    filePath:  monaco.Uri.file(`/node_modules/@types/external1/index.d.ts`).toString(true)
    }
);*/

monaco.languages.typescript.typescriptDefaults.setExtraLibs(extraLibs);

extraLibs.forEach((lib) => monaco.editor.createModel(lib.content, "typescript", monaco.Uri.parse(lib.filePath)))


var jsCode = `import * as x from "external1"
const tt : string = x.next1();`;

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(jsCode, "typescript", monaco.Uri.file("main.tsx")),
});


观察: 当加载 2000 个

.d.ts
文件且每个文件都有 1 个函数声明时,性能不佳。但是,当加载 1 个包含 2000 个函数定义的
.d.ts
文件时,建议是即时的。即使增加到 20000 个函数声明,性能也很好。但就我而言,我有 3000 多个 ts 文件。

编辑#1:如果有兴趣,您可以关注monaco Github问题

monaco-editor
1个回答
0
投票

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

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

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

如果您要加载的代码是您自己的并且是用 Typescript 编码的,那么您只需通过

tsc
发送它并让它为您生成类型。否则手动编写。

© www.soinside.com 2019 - 2024. All rights reserved.