From 8deb4d030c996361b17ebf9079d25e3dcc5a29d7 Mon Sep 17 00:00:00 2001
From: rxliuli <rxliuli@gmail.com>
Date: Thu, 9 Jan 2025 06:54:26 +0800
Subject: [PATCH] docs: update installation for vite (#1606)

---
 sites/docs/src/content/installation/vite.md | 35 +++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/sites/docs/src/content/installation/vite.md b/sites/docs/src/content/installation/vite.md
index f02fd6a1f..03d09c69b 100644
--- a/sites/docs/src/content/installation/vite.md
+++ b/sites/docs/src/content/installation/vite.md
@@ -22,9 +22,11 @@ Use the Svelte CLI to add Tailwind CSS to your project.
 
 <PMInstall />
 
-### Setup path aliases
+### Edit tsconfig.json file
 
-Update your path aliases in your `tsconfig.json` and `vite.config.ts`.
+The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
+Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
+`tsconfig.app.json` files:
 
 ```json title="tsconfig.json" {3-7}
 {
@@ -38,6 +40,35 @@ Update your path aliases in your `tsconfig.json` and `vite.config.ts`.
 }
 ```
 
+### Edit tsconfig.app.json file
+
+Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:
+
+```ts title="tsconfig.app.json" {11-17}
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"]
+    }
+  }
+}
+```
+
+### Update vite.config.ts
+
+Add the following code to the vite.config.ts so your app can resolve paths without error:
+
 ```js title="vite.config.ts" {1, 5-9}
 import path from "path";