added @ alias

.nvmrc

@@ -0,0 +1 @@
+v20.14.0

src/api/auth.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
-import {axi} from 'src/api/axiosSetup';
-import {BASE_URL} from 'src/api/config';
+import {axi} from '@/api/axiosSetup';
+import {BASE_URL} from '@/api/config';
 
 export const login = async (
   username: string,

src/api/users.ts

@@ -1,6 +1,6 @@
-import {axi} from 'src/api/axiosSetup';
-import {BASE_URL} from 'src/api/config';
-import User from 'src/types/users/User';
+import {axi} from '@/api/axiosSetup';
+import {BASE_URL} from '@/api/config';
+import User from '@/types/users/User';
 
 export const getUsers = async (): Promise<User[]> => {
   const response = await axi.get(`${BASE_URL}/api/users/`);

src/app/App.tsx

@@ -3,9 +3,9 @@ import {BrowserRouter} from 'react-router-dom';
 import {createTheme, ThemeProvider} from '@mui/material/styles';
 
 import AppGlobalStyles from './GlobalStyles';
-import AppRoutes from 'src/app/Routes';
-import {AuthProvider} from 'src/contexts/AuthContext';
-import {isProduction} from 'src/utils/env';
+import AppRoutes from '@/app/Routes';
+import {AuthProvider} from '@/contexts/AuthContext';
+import {isProduction} from '@/utils/env';
 
 const theme = createTheme();
 

src/app/Routes.tsx

@@ -1,10 +1,10 @@
 import {FC, memo} from 'react';
 import {Navigate, Route, Routes as ReactRoutes} from 'react-router-dom';
 
-import {ROUTE__LOGIN, ROUTE__MAIN} from 'src/constants/routes';
-import useAuth from 'src/hooks/useAuth';
-import Login from 'src/pages/Login';
-import Main from 'src/pages/Main';
+import {ROUTE__LOGIN, ROUTE__MAIN} from '@/constants/routes';
+import useAuth from '@/hooks/useAuth';
+import Login from '@/pages/Login';
+import Main from '@/pages/Main';
 
 const Routes: FC = () => {
   const {isAuthenticated} = useAuth();

src/contexts/AuthContext.tsx

@@ -9,17 +9,17 @@ import {
 } from 'react';
 import {useLocation, useNavigate} from 'react-router-dom';
 
-import {init as apiInit, login as apiLogin, uninit as apiUninit} from 'src/api';
-import {ROUTE__LOGIN, ROUTE__MAIN} from 'src/constants/routes';
+import {init as apiInit, login as apiLogin, uninit as apiUninit} from '@/api';
+import {ROUTE__LOGIN, ROUTE__MAIN} from '@/constants/routes';
 import {
   getAuthToken as getAuthTokenFromLocalStorage,
   getUserId as getUserIdFromLocalStorage,
   remAuthToken as remAuthTokenFromLocalStorage,
   remUserId as remUserIdFromLocalStorage,
   setAuthToken as putAuthTokenToLocalStorage,
   setUserId as putUserIdToLocalStorage,
-} from 'src/helpers/localStorage';
-import UserLoggedIn from 'src/types/UserLoggedIn';
+} from '@/helpers/localStorage';
+import UserLoggedIn from '@/types/UserLoggedIn';
 
 export interface AuthState {
   isAuthenticated: boolean;

src/hooks/useAuth.ts

@@ -1,6 +1,6 @@
 import {useContext} from 'react';
 
-import AuthContext, {AuthContextType} from 'src/contexts/AuthContext';
+import AuthContext, {AuthContextType} from '@/contexts/AuthContext';
 
 const useAuth = (): AuthContextType => useContext(AuthContext);
 

src/pages/Login/index.tsx

@@ -2,7 +2,7 @@ import {memo, useCallback, useState} from 'react';
 import {Box, Button, FormHelperText, Typography} from '@mui/material';
 import * as Yup from 'yup';
 
-import useAuth from 'src/hooks/useAuth';
+import useAuth from '@/hooks/useAuth';
 import {InferType} from 'yup';
 import {FormProvider, useForm} from 'react-hook-form';
 import {yupResolver} from '@hookform/resolvers/yup';

src/pages/Main/index.tsx

@@ -1,9 +1,9 @@
 import {memo, useEffect, useState} from 'react';
 import {Box, Button} from '@mui/material';
 
-import {getUsers} from 'src/api/users';
-import useAuth from 'src/hooks/useAuth';
-import User from 'src/types/users/User';
+import {getUsers} from '@/api/users';
+import useAuth from '@/hooks/useAuth';
+import User from '@/types/users/User';
 import errorImg from 'IMAGES/sad-cloud.png';
 
 const areaColor = '#e2deed';

tsconfig.json

@@ -15,6 +15,9 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    },
 
     /* Additional Checks */
     // Eslint already checks this

vite.config.ts

@@ -14,7 +14,7 @@ export default () => {
     ],
     resolve: {
       alias: {
-        src: path.resolve(__dirname, './src'),
+        '@': path.resolve(__dirname, './src'),
         IMAGES: path.resolve(__dirname, './src/assets/images'),
       },
     },