vite tsconfig

tsconfig for Vite

Generate a TypeScript config starter for Vite React and modern browser apps.

Vite-friendly settings

Vite projects usually want DOM libs, modern module output, bundler resolution, class field semantics, React JSX when relevant, and noEmit so Vite owns bundling.

When to split configs

Use separate app and node configs when a Vite project also has test, build, or script files that run outside the browser.

React app starter

For a Vite React app, keep JSX handling, DOM libs, and bundler resolution aligned with the Vite compiler rather than Node runtime defaults.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "useDefineForClassFields": true
  }
}

Test and tooling files

Vitest, Playwright, build scripts, and config files may run in Node. Give those files a separate tsconfig if they need Node types or different module settings.

Strict browser code

Strict mode is a good default for Vite apps because UI state, fetched JSON, and component props benefit from early null and shape checks.

Before committing

Run the Vite build, tests, and any explicit typecheck command. Verify aliases match both TypeScript and Vite config so editor imports behave like production builds.

Vite tsconfig decisions

Need	Recommended setting	Review note
Browser APIs	`lib` includes `DOM` and modern ECMAScript.	Needed for React, fetch, and browser globals.
Bundled imports	`moduleResolution: bundler`	Matches Vite's dependency and path handling.
Class fields	`useDefineForClassFields: true`	Matches Vite's modern class field semantics.
Build output	`noEmit: true`	Vite handles emitted assets and JavaScript.
Node scripts	Separate node tsconfig	Avoid mixing DOM and Node-only assumptions.

Use FrameworkKit to generate the starter code, then review the output before shipping it in production.

Generate with tsconfig Builder

tsconfig resources

tsconfig Builder

Generate TypeScript config presets for Next.js, Vite, Node, libraries, and strict mode projects.

tsconfig examples

Compare framework-aware TypeScript config starters before adapting your own project config.

tsconfig for Next.js

Start from a Next.js App Router TypeScript config and preserve generated route/framework types.

moduleResolution bundler vs node16

Choose TypeScript module resolution for bundlers, Node ESM, libraries, and monorepos.

tsconfig Builder vs manual config

Decide when a generated config starter is enough and when a project needs manual compiler options.

FAQ

Should Vite use moduleResolution bundler?

Usually yes. Vite resolves imports through a bundler, so `bundler` better matches app behavior than Node-specific resolution.

Does Vite need noEmit?

Most Vite apps use `noEmit: true` because Vite handles output and TypeScript checks types.

Why split app and node tsconfigs?

Browser code and tooling code often need different globals, libs, and module assumptions. Splitting avoids accidental type leakage.

Can this config be used for Vue or Svelte?

Use it as a baseline, then adapt JSX and framework-specific plugin requirements for your Vite stack.

Related comparisons

tsconfig Builder vs Manual Config

Compare generated tsconfig presets with hand-written TypeScript configuration.