feat: setup alias

.gitignore

@@ -15,6 +15,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/settings.json
 .idea
 .DS_Store
 *.suo

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.format": "explicit"
+  }
+}

package.json

@@ -24,6 +24,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/node": "^22.10.10",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "^7.15.0",

src/App.tsx

@@ -1,5 +1,12 @@
+import Home from "@/components/Home";
+
 function App() {
-  return <div className="text-red-500 text-6xl text-center font-bold">React Boilerplate</div>;
+  return (
+    <div className="text-red-500 text-5xl text-center font-bold">
+      React Boilerplate
+      <Home />
+    </div>
+  );
 }
 
 export default App;

src/components/Home.tsx

@@ -0,0 +1,5 @@
+const Home = () => {
+  return <div className="text-blue-500">Hello user</div>;
+};
+
+export default Home;

src/main.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
-import "./index.css";
+import App from "@/App";
+import "@/index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

tsconfig.app.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".", 
+    "paths": {
+      "@/*": ["src/*"]
+    },
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
@@ -23,5 +27,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src"],
 }

tsconfig.json

@@ -7,5 +7,11 @@
     {
       "path": "./tsconfig.node.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
 }

vite.config.ts

@@ -1,18 +1,17 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   base: "/",
   plugins: [react()],
-  preview: {
-    port: 5173,
-    strictPort: true,
-  },
   server: {
     port: 5173,
-    strictPort: true,
-    host: true,
-    origin: "http://localhost:5173",
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
   },
 });