VSCode typescript does not auto import from shortest path

Question

I have the following paths property in my tsconfig.json file (typescript react project):

        "paths": {
          "@src/*": ["src/*"],
          "@assets/*": ["src/assets/*"],
          "@components/*": ["src/components/*"],
          "@hooks/*": ["src/hooks/*"]
        }

I want the auto import to use the shortest path possible. The problem is that auto import automatically uses src as the parent path instead of the inner paths.

Example auto import

In the example above, I want useLoading to be imported from @hooks/LoadingContext instead of @src/hooks/LoadingContext

I don't wanna remove the @src/* mapping if possible.

I've looked in this site and in the tsconfig and VSCode docs and haven't seen anything pertaining to it. Not even sure which config I should change to be honest. Thanks.

Answer 1

Change the paths order so it goes like this:

"paths": {
  "@assets/*": ["src/assets/*"],
  "@components/*": ["src/components/*"],
  "@hooks/*": ["src/hooks/*"],
  "@src/*": ["src/*"]
}

The longest path should be the latest one.