Auto-import in VSCode to respect *both* relative paths and tsconfig.json paths

Viewed 621

In this issue a recommendation is made to define this setting field:

"typescript.preferences.importModuleSpecifier": "relative"

In order to switch VSCode's auto-import behavior from absolute to relative. This:

import { Logo } from 'src/components/Logo';

becomes:

import { Logo } from '../../components/Logo';

Which is the desired auto-import behavior for us.

However, by changing this setting the auto-import mechanism starts ignoring the tsconfig.ts and instead of importing packages:

import { Button } from '@scope/base-ui';

it also imports files relatively:

import { Button } from '../../../packages/src/base-ui';

Is there a way to enjoy the best of both worlds?

1 Answers
"typescript.preferences.importModuleSpecifier": "shortest"

This will pick an absolute import (including tsconfig-defined paths) if one is available that has fewer path segments than the relative path. If no absolute path is shorter, VS Code will use the relative path.

Related