CODEWITHSUNDEEP
typescriptvisual-studio-codeauto-import
Anupheaus
Anupheaus

Reputation: 3801

Auto import in Visual Studio Code only offering absolute path with Lerna subpackages in TypeScript

For some reason, very recently my Visual Studio Code changed and started only offering absolute imports from the sub-package level with my Lerna packages, for example:

Enter image description here

As you can see, the auto import is suggesting the @package/server/src/database path to the file when it should just be ../database as the file being edited is within the same package and is just one folder below the file containing the database variable I'm trying to use.

Is this a bug or configuration issue?

I've set my Import Module Specifiersetting for TypeScript in Visual Studio Code to all three options (auto, relative, and absolute) and none of them seem to make any difference.

Upvotes: 268

Views: 156009

Answers (6)

Fox Desert
Fox Desert

Reputation: 121

For anyone looking for only relative path within a project,
Add a line of option in settings.json

"typescript.preferences.importModuleSpecifier": "project-relative"

Upvotes: 1

Qwerty
Qwerty

Reputation: 31949

You might need a combination of baseUrl and paths.

tsconfig.json
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "holograph/src/*": ["src/*"]
    },
  }
VSCode settings
"typescript.preferences.importModuleSpecifier": "non-relative" // or "shortest"

My folders are like this. When I am in apps/app, I can auto-import in VSCode from packages with from 'holograph/src/ui/...'. But when I am in packages/holograph ui components, for a reason I haven't yet discovered, it auto-imports from src/ui, which gives a build error. I had to manually import from the package path hologrpah/src/ui. Doing the above paths import re-map fixed VSCode auto-imports.

node_modules
apps (next.js applications)
 ├── app
 |   └── pages
 ├── operator
 ├── storybook
packages (shared components & libraries)
 ├── holograph
 |   └── src
 |       └── ui
 ├── tsconfig
 ├── eslint-config-holograph
...

PS: This worked too, but I am not sure how valid this is. Basically setting the baseUrl one folder up. 🤷‍♂️

  "compilerOptions": {
    "baseUrl": "../",
    },
  }

Upvotes: 8

Jack
Jack

Reputation: 685

My problem was that I had the baseUrl option set in my tsconfig.json file.

{
  "compilerOptions": {
    "baseUrl": ".", // remove
  },
}

After removing the option; VSCode immediately started importing via the relative path. The benefit of this method is that you can keep the VSCode option importModuleSpecifier set to shortest and relative path importing will still work.

Upvotes: 18

Luiz Carlos Pedroso Gomes
Luiz Carlos Pedroso Gomes

Reputation: 1272

In Visual Studio Code, menu File → Preferences → Settings → User Settings

search by importModuleSpecifier

enter image description here

Upvotes: 107

Florian Wendelborn
Florian Wendelborn

Reputation: 1747

I landed here from Google and had the opposite problem. My Visual Studio Code instance always imported the relative path even though it was from a different Lerna package.

It turns out that I simply forgot to add the package that it was wrongly importing to my consuming package’s package.json file.

Now, everything works as expected.

Upvotes: 8

limbo93
limbo93

Reputation: 7447

In Visual Studio Code, menu File → Preferences → Settings → User Settings,

"typescript.preferences.importModuleSpecifier": "relative"

It works fine for me. It imports

import { RegistrationComponent } from '../../abc-modules/registration/registration.component';

in place of

import { RegistrationComponent } from 'app/abc-modules/registration/registration.component';

Upvotes: 661

Related Questions