首页 > 解决方案 > 摩纳哥编辑器为 addExtraLib 添加动态类

问题描述

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

例如:我为不同的形状生成类,需要使用智能感知生成方法名称。Rectangle 类将具有 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);

标签: angular8intellisensemonaco-editor

解决方案


在摩纳哥游乐场尝试以下代码

请注意,您传递的内容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
});

推荐阅读