Making goto definition work with two es6 cross projects

Question

I am working on an html5 game engine and - in parallel - I am working on game using this engine.

Both are written using ES6 and transpiled using webpack. Both the engine and the app are in their own directory, with their own package.json.

I use webpack to build the engine, and then use npm link to add a link in global node_modules that points to the engine, then use npm link engine in the app's directory to point to engine development directory.

That's working fine, and using sourcemaps I can have debuggers and navigate inside both the engine and the app.

In VSCode, I have a workspace (I am using the insider builds) with two directories: one is the engine, the other one is the app. When working on the engine, I can cmd+click on any method and this will open the correct file in the engine. The same goes for the app.

But when I am working on a file inside the app directory that makes use of the engine, cmd+clicking on some method from the engine won't work. Is there a way to make it work properly? I guess this is because the main property in the engine's package.js refers to the (transpiled) built main, and not the main (webpack) ES6 app entry point. What could I do to make it work as expected?

Answer 1

Actually this can be fixed using jsconfig.json configuration file that's used by the Typescript compiler of VSCode.

It can accept aliases that will then be used by the compiler instead of using the main entry of the package.json file.

For example, I used this:

{
    "compilerOptions": {
        "target": "es2016",
        "module": "es6",
        "baseUrl": ".",
        "paths": {
            "athenajs": [
                "./node_modules/athenajs/js/athena-module"
            ]
        }
    }
}

See this cookbook for more information on jsconfig.json.