Import with aliases from upper level

And i have aliases enabled for entities folder and structure like this: 








In useSomeHook1.ts i'm importing useSomeHook this way:

import { useSomeHook } from '../useSomeHook';

But WebStorm suggests to change import to a shorter import { useSomeHook } from '@entities/folder1'; i don't want this approach because it can be something like this: import { useSomeHook } from '@entities/folder1/folder2/folder3/folder4'; How can i change this behaviour?

My vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@entities': path.resolve(__dirname, './src/entities'),

My tsconfig.json:
  "include": ["src"],
  "compilerOptions": {
    "types": ["vite/client"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@entities/*": ["src/entities/*"]


You can try setting the Use path mappings from tsconfig.json to Only in files outside specified paths in Preferences | Editor | Code Style | TypeScript > Imports: with this option, the IDE uses relative paths for imports between the files for which the path alias is defined. In all other files the path mapping will be used. Does it help?

Do you have a sample project you can share that reproduces the issue?