What's different between the three presets?

React app sets jsx: "react-jsx", DOM libs, moduleResolution: "Bundler", and noEmit (since a bundler like Vite/webpack handles the actual output). Node backend sets moduleResolution: "NodeNext" and an outDir/rootDir pair for a compiled dist. Library adds declaration and declarationMap so consumers get .d.ts files, plus outDir/rootDir for a clean build output.

Should I turn strict mode on?

Yes for nearly every project. `strict: true` enables the full set of stricter type-checking flags (strictNullChecks, noImplicitAny, and others) as a single switch, and catching those issues early is far cheaper than encountering them at runtime later.

How do path aliases work at runtime?

The `paths` field only affects TypeScript's type-checker and IDE resolution, it does not rewrite import paths in emitted JavaScript. Your bundler (Vite, webpack) or a runtime tool (tsc-alias, tsconfig-paths) still needs matching alias configuration for the aliases to resolve when the code actually runs.

What does noEmit do in the React app preset?

It tells tsc to only type-check the project and produce no JavaScript output, since a separate bundler (Vite, webpack, Next.js) does the actual transpilation and bundling. Leaving noEmit off in that setup usually just produces unused .js files alongside your source.

tsconfig.json Generator - React, Node, or Library Preset

Overview

Introduction

A tsconfig.json controls how strictly and how the TypeScript compiler checks your code, and the right settings differ meaningfully between a React front-end, a Node backend, and a publishable library, yet most people copy one from an unrelated project and never revisit it.

This tool generates a tsconfig.json from a preset for exactly those three shapes, with target/module, strict mode, path aliases, and include/exclude all configurable on top.

What Is tsconfig.json Generator?

A tsconfig.json generator with three presets: React app (bundler-oriented, JSX, DOM libs, noEmit), Node backend (NodeNext resolution, compiled output), and library (adds declaration output for consumers).

On top of the preset, you control target/module, strict mode, `paths` alias rows, and `include`/`exclude` globs, and the tool merges everything into one valid compilerOptions block.

How tsconfig.json Generator Works

Selecting a preset applies a fixed set of compiler options known to suit that project shape (e.g. `jsx: "react-jsx"` and `moduleResolution: "Bundler"` for React app, `declaration: true` for library).

Your target, module, strict mode, path aliases, and include/exclude are layered on top of the preset defaults and serialized as formatted JSON, with `baseUrl`/`paths` only added when you've actually entered an alias row.

When To Use tsconfig.json Generator

Use it when bootstrapping a new TypeScript project and you want compiler options that already match the project's shape, rather than starting from an empty file and researching each flag.

It's also useful for standardizing tsconfig.json across multiple internal packages of the same type (several Node services, several published libraries).

Often used alongside package.json Generator, ESLint Flat Config Generator and Vite Config Generator.

Features

Advantages

Presets apply the compiler options a React app, Node backend, or library actually needs, not a generic one-size-fits-all set.
Path alias rows generate correctly-shaped `paths` entries without hand-writing the array-of-strings format TypeScript expects.
Strict mode is a single toggle, making it easy to see and control whether the stricter type-checking flags are on.

Limitations

Doesn't validate that your bundler or runtime is actually configured to resolve the same path aliases; `paths` alone only affects type-checking.
Covers the common compilerOptions fields; advanced project-references or composite-build setups need manual configuration on top of this output.

Examples

A React app tsconfig with a path alias

Input

preset: react-app, target: ES2022, module: ESNext, strict: true, paths: @/* -> src/*

Output

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "strict": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

Best Practices & Notes

Best Practices

Leave strict mode on for new projects; disabling it to silence errors just defers the same type errors to runtime.
Use the library preset (with declaration output) for anything published to npm, so consumers get accurate .d.ts types.
Keep `include`/`exclude` narrow (e.g. include just `src`, exclude `dist`/`node_modules`) so editor tooling doesn't type-check build output.

Developer Notes

The library preset sets `declaration` and `declarationMap` together so consumers get both .d.ts files and source-mapped go-to-definition into the original TypeScript. The React app preset intentionally sets `noEmit: true` because JSX/TSX transpilation and bundling are assumed to be handled by a separate bundler step (Vite, webpack, Next.js) rather than tsc itself. `paths` is only emitted when at least one alias row has both an alias and a path filled in, so an empty form never produces an empty `paths: {}` block.

tsconfig.json Generator Use Cases

Bootstrapping tsconfig.json for a new React, Node, or library TypeScript project
Standardizing compiler options across several related internal packages
Adding path aliases to an existing project's tsconfig without hand-writing the paths object shape

Common Mistakes

Assuming a `paths` alias in tsconfig.json alone makes `@/foo` resolve at runtime or in a bundler, when the bundler needs its own matching alias configuration.
Using the React app preset's `noEmit: true` setting in a project where tsc is actually expected to produce the shipped JavaScript output.

Tips

Use the Vite Config Generator or Webpack Config Generator next to add matching `resolve.alias` entries for any path aliases you defined here.

tsconfig.json Generator