tsconfig.json Generator

Build a TypeScript compiler config interactively — every option, including the whole strict family, explained in one plain-English line right next to the checkbox. Pick a preset for Node, React, a library, or a monorepo package, adjust, and copy the annotated result.

What tsconfig.json is: the file that tells the TypeScript compiler what to check, how strictly, and what JavaScript to produce. {"compilerOptions": {...}, "include": ["src"]} Most build pain traces back to three options — module, moduleResolution, and target — and most missed bugs trace back to strict flags left off. Both live here.

Presets are starting points — every switch below stays editable after you pick one.

Output & modules

What syntax the output may use. Newer target = less transpilation.

require() vs import in output. nodenext follows your package.json "type".

Use bundler with Vite/webpack/esbuild; nodenext when Node runs the output.

react-jsx needs no React import in every file.

Folder structure under this is mirrored into outDir.

Leave empty to emit next to sources (rarely what you want).

Sets baseUrl: "." automatically when used. Note: tsc only checks aliases — your bundler or runtime must resolve them too.

Strictness — each flag in plain English

Extra strictness (not part of strict)

Interop & environment

Generated entirely in your browser — nothing is uploaded, and the page works offline once loaded. The comments toggle produces JSONC, which tsc accepts in tsconfig.json; strip comments if another tool insists on strict JSON.

[ Ad slot — replace with AdSense / Ezoic code ]

Option reference — what each compiler option actually does

The table below is the fast-lookup version of the checkboxes above, plus the values you'll most often want. It covers the options that account for nearly every real-world tsconfig.

OptionPlain-English effectTypical value
targetNewest JavaScript syntax the output may contain. Also sets the default lib.ES2022+
moduleModule system of the output: require() (commonjs) or import (esnext), or Node's own dual rules (nodenext).nodenext / esnext
moduleResolutionAlgorithm used to find what an import path refers to. Must match who actually loads the code: Node → nodenext, a bundler → bundler.nodenext / bundler
strictUmbrella that enables the nine strict-family checks. The single highest-value line in the file.true
strictNullChecksMakes "possibly undefined" a compile error instead of a production crash.true (via strict)
noImplicitAnyForbids silent any when inference fails — the flag that makes TypeScript actually typed.true (via strict)
noUncheckedIndexedAccessArray/record lookups include undefined. Stricter than strict; catches real off-by-one bugs.true if you can
esModuleInteropFixes default imports from CommonJS packages. Also enables allowSyntheticDefaultImports.true
skipLibCheckSkips checking dependency .d.ts files. Large compile-time win; hides conflicts between dependencies' types.true
isolatedModulesGuarantees each file can be transpiled alone — required for esbuild, swc, and Vite, which work file-by-file.true with bundlers
verbatimModuleSyntaxImports/exports are emitted exactly as written; type-only imports must be marked import type. Replaces the older importsNotUsedAsValues.true for libraries
resolveJsonModuleAllows importing .json files, typed from their contents. See the section below.true
jsxWhat happens to JSX: compiled with the modern runtime (react-jsx), left alone for a bundler (preserve), or classic React.createElement (react).react-jsx
declarationEmit .d.ts files so consumers of your package get types.true for libraries
declarationMapSource maps for .d.ts — "Go to definition" lands in your .ts, not the declaration.true with declaration
sourceMapEmit .js.map so runtime stack traces map back to TypeScript lines.true
outDir / rootDirWhere output goes / what the source root is. rootDir's folder structure is mirrored into outDir.dist / src
baseUrl + pathsImport aliases like @/utils. Checked by tsc only — the bundler or a runtime loader must resolve them too.as needed
noEmitType-check without producing files — the standard setup when a bundler emits the JS.true with bundlers
composite / incrementalProject-reference builds and build-info caching for monorepos and faster re-compiles.monorepos
libWhich built-in type definitions exist: DOM globals, ES library features. Pure Node code should drop DOM.["ES2022"] or +DOM
allowJs / checkJsInclude .js files in compilation / also type-check them. The gradual-migration switches.migration only
forceConsistentCasingInFileNamesCatches import "./Utils" vs utils.ts — works on macOS, breaks on Linux CI.true

Common errors this file causes — and which option fixes them

When TypeScript errors mention modules, JSX, or JSON, the bug is usually in tsconfig, not your code:

resolveJsonModule — importing JSON with types

With resolveJsonModule on, this works and the import is typed from the file's actual contents:

import config from "./config.json"; // config.port is number, config.name is string — inferred from the JSON console.log(config.port);

Details worth knowing: the inferred type is wide ("production" in the file types as string, not the literal); the JSON becomes a real module in the output, so it's compiled into your build rather than read at runtime — editing the .json after compiling changes nothing until you rebuild; and under module: nodenext ESM, Node additionally requires an import attribute (import config from "./config.json" with { type: "json" }). If you want runtime-loaded, validated config, read the file with fs and validate it — resolveJsonModule is for build-time data like locale strings, fixtures, and version manifests.

Related tools

[ Ad slot — replace with AdSense / Ezoic code ]

Frequently asked questions

Are comments really allowed in tsconfig.json?

Yes — tsconfig.json is parsed as JSONC (JSON with comments and trailing commas) by the TypeScript compiler and by editors like VS Code. The comments toggle here annotates each option so future-you knows why it's set. If some other tool reads the file with a strict JSON parser, turn the toggle off and copy the clean version.

Which module / moduleResolution should I pick?

Decide by who loads the compiled code. Node runs it directly → module: nodenext + moduleResolution: nodenext (it follows your package.json "type" field and Node's real rules, including required file extensions in ESM). A bundler (Vite, webpack, esbuild) consumes your source → module: esnext + moduleResolution: bundler, usually with noEmit. Legacy CommonJS-only projects → commonjs + node10. The generator enforces the valid pairings automatically.

Should I just turn on strict?

For new projects, yes, without hesitation — it's one line and every flag in the family exists because it catches a real bug class. For existing codebases the practical path is incremental: enable strict, then temporarily switch off the individual family flags that produce the most errors (the generator writes those explicit false lines for you), and burn them down one at a time. noImplicitAny and strictNullChecks deliver the most value, in that order.

Why does my alias import work in the editor but fail when I run the code?

Because paths is type-checker configuration only. VS Code and tsc read it, so editing feels fine — but the emitted JavaScript still contains @/utils, which Node and browsers can't resolve. Configure the same alias in whatever runs the code: Vite's resolve.alias, webpack's alias config, or Node's imports field in package.json (with # prefixes).

What's the difference between include, exclude, and files?

include is a list of glob patterns for what to compile (this generator sets it from your rootDir). exclude removes matches from include — it does not prevent a file from being pulled in by an import; if included code imports an excluded file, it's compiled anyway. files is an explicit list for tiny projects. node_modules is excluded by default; you rarely need to list it.

Does this generator cover every TypeScript option?

No — TypeScript has over a hundred compiler options, many obsolete or single-purpose. This covers the set that real projects set deliberately: output, modules, the full strict family, the useful extra-strict flags, interop, and project-structure options. For anything exotic, the generated file is a clean base to add one more line to.