From c19a6c545b2dfd7b668915b62929275f80777b06 Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 4 Dec 2024 10:15:41 -0500
Subject: [PATCH] docs: prefer `verbatimModuleSyntax` when setting up type-only
 auto-imports (#12464)

that lets the TypeScript LSP handle `type` auto-imports, which means it
works in any modern editor without any additional configuration
---
 docs/how-to/route-module-type-safety.md | 35 ++++++++-----------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/docs/how-to/route-module-type-safety.md b/docs/how-to/route-module-type-safety.md
index 44af4006e6..8b4a285231 100644
--- a/docs/how-to/route-module-type-safety.md
+++ b/docs/how-to/route-module-type-safety.md
@@ -53,38 +53,25 @@ When auto-importing the `Route` type helper, TypeScript will generate:
 import { Route } from "./+types/my-route";
 ```
 
-This will work, but you may want the `type` modifier for the import added automatically as well.
+But if you enable [verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax):
 
-```ts filename=app/routes/my-route.tsx
-import type { Route } from "./+types/my-route";
-//     ^^^^
-```
-
-For example, this helps tools like bundlers to detect type-only module that can be safely excluded from the bundle.
-
-### VSCode
-
-In VSCode, you can get this behavior automatically by selecting `TypeScript › Preferences: Prefer Type Only Auto Imports` from the command palette or by manually setting `preferTypeOnlyAutoImports`:
-
-```json filename=.vscode/settings.json
+```json filename=tsconfig.json
 {
-  "typescript.preferences.preferTypeOnlyAutoImports": true
+  "compilerOptions": {
+    "verbatimModuleSyntax": true
+  }
 }
 ```
 
-### eslint
-
-In eslint, you can get this behavior by setting `prefer: "type-imports"` for the `consistent-type-imports` rule:
+Then, you will get the `type` modifier for the import automatically as well:
 
-```json
-{
-  "@typescript-eslint/consistent-type-imports": [
-    "warn",
-    { "prefer": "type-imports" }
-  ]
-}
+```ts filename=app/routes/my-route.tsx
+import type { Route } from "./+types/my-route";
+//     ^^^^
 ```
 
+This helps tools like bundlers to detect type-only module that can be safely excluded from the bundle.
+
 ## Conclusion
 
 React Router's Vite plugin should be automatically generating types into `.react-router/types/` anytime you edit your route config (`routes.ts`).