Autocomplete for typescript shows wrong path on VSCode

Question

I've been facing some annoying trouble on typescript + VSCode when it comes to autocomplete:

Whenever I try to autoComplete, it never brings the correct path. If I am at ./src/components/foo and I type Bar to get it from './src/components/bar/index.tsx', instead of autocomplete completes with import {Bar} from '../bar', i always get import {Bar} from 'src/components/bar'

my tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "sourceMap": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "rootDirs": ["src", "stories"],
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "my-lib": ["./node_modules/my-lib/dist/*"]
    }
  },

  "include": [
    "index.d.ts",
    "./src/**/*",
    "./stories/**/**/*"
  ]
}

Answer 1

Update Vscode settings

On VScode File>Preferences>Settings>User Settings

"typescript.preferences.importModuleSpecifier": "relative"