摩纳哥编辑器为 addExtraLib 添加动态类答案

【问题标题】：Monaco editor adding dynamic class for addExtraLib摩纳哥编辑器为 addExtraLib 添加动态类
【发布时间】：2020-08-11 21:27:32
【问题描述】：

我一直在尝试在我的 Angular 应用程序中使用来自 monaco 编辑器的智能感知。我需要帮助来为我必须动态加载的类的方法添加自动推荐。

例如：我为不同的形状生成类，需要使用智能感知生成方法名称。 Rectangle 类将具有 top、left、right 等方法。我为多个形状生成 Rectangle1、Rectangle2....、Ellipse1、Eliipse2、Ellipse3.... 等等。如何添加智能感知，以便在生成 Rectangle1 类并在其旁边键入一个点时推荐 left、right、top。

// validation settings
    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: true,
      noSyntaxValidation: false
    });

    // compiler options
    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.ES6,
      allowNonTsExtensions: true
    });


monaco.languages.typescript.javascriptDefaults.addExtraLib([

      // Trial code
      'declare class Rectangle1 {',

      '    static ():top',
      '    static ():left',
      '    static ():right',
      '}',
    ].join('\n'));


 var jsCode = [
      '"use strict";',
      '',
      "Rectangle1.top = {",

      " console.log('Rectangle top');",

      "}"
    ].join('\n');


this.editor = monaco.editor.create(this.editorContainer.nativeElement, jsCode);

【问题讨论】：

标签： angular8 intellisense monaco-editor

【解决方案1】：

在Monaco Playground中试试下面的代码

请注意，您传递给addExtraLib 的内容必须是有效的打字稿定义。

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

// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES6,
    allowNonTsExtensions: true
});

monaco.languages.typescript.javascriptDefaults.addExtraLib([
    'declare class Rectangle1 {',
    '    /**',
    '     * optional documentation for top function',
    '     */',
    '    static top()',
    '    static left()',
    '    static right()',
    '}'
].join('\n'));

var jsCode = [
    '"use strict";',
    '',
    "Rectangle1.top();"
].join('\n');

monaco.editor.create(document.getElementById("container"), {
    language: 'javascript',
    value: jsCode
});

【讨论】：