在摩纳哥编辑器中从 package.json 读取输入名称

Question

我在向 Monaco Editor 添加名称以

@

符号开头的自定义类型定义时遇到问题。这是一个应该说明我想要实现的目标的示例：

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    typeRoots: ["node_modules/@types"]
});

monaco.languages.typescript.typescriptDefaults.addExtraLib(
    "export class Foo { }",
    "node_modules/@types/@my-module/sub/index.d.ts"
);

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(
        `import * as x from "@my-module/sub"`, 
        "typescript",
        new monaco.Uri("main.ts")
    )
});

这不起作用，因为我的自定义模块称为

@my-module/sub

。如果在这个例子中我用

my-module/sub

替换模块名称，那么一切都会按预期工作，并且我会得到 Intellisense。您知道摩纳哥是否支持这种情况吗？如果支持，那么正确的方法是什么？显然更改我的模块名称不是一个选择。

您可以在摩纳哥游乐场尝试此片段。

Answer 1

设法找到解决方案，只需删除

typeRoots

编译器选项并使用

node_modules

前缀即可：

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true
});

monaco.languages.typescript.typescriptDefaults.addExtraLib(
    "export class Foo { }",
    "node_modules/@my-module/sub/index.d.ts"
);

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(
        `import * as x from "@my-module/sub"`, 
        "typescript",
        new monaco.Uri("main.ts")
    )
});

Answer 2

您还需要添加模块声明，以便补全适用于模块名称

const value = /* set from `myEditor.getModel()`: */ `import * as x from "@my-module/sub"

// Press ctrl-space after the .
new x.`;

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
});

monaco.languages.typescript.typescriptDefaults.addExtraLib(
    // add the declare so intellisense learns about the module
    "declare module '@my-module/sub' { export class Foo { constructor(readonly hello: string) { } } }",
    // give the path so TS finds the definitions
    "node_modules/@my-module/sub/index.d.ts"
);

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
    value,
    language: "typescript",
    automaticLayout: true,
});

游乐场链接