tsconfig.json Generator

You’re setting up a new TypeScript project and tsconfig.json has 100+ compiler options. Should you use "module": "ESNext" or "NodeNext"? Is "moduleResolution": "bundler" the right choice for Vite? What does "verbatimModuleSyntax" do and should it be true? You need a visual form that shows the common options with sensible defaults, not a 200-line JSON file where you guess at values.

Why This Generator (Not the TypeScript Playground)

PureDevTools has a TypeScript Playground for testing TypeScript code. This tool generates tsconfig.json configuration files — configure compiler options, module resolution, path aliases, strict mode settings, and output options through a visual form. Each option shows its effect so you can make informed decisions. Everything runs in your browser.

What Is tsconfig.json?

tsconfig.json is the configuration file that tells the TypeScript compiler (tsc) how to compile your project. It controls which files are included, how the output is generated, which language features are available, and how strictly TypeScript checks your code.

Every TypeScript project — whether it is a React app, a Node.js server, a shared library, or a Next.js site — needs a well-formed tsconfig.json. Misconfigured options cause silent bugs, incompatible output, or broken tooling integrations.

This tool lets you build a valid tsconfig.json through a guided form with preset templates for common project types, then copy the formatted JSON directly into your project.

How to Use This Tool

1. Choose a preset — click React, Node.js, Library, or Next.js to load a sensible baseline configuration for your project type.
2. Configure compiler options — set target, module, moduleResolution, lib, and jsx to match your runtime environment.
3. Toggle strict mode — enable strict for the full strict family, or enable individual checks like noImplicitAny and strictNullChecks separately.
4. Set path options — configure rootDir, outDir, baseUrl, and path alias mappings.
5. Enable declaration options — turn on declaration, declarationMap, and sourceMap for library publishing or debugging.
6. Add include/exclude patterns — specify which files TypeScript should compile (one glob per line).
7. Copy the output — the formatted tsconfig.json updates live as you change settings. Click Copy to copy it to the clipboard.

All processing happens in your browser. Nothing is sent to a server.

Compiler Options Explained

target

The ECMAScript version of the output JavaScript. TypeScript compiles modern syntax down to the selected target:

Setting target also implicitly adjusts which lib entries are included if lib is not specified explicitly.

module

The module system used in the emitted JavaScript:

moduleResolution

Controls how TypeScript resolves imported module paths:

lib

The set of built-in API type definitions included automatically. TypeScript uses these to know which global objects and methods exist:

Omitting lib causes TypeScript to infer a default set from target. Explicitly setting lib overrides the defaults.

jsx

Controls how JSX is transformed in .tsx files:

Strict Mode Checks

strict

Enables the entire strict family of checks in a single flag. Recommended for all new projects:

• noImplicitAny — error on implicit any types
• strictNullChecks — null and undefined are not assignable to other types
• strictFunctionTypes — stricter function parameter checking
• strictBindCallApply — types bind, call, apply strictly
• strictPropertyInitialization — class properties must be initialised in the constructor
• useUnknownInCatchVariables — catch (e) type is unknown instead of any

noImplicitReturns

Requires all code paths in a function to return a value when the return type is not void. Prevents accidentally returning undefined in non-void functions.

noUnusedLocals and noUnusedParameters

Errors on declared variables and function parameters that are never read. Helps keep code clean and avoids common oversights like forgetting to delete a debug variable.

Path Options

rootDir

The root directory of your input TypeScript source files. TypeScript uses this to compute the output directory structure.

"rootDir": "src"

outDir

The directory where compiled JavaScript (and optionally .d.ts) files are written. Keep source files and output files separate.

"outDir": "dist"

baseUrl

The base directory for resolving non-relative module names. Setting "baseUrl": "." lets you write import { foo } from "utils/foo" instead of import { foo } from "../../utils/foo".

paths

Maps module alias patterns to file system locations. Used together with baseUrl:

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"],
    "@components/*": ["./src/components/*"]
  }
}

After setting up paths in TypeScript, configure the same aliases in your bundler (Vite resolve.alias, webpack resolve.alias, or tsconfig-paths for Node.js).

Declaration Options

declaration

Generates .d.ts type declaration files alongside each compiled .js file. Required when publishing a library to npm so consumers get type information.

declarationMap

Generates .d.ts.map files that map from the declaration file back to the original TypeScript source. Enables IDE “Go to Definition” to jump to your .ts source rather than the compiled declaration.

sourceMap

Generates .js.map files that map compiled JavaScript back to the original TypeScript. Enables debuggers (Chrome DevTools, VS Code) to show original TypeScript source during debugging instead of compiled output.

Common tsconfig.json Patterns

React + Vite

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

Node.js 18+ with ESM

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "lib": ["ES2022"],
    "strict": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true
  }
}

Reusable Library

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "moduleResolution": "Node",
    "lib": ["ES2015"],
    "strict": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

Frequently Asked Questions

Q: What is the difference between target and lib? A: target controls what JavaScript syntax TypeScript emits (e.g. arrow functions vs function keywords, class vs prototype chains). lib controls which global APIs TypeScript knows about at type-check time. Setting target: "ES2020" does not automatically make fetch available — you also need "lib": ["DOM"] for browser APIs.

Q: Should I use strict: true or individual strict flags? A: Use strict: true for all new projects. It enables the most important checks at once and ensures you get future strict-family additions automatically. Only use individual flags when incrementally migrating a large legacy codebase that cannot enable all checks at once.

Q: What is the difference between Node and NodeNext module resolution? A: Node uses the classic Node.js CommonJS resolution algorithm (no extensions required on imports). NodeNext mirrors the modern Node.js ESM resolution algorithm, which requires explicit file extensions (.js) on imports and respects package.json exports conditions. Use NodeNext when your package.json has "type": "module".

Q: Why do I need "moduleResolution": "Bundler" for Vite? A: Vite uses its own module resolution that differs from Node.js: it handles bare imports, path aliases, and file extensions differently. Bundler mode tells TypeScript to follow bundler conventions — no extension requirement, respects exports conditions, works with path aliases — giving you accurate type checking without false errors.

Q: What are include and exclude patterns? A: include lists the files or glob patterns TypeScript should compile. exclude lists patterns to ignore. If neither is specified, TypeScript includes all .ts/.tsx files in the project folder except node_modules. Common patterns: "include": ["src/**/*"], "exclude": ["node_modules", "dist"].

Q: Should I commit tsconfig.json to version control? A: Yes. tsconfig.json defines how your project compiles and should be committed alongside your source code. Every developer and CI system should compile the project in the same way.

Q: Is my tsconfig data sent to a server? A: No. All configuration and JSON generation happens entirely in your browser. No data is sent anywhere.