How to add nested path aliases in vscode jsconfig?

Question

Background

I have a config like this:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "common": ["./common/*"],
      "components": ["./components/*"],
      "services": ["./services/*"],
      "styles": ["./styles/*"],
      "state": ["./state/*"]
    },
    "lib": ["ES5"]
  },
  "include": ["./src/**/*"]
}

Focusing only on the components directory, the structure is:

components/shared/*

because of which, to import a shared file, I have to write:

import File from "components/shared/file"

Question

How should I modify the jsconfig so that I will be able to directly import from the shared folder like:

import File from "shared/file"

Answer 1

Then you have to change the json baseUrl like this way -

"baseUrl": "./src/components"

But this is not the appropriate way to use baseUrl. Because after using this setting all of your import will be according to components folder. And this is not actually base url.