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

时间:2020-07-17 17:09:32

标签: angular8 intellisense monaco-editor

我一直在尝试在我的角度应用程序中使用摩纳哥编辑器的intellisense。我需要帮助将自动推荐添加到我必须动态加载的类的方法中。

例如:我为不同形状生成类,并且需要使用智能感知来生成方法名称。 矩形类将具有诸如top,left,right之类的方法。我为多个形状生成Rectangle1,Rectangle2 ....,Ellipse1,Eliipse2,Ellipse3 ....等。如何添加智能感知,以便在生成Rectangle1类并在其旁边键入一个点时建议向左,向右,顶部。

// 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);

1 个答案:

答案 0 :(得分:0)

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
});