TSConfig Generator

Generate tsconfig.json for any TypeScript project. Presets for Node 18/20/22, Next.js, React, libraries โ€” with every compiler option explained.

Comma-separated glob patterns

Comma-separated glob patterns

About This Tool

The tsconfig.json file controls how the TypeScript compiler processes your code โ€” what JavaScript version to target, which module system to use, how strict the type checking should be, and where to find your source files. Getting tsconfig right matters. A misconfigured target means you ship polyfills you don't need, or use syntax your runtime doesn't support. Wrong module settings break imports. Missing strict flags let bugs slip through. This generator gives you battle-tested presets for the most common setups โ€” Node.js (18, 20, 22), Next.js, React with Vite, and npm libraries โ€” then lets you fine-tune every option. The generated config is ready to paste into your project.

How to Use

1. Pick a preset that matches your project (Node 20, Next.js, React, etc.) 2. Adjust individual compiler options if needed โ€” target, module, strictness, paths 3. The tsconfig.json updates in real time as you change settings 4. Click "Copy" to copy the config to your clipboard, or "Download" to save the file 5. Paste it into your project root as tsconfig.json

Frequently Asked Questions

What tsconfig should I use for Node 18?
For Node 18, use target: ES2023, module: NodeNext, and moduleResolution: NodeNext. This matches Node 18's native JavaScript support and ESM module system. The Node 18 preset in this generator sets all these options automatically.
What is the difference between module NodeNext and ESNext?
NodeNext follows Node.js module resolution rules โ€” it respects package.json 'exports' and requires file extensions in imports. ESNext assumes a bundler (like Vite or webpack) will handle module resolution. Use NodeNext for Node.js apps, ESNext for bundled frontend apps.
What does moduleResolution Bundler do?
moduleResolution: Bundler tells TypeScript to resolve imports the way modern bundlers (Vite, webpack, esbuild) do โ€” no file extensions required, package.json 'exports' supported. Use it for frontend projects built with a bundler. Don't use it for Node.js apps that run without a bundler.
Should I enable strict mode?
Yes, for any new project. Strict mode enables strictNullChecks, noImplicitAny, strictFunctionTypes, and other checks that catch real bugs. Disabling strict on legacy codebases is understandable, but new projects should always start with strict: true.
What is the difference between target and lib?
target controls what JavaScript syntax the compiler outputs (arrow functions, async/await, etc.). lib controls which type definitions are available (Promise, Map, DOM APIs, etc.). For Node.js you typically want lib: ['ES2023'] without DOM. For browsers you add 'DOM' and 'DOM.Iterable'.
Do I need skipLibCheck: true?
skipLibCheck: true skips type checking of .d.ts declaration files, which speeds up compilation significantly. It's recommended for most projects because declaration files from node_modules can have conflicting types that aren't your problem to fix.
What does verbatimModuleSyntax do?
verbatimModuleSyntax enforces that you use 'import type' for type-only imports and keeps your import/export syntax exactly as written. It replaces the older importsNotUsedAsValues and preserveValueImports options. It's the modern way to handle type imports in TypeScript 5+.

Related Tools