向摩纳哥编辑器提供类型提示

Question

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

鉴于一些用户输入了这样的脚本：

function onMyEvent(event)
{
    event.someProperty
}

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

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

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

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

我可以看到 registerCompletionItemProvider API，但它不会为您提供项目声明位置等的任何上下文，也不会让我自动使用 d.ts 文件我要。

Answer 1

这就是我们为 magikcraft.io 做的：将这段代码直接放到 playground 的左窗格中，然后点击运行:

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. 您将获得自定义事实的自动完成功能。

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

将其放入 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 时，您将得到

向摩纳哥编辑器提供类型提示

Provide type hints to monaco editor

javascript

typescript

monaco-editor