update(other): 🧩 update tsconfig, eslint alias

update alias for tsconfig and eslint + settings vscode file

Author: anhchangvt1994

.eslintrc

@@ -49,10 +49,10 @@
 			"eslint-import-resolver-custom-alias": {
 				"alias": {
 					"@": "./",
-					"js": "./src",
-					"assets": "./assets"
+					"src": "./src",
+					"assets": "./src/assets"
 				},
-				"extensions": [".js", ".jsx", ".vue", ".ts", ".tsx"]
+				"extensions": [".js", ".jsx", ".ts", ".tsx"]
 			}
 		}
 	}

.vscode/settings.json

@@ -1,3 +1,14 @@
 {
-    "nuxt.isNuxtApp": false
-}
+	"nuxt.isNuxtApp": false,
+
+	"path-autocomplete.extensionOnImport": true,
+	"path-autocomplete.includeExtension": true,
+	"path-autocomplete.excludedItems": {
+		"**": { "when": "**/*.{js,jsx,ts,tsx}", "isDir": true }
+	},
+	"path-autocomplete.pathMappings": {
+		"images": "${workspace}/src/assets/images"
+	},
+	"path-autocomplete.pathSeparators": " \t({[",
+	"editor.suggest.showModules": false
+}

config/index.html

@@ -415,71 +415,71 @@
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-out">
 						<img
-							src="<%= require('assets/images/development/svg/money.svg') %>"
+							src="<%= require('src/assets/images/development/svg/money.svg') %>"
 							alt=""
 							width="40"
 							height="40"
 						/>
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-in">
 						<img
-							src="<%= require('assets/images/development/svg/onion-purple.svg') %>"
+							src="<%= require('src/assets/images/development/svg/onion-purple.svg') %>"
 							alt=""
 							width="40"
 							height="40"
 						/>
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-in">
 						<img
-							src="<%= require('assets/images/development/svg/bug.svg') %>"
+							src="<%= require('src/assets/images/development/svg/bug.svg') %>"
 							alt=""
 							width="40"
 							height="40"
 						/>
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-out">
 						<img
-							src="<%= require('assets/images/development/svg/sycee-gold.svg') %>"
+							src="<%= require('src/assets/images/development/svg/sycee-gold.svg') %>"
 							alt=""
 							width="40"
 							height="40"
 						/>
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-out">
 						<img
-							src="<%= require('assets/images/development/svg/bitcoin.svg') %>"
+							src="<%= require('src/assets/images/development/svg/bitcoin.svg') %>"
 							alt=""
 							width="40"
 							height="40"
 						/>
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-in">
 						<img
-							src="<%= require('assets/images/development/svg/medicines.svg') %>"
+							src="<%= require('src/assets/images/development/svg/medicines.svg') %>"
 							alt=""
 							width="40"
 							height="40"
 						/>
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-in">
 						<img
-							src="<%= require('assets/images/development/svg/chili.svg') %>"
+							src="<%= require('src/assets/images/development/svg/chili.svg') %>"
 							alt=""
 							width="40"
 							height="40"
 						/>
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-out">
 						<img
-							src="<%= require('assets/images/development/svg/diamond.svg') %>"
+							src="<%= require('src/assets/images/development/svg/diamond.svg') %>"
 							alt=""
 							width="40"
 							height="40"
 						/>
 					</div>
 					<div class="compilation-loading-screen__pacman--ball-in">
 						<img
-							src="<%= require('assets/images/development/svg/cannabis.svg') %>"
+							src="<%= require('src/assets/images/development/svg/cannabis.svg') %>"
 							alt=""
 							width="40"
 							height="40"

config/webpack.development.config.js

@@ -61,6 +61,7 @@ const WebpackDevelopmentConfiguration = async () => {
 			liveReload: false,
 			host: process.env.PROJECT_IPV4_HOST,
 			client: { overlay: false }, // NOTE - Use overlay of react refresh plugin
+			historyApiFallback: true,
 			devMiddleware: {
 				publicPath: '/',
 				writeToDisk: true,
@@ -172,13 +173,13 @@ const WebpackDevelopmentConfiguration = async () => {
 
 		cache: {
 			// NOTE - Type memory
-			type: 'memory',
-			cacheUnaffected: true,
-			maxGenerations: Infinity,
+			// type: 'memory',
+			// cacheUnaffected: true,
+			// maxGenerations: Infinity,
 
 			// NOTE - Type filesystem
-			// type: 'filesystem',
-			// compression: 'gzip',
+			type: 'filesystem',
+			compression: 'gzip',
 		},
 
 		// NOTE - We need get single runtime chunk to ignore issue hot module replacement does not work after changing a file

config/webpack.serve.config.js

@@ -10,6 +10,7 @@ const serverInitial = new WebpackDevServer(
 	{
 		compress: true,
 		static: './dist',
+    historyApiFallback: true,
 	}
 )
 

src/App.tsx

@@ -1,4 +1,4 @@
-import useEffectCustomize from 'js/services/use-effect-customize'
+import useEffectCustomize from 'src/utils/use-effect-customize'
 
 function App() {
 	const [count, setCount] = useState(0)