1 reply

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

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}

// 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/*"],
    }

//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"
}

//.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.

TTC

Theo's Typesafe Cult•2y ago•

1 reply

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

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}

// 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/*"],
    }

//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"
}

//.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.

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads