6

我正在尝试使用 Monaco 编辑器在 javascript 编辑器中提供智能感知/代码完成。代码必须是有效的 JavaScript，而不是打字稿。

给定一些用户输入的脚本是这样的：

function onMyEvent(event)
{
    event.someProperty
}

我想在事件参数上提供代码完成，这是一个我有 t.ds 的打字稿类，可以在运行时推断。

理想情况下，我只想告诉 Monaco 的类型event是SomeEventClass，然后让它完成剩下的工作。即使这意味着向脚本添加类型提示。但我看不出该怎么做。我尝试在用户脚本中使用 JSDoc 语法和各种组合，但它看起来像是阻止了 FTB，请参阅： https ://github.com/Microsoft/monaco-editor/issues/203 和 为 VSCode/Monaco Intellisence 添加 JavaScript 类型提示

我还尝试按照 https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults注入动态 d.ts

但是声明这个函数对编辑来说似乎没有任何意义。声明一个新类肯定有效，我只是不知道如何告诉 Monacoevent在那个函数中是一个特定的类型。

我可以看到 registerCompletionItemProvider API，但这并没有为您提供任何声明项目的上下文等，也不允许我自动使用我想要的 d.ts 文件。

4

3 回答 3

6

从 Monaco 0.90 版本开始，由于https://github.com/Microsoft/monaco-editor/issues/203已修复，如果您在编辑代码中使用 JSDoc，您可以添加部分实现此功能。

对于摩纳哥游乐场左侧的这段代码：

    // 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,
    allowJs: true
});

// extra libraries
monaco.languages.typescript.javascriptDefaults.addExtraLib([
    'declare class SomeEventType {',
    '    /**',
    '     * Heres the doco for someProperty',
    '     */',
    '    someProperty: string',
    '}',
].join('\n'), 'filename/facts.d.ts');

var jsCode = [
    '"use strict";',
    '',
    "/**",
    " * @param {SomeEventType} event",
    " */",
    "function onMyEvent(event) {",
    "",
    "}"
].join('\n');

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

意味着编辑器现在可以将事件参数解释为 SomeEventType：

显示代码完成的编辑器屏幕截图

于 2017-07-19T05:44:55.293 回答
3

将其放入 Monaco Playground 的编辑器中：

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "typescript"
});

const fact = `declare function onMyEvent(event: string): void; 
`;
const factFilename = 'myCustomNamespace1';
this.monaco.languages.typescript.typescriptDefaults.addExtraLib(fact, factFilename);

现在，当您onMyEvent在右侧窗格中键入时，您将得到在此处输入图像描述

于 2017-07-20T15:07:49.893 回答
2

这就是我们为 magikcraft.io 执行此操作的方式：将此代码直接拖放到操场的左侧窗格中，然后点击运行：

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "typescript"
});

const fact = `declare namespace custom { export function onMyEvent(event: customClass): void; 

export class customClass { 
    customProperty: string;
}`;
const factFilename = 'myCustomNamespace';
this.monaco.languages.typescript.typescriptDefaults.addExtraLib(fact, factFilename);

现在，在右侧窗格中，输入：custom.您将获得自定义事实的自动完成功能。

于 2017-04-05T12:31:04.647 回答