Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago
Circus

VSCode Import Autocomplete Purgatory (Relative, absolute, and barrel paths)

I hope I'm missing some easy setting, otherwise this UI seems pretty terrible. Why does the autocomplete path for barrel imports not show up on autocomplete? Manually typing out import {Avatar} from '@components works and does not cause issues in the code, so this is certainly a VSCode setting of some sort

// src/app/_components/index.tsx
import Avatar from "./Avatar";
export {Avatar}


//tsconfig.json  >> switching the order doesn't change anything
"paths": {
      "@/components": ["./src/app/_components"],
      "@/components/*": ["./src/app/_components/*"],
    
      "~/*": ["./src/*"],
    }


//.vscode/settings.json
{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "javascript.preferences.importModuleSpecifier": "non-relative"
}


Bonus points if you know how to get autocomplete to show both the relative and absolute import paths, but that's been a years-long struggle so I'll be happy to just get barrels to work.
Screenshot_2024-04-26_at_8.39.47_AM.png
Was this page helpful?