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