向 monaco 编辑器提供类型提示

Question

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

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

function onMyEvent(event)
{
    event.someProperty
}

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

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

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

但声明函数对编辑器似乎没有任何意义。声明一个新类肯定有效，我只是不知道如何告诉 Monaco 该函数中的event 是一个特定类型。

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

Answer 1

把这个放到摩纳哥游乐场的编辑器里：

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 时，您将获得

Answer 2

从 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：

Answer 3

这就是我们为 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.，您将获得自定义事实的自动完成功能。