Always use alias for automatic imports

Question

Is there a way to force autoimport to always use the alias for importing modules in a [email protected] project using VSCode?

I would like to use them even when it's a sibling component, no exceptions, so instead of

import { Navbar } from "./components";

I would like to force auto-import to use the alias in all cases:

import { Navbar } from "@/components";

Answer 1

Assuming you have your tsconfig.json (or jsconfig.json) setup for path aliases correctly, you can change VSCode's preferences in your User Settings. Search for "Import Module Specifier" and you should see two entries - one for TypeScript and one for JavaScript. To always use the path alias, change these to non-relative.

If you prefer editing your settings.json directly, the keys are:

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

If you want to do this at a per-project level, instead change these for your Workspace Settings.