tsconfig.json generator for Node.js, libraries, Vite, React and Next.js

Pick the kind of project, choose a few switches, and the tool writes a strict tsconfig.json with the right module settings, written for TypeScript 7.

Live demo · real result from this tool

tsconfig.json

{  "$schema": "https://json.schemastore.org/tsconfig",  "compilerOptions": {    "target": "ES2022",    "lib": [      "ES2023"    ],    "module": "NodeNext",    "moduleResolution": "NodeNext",    "types": [      "node"    ],    "strict": true,    "noUncheckedIndexedAccess": true,    "noImplicitOverride": true,    "noFallthroughCasesInSwitch": true,    "exactOptionalPropertyTypes": true,    "skipLibCheck": true,    "forceConsistentCasingInFileNames": true,    "isolatedModules": true,    "verbatimModuleSyntax": true,
    "resolveJsonModule": true,
    "rootDir": "src",
    "outDir": "dist",
    "sourceMap": true
  },
  "include": [
    "src"
  ]
}

Written for TypeScript 7: no baseUrl, no moduleResolution "node" (node10) and no ES5 target — all removed after their deprecation in TypeScript 6.0. "types" is listed explicitly because it now defaults to [].

Processed on your device — nothing is uploaded.

How to use the tsconfig generator

  1. Choose the Project type: Node.js app (NodeNext), Library with type declarations, Web app with a bundler (Vite), React with Vite, or Next.js.
  2. Leave Extra strictness (noUncheckedIndexedAccess …) ticked for new code; untick it for an older codebase.
  3. Tick @/ path alias to ./src/** if you import with @/components/..., and Type-check JavaScript files too for mixed projects.
  4. For Node.js and library presets, set the Source folder and Output folder. A Node.js app can also Emit .d.ts declarations.
  5. Save the output as tsconfig.json in the project root and run npx tsc --noEmit to test it.

What it does and when to use it

tsconfig.json tells the TypeScript compiler which files to check, how strict to be and what kind of JavaScript to produce. Many copied examples online still contain options that newer releases reject. This tool writes a current file for the five common project shapes.

Use it for a new project or when an upgrade starts showing deprecation errors. A Node.js project also needs a package.json with a build: tsc script, and linting comes from the ESLint config generator with its TypeScript option. To type JSON data you already have, try JSON to TypeScript.

How it works

All presets share a strict core: target: ES2022, strict, skipLibCheck, isolatedModules, resolveJsonModule and forceConsistentCasingInFileNames. The presets differ in a few places:

Preset module / resolution lib Output
Node.js app, Library NodeNext / NodeNext ES2023 rootDir → outDir, source maps
Vite, React ESNext / Bundler ES2023, DOM noEmit (Vite builds)
Next.js ESNext / Bundler ES2023, DOM noEmit, next plugin

React uses jsx: react-jsx; Next.js uses jsx: preserve and turns off verbatimModuleSyntax. The Library preset always adds declaration and declarationMap. Each option is explained in the TSConfig reference.

Worked examples

Node.js app with the defaults. The file starts:

    "target": "ES2022",
    "lib": [
      "ES2023"
    ],
    "module": "NodeNext",
    "moduleResolution": "NodeNext",

with rootDir src, outDir dist and "sourceMap": true.

React with a path alias. Preset React with Vite, alias ticked, Extra strictness off. You get "moduleResolution": "Bundler", "jsx": "react-jsx", "types": ["vite/client"], "noEmit": true and a paths entry mapping @/* to ./src/*.

A library in lib/ built to build/. Preset Library, source lib, output build. The file includes lib, writes to build, and adds "declaration": true and "declarationMap": true.

Limits and tips

  • An alias is not enough for Vite. Vite needs the same @ alias, which the Vite config generator can add, or imports fail at build time.
  • Monorepos with project references need extra settings (composite, references) that are not generated.
  • Test with npx tsc --showConfig to see the final settings TypeScript will use.

Frequently asked questions

Why is there no baseUrl in the file?
TypeScript deprecated baseUrl, moduleResolution node (node10) and the ES5 target in version 6.0, and TypeScript 7 no longer accepts them, so the tool leaves them out. The @/* alias option uses paths with a ./src/* target, which works without baseUrl.
Why does the file list "types" explicitly?
Newer TypeScript versions no longer load every @types package automatically; types defaults to an empty list. The Node.js presets list node, the Vite and React presets list vite/client, so the right global types are available. Add others, such as jest, yourself.
What does Extra strictness add?
Four checks on top of strict, noUncheckedIndexedAccess, noImplicitOverride, noFallthroughCasesInSwitch and exactOptionalPropertyTypes. They catch real bugs, but an existing codebase may show many new errors. Untick the box to start with plain strict.
Which preset should I pick for an Express or Fastify server?
Node.js app (NodeNext). It compiles src to dist with tsc and uses Node's own module rules, so in an ES module project relative imports need file extensions, such as ./db.js.
Why does the Next.js preset set noEmit?
Next.js compiles the code itself and only uses TypeScript for type checking. The preset also adds the next plugin and the include paths that Next.js expects.

How do we know nothing is uploaded? Test it yourself on the privacy proof page.

Written by the ToolsRift team · Last updated

Pages are drafted with AI assistance and checked by automated tests. How we write and check pages.

Was this tool useful?

Report a problem

Related tools

Start typing to search every tool.

↑ ↓ to moveEnter to openEsc to close