Why does VS Code suggest me auto-imports via relative path instead of the path alias I defined in my tsconfig.json?

Question

My project structure is like this:

---- apps
---- libs
-------- index.ts
-------- commmon
-------- service
------------ index.ts
------------ src
---------------- index.ts
---------------- goods
-------------------- index.ts
-------------------- src
------------------------ index.ts
------------------------ goods.service.ts

Each index.ts have an export * from '...' statement.

And my tsconfig.json is down below:

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "paths": {
      "@frosticx/library": [
        "libs"
      ]
    }
  }
}

I expect all import from libs should be import { ... } from '@frosticx/library';, However Vistual Studio does not regonize this path alias:

Manually specify @frosticx/library would work, but as you can see Visual Studio does not treat it as a module:

Dole

Related?: github.com/microsoft/TypeScript/issues/25876 also github.com/microsoft/TypeScript/issues/32605, github.com/microsoft/TypeScript/issues/51058, github.com/microsoft/TypeScript/issues/31173, github.com/Microsoft/vscode/issues/59815 – Begonia

Answer 1

Try setting "typescript.preferences.importModuleSpecifier": "non-relative" in your settings.json file. The default value of that setting is "shortest", which might be the problem here, since your alias seems to be longer than the relative path the module can be imported by.

Note: google-search suggestion: github typescript issues auto import use tsconfig paths.

Begonia

Thank you for the suggestion. However it does not work unfortunately, Visual Studio does not seems to recognize to @frosticx/library. The only suggestion is libs/service – Dole

Answer 2

I changed paths to this and it seems to work:

"paths": {
      "@frosticx/library": [
        "libs",
        "libs/*"
      ]
    }

I have no idea why it works, but seems to be an ugly solution.

Update:

This even makes ../xxx to be @frosticx/library which is not expected.

Dole