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

Author: pcattori

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`).