【WebStorm】Complicated path imported after alias is set

[RoyRao2333]

In vite.config.ts:

In tsconfig.json:

Then in the following code:

As you can see, NavigationToggleButton is just at ./components/NavigationToggleButton.tsx. However, WebStorm auto imported it from the longest path rather than just ./components/NavigationToggleButton.tsx...

Don't know if this issue is with WebStorm or Vite. Anyway, any help is appreciated!

[sapphi-red]

I don't use/know about WebStorm but I guess it can be configured in WebStorm.
https://blog.jetbrains.com/webstorm/2020/07/configuring-the-style-of-imports-in-javascript-and-typescript/

The least that can be said is that Vite does not change WebStorm's behavior.

[RoyRao2333]

@sapphi-red Thanks for the reply!

For anyone with the same issue, set

in the Imports tab in Preferences/Settings | Editor | Code Style | TypeScript.

[DTHRT]

Had the same issue
100% working solution -> https://yoodima.com/blog/how-to-create-path-aliases-in-vite-and-make-them-work-with-webstorm/

[Ryadnov]

thanks, bro!