[英]Provide type hints to monaco editor
I am trying to provide intellisense / code completion into a javascript editor using the Monaco editor. 我正在尝试使用Monaco编辑器将智能感知/代码完成提供到javascript编辑器中。 The code needs to be valid javascript, not typescript.
代码需要是有效的javascript,而不是打字稿。
Given some user entered script like this: 鉴于一些用户输入的脚本如下:
function onMyEvent(event)
{
event.someProperty
}
I want to provide code completion on the event parameter, which is a typescript class I have the t.ds of, and can infer at runtime. 我想在event参数上提供代码完成,这是一个我有t.ds的typescript类,并且可以在运行时推断。
Ideally, I would just like to tell Monaco that the type of event
is SomeEventClass
, and let it do the rest. 理想情况下,我只想告诉摩纳哥
event
的类型是SomeEventClass
,让它做其余的事情。 Even if that meant adding type hints to the script. 即使这意味着向脚本添加类型提示。 But I can't see how to do that.
但我看不出怎么做。 I tried using JSDoc syntax and various combinations in the user script, but it looks like thats blocked FTB see: https://github.com/Microsoft/monaco-editor/issues/203 and Adding JavaScript type hints for VSCode/Monaco Intellisence
我尝试在用户脚本中使用JSDoc语法和各种组合,但看起来像阻止了FTB看到: https : //github.com/Microsoft/monaco-editor/issues/203并为VSCode / Monaco Intellisence添加JavaScript类型提示
I also tried injecting a dynamic d.ts, as per https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults 我也试过注入动态d.ts,按照https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults
But declaring the function didn't seem to mean anything to the editor. 但声明该功能似乎对编辑没有任何意义。 Declaring a new class definitely worked, I just can't work out how to tell Monaco that
event
in that function is a specific type. 声明一个新类肯定有效,我只是无法弄清楚如何告诉摩纳哥该函数中的
event
是一个特定的类型。
I can see the registerCompletionItemProvider API, but that doesn't give you any context of where the item was declared etc, and also doesn't let me automatically use the d.ts file that I want to. 我可以看到registerCompletionItemProvider API,但是它没有给出任何声明项目声明等的上下文,也不允许我自动使用我想要的d.ts文件。
As of Monaco version 0.90, since https://github.com/Microsoft/monaco-editor/issues/203 has been fixed, you can add achieve this partially if you use JSDoc in the editing code. 从Monaco版本0.90开始,自https://github.com/Microsoft/monaco-editor/issues/203修复后,如果在编辑代码中使用JSDoc,则可以部分添加。
For this code in the left side of the Monaco playgound: 对于摩纳哥playgound左侧的代码:
// 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"
});
Means that the editor can now interpret the event parameter as a SomeEventType: 意味着编辑器现在可以将事件参数解释为SomeEventType:
This is how we do it for magikcraft.io: drop this code straight into the left pane in the playground, then hit Run: 这就是我们为magikcraft.io做的方法:将这段代码直接放到操场上的左侧窗格中,然后点击Run:
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);
Now, in the right pane, then type: custom.
现在,在右侧窗格中,键入:
custom.
and you'll get autocomplete for the custom facts. 并且您将获得自定义事实的自动完成功能。
Put this in the editor in the 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);
Now when you type onMyEvent
in the right-hand pane, you'll get 现在,当您在右侧窗格中键入
onMyEvent
时,您将获得
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.