How to set alias path for files in monaco editor?

[Veath]

monaco-editor version: 0.2.0 Browser: chrome OS: mac Playground code that reproduces the issue:

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
    allowNonTsExtensions: true,
    allowJs: true,
    target: 99,
    paths: {
        "@/*": ["./"]
    },
    baseUrl: './',
})

const fooModel = monaco.editor.createModel(
    `export const a = {name: 'abc'}`,
    'javascript',
    monaco.Uri.parse('file:///foo.js')
);

const mainModel = monaco.editor.createModel(
    `import {a}  from '@/foo';\n`,
    'javascript',
    monaco.Uri.parse('file:///main.js')
);

monaco.editor.create(document.getElementById('container'), {model:mainModel});

import {a} from '@/foo' no syntax tips for a

Expect a has IntelliSense

[orta]

What we do on the typescript playground for this is use addExtraLib on either monaco.languages.typescript.javascriptDefaults or monaco.languages.typescript.typescriptDefaults for any file which isn't in the editor.

[Veath]

What we do on the typescript playground for this is use addExtraLib on either monaco.languages.typescript.javascriptDefaults or monaco.languages.typescript.typescriptDefaults for any file which isn't in the editor.

i use addExtraLib is working But I want to jump to the definition for across files

[brijeshb42]

As far as I know, multi file workflow is not supported in these workers.

[spahnke]

To get the peek definition working across files you add a model and register that file as an extra lib. I've never used path aliases but here is a working example for the general functionality (do a peek definition on the next method):

const lib = `declare class Facts {
    /**
     * Returns the next fact
     *
     * [Online documentation](http://www.google.de)
     */
    static next(): string;
}`;

const uri = monaco.Uri.file("dir/facts.d.ts");
monaco.languages.typescript.javascriptDefaults.addExtraLib(lib, uri.toString());
monaco.editor.createModel(lib, "typescript", uri);

monaco.editor.create(document.getElementById("container"), {
    value: `class Chuck {
    greet() {
        return Facts.next();
    }
}`,
    language: "javascript"
});

[matanlb]

Is there any reason why this doesn't work? (addExtraLib doesn't solve my case since I'll need to monitor every single change in the other user files and transpile it, effectively doing the compiler job in the main thread instead of the worker)

I've been digging around monaco-typescript and it looks like the config (with paths) is passed to the ts-compiler but for some reason it has no effect on the worker behaviour.

[alexdima]

@matanlb If I change your sample to use import {a} from './foo';, I get intellisense for a. So I believe there is something about the paths configuration that does not work.

[y912765390]

I would like to know how you changed it because I also want to use this kind of relative path. In Monaco, for the time being, I refer to the playground example. It can only be in the form of the entry library, only the name and no path.

[NWYLZW]

Is there any solution to this problem? Up to now, the latest version still does not support the paths parameter of tsconfig.

[lifegit]

Is there any solution to this problem? Up to now, the latest version still does not support the paths parameter of tsconfig.

hi, do you have a solution?

[elis]

Using addExtraLib works only on initial load - if I change the viewed file to a different file and go back to the file with the alias'd import it no longer loads the types correctly.

I'm not transpiling the file contents and passing it as a raw TS to the addExtraLib fn.