Theo's Typesafe Cult•6mo ago

VSCode Intellisense: "Add import from" only suggests relative path for `cn`

When using the Quick Fix menu in VSCode ("Cmd + ."), it only suggests the relative path to import my cn function. It DOES work correctly when I'm trying to add an import for something in my components directory (see screenshots). They appear to be set up the same so I'm not sure what gives. In my tsconfig.json file, I have

"paths": {
  "@/*": ["./src/*"]
}

"paths": {
  "@/*": ["./src/*"]
}

I don't think this is relevant, but my shadcn components.json file includes:

  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }

  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }

Solution:

I figured it out. I needed to set

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

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

in my VScode settings.json file...

Jump to solution

2 Replies

peteypie_•6mo ago

Note: The import alias "@/lib/utils" does work fine, the issue is that I have to manually type it and Intellisense does not suggest it using the Quick Fix menu in VSCode. Oof. OK actually I see now that it only worked for the components import because I was already importing things from that alias. If I remove all of the imports from "@/components/ui/dropdown-menu", the Quick Fix menu also only suggests the relative path. So how do I get Intellisense to suggest my import aliases instead of the relative path?

Solution

peteypie_•6mo ago

I figured it out. I needed to set

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

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

in my VScode settings.json file

Gaming

Programming

VSCode Intellisense: "Add import from" only suggests relative path for `cn`