Can vscode support absolute references on the way to import ES6?

Question

Instead of relative paths, for example. import Foo from '../Foo'that can get hairy when you have a big project, we started using "absolute" ways, for example. import Foo from '~/utils/Foo', where it is ~mapped to our root JS directory (let's say assets/jswhat doesn’t).

This seems to disrupt the vscode click navigation navigation and, I suspect, all the auto / implicit conclusions, due to which it basically cannot follow the import instructions.

Is there a way to map ~to a specific folder / subfolder in vscode so that this works again?

(Ideally, we could have several mappings, for example, one for our JS code in src/main/jsand one for our test JS code, for example, in src/test/js.)

Answer 1

I do not believe that this is supported for simple JavaScript projects, but supported for Typescript projects (and I will talk about a workaround that you can use to enable it for JS projects). I recommend that you open a feature request if you need more efficient support for these kinds of functions.

To enable this in a Typescript project, create a file tsconfig.jsonin the root of your project:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "assets/js/*"
            ]
        }
    }
}

paths - , . .

:

import Foo from '~/utils/Foo'

 import Foo from 'assets/js/utils/Foo'

Typescript , JS , "allowJs": true tsconfig.json :

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "assets/js/*"
            ]
        },
        "allowJs": true
    }
}

intellisense JavaScript .

JavaScript , paths . , , '~/utils/Foo'.

, VSCode, , - , .