Build TypeScript configuration with interactive compiler options, path aliases, and project references.
Generates a tsconfig.json from an interactive form: compiler options grouped by module, emit, strictness and interop; a paths table for import aliases; and a references list for project references, with the JSONC preview updating as each control changes. Its real value is not typing JSON, it is that option names and value lists come from TypeScript's option set, so you cannot emit a key tsc does not recognize. The common surprise: tsconfig.json is not strict JSON. Comments and trailing commas are legal, path aliases affect only type checking and never emitted imports, and an omitted key means the TypeScript default applies, not that the option is off.
A concrete input and expected output from the current implementation.
Input
Options chosen: target ES2022, module ESNext, moduleResolution Bundler, strict on, outDir dist, rootDir src, alias @/* -> src/*
Expected output
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"outDir": "dist",
"rootDir": "src",
"paths": {
"@/*": ["src/*"]
}
}
} Each selection maps to exactly one compilerOptions entry, so the output is fully determined by the choices: strict is a single boolean that turns on the whole strictness family, and paths resolves @/* to src/* relative to the config file (no baseUrl needed since TypeScript 4.1).
Every toggle corresponds to one key in compilerOptions, and the pickers only offer values TypeScript accepts in combination: moduleResolution "bundler" requires module "esnext" or "preserve", and module "node16"/"nodenext" pair with the matching resolution mode. The preview pane renders the accumulated JSONC so the final file is copy-paste ready, comments and all.
The paths table takes a prefix and its substitution (for example @/* and src/*) and emits a paths object; without a baseUrl entry, aliases resolve relative to the tsconfig's own directory, per TypeScript 4.1 behavior. The references section emits a top-level references array and reminds you that each referenced project needs composite: true in its own tsconfig and is rebuilt with tsc -b.
No, the config is doing its only job. paths is a type-level alias used by tsc and your editor; it never rewrites imports in emitted JavaScript. Point your bundler's alias config (or tsconfig-paths for Node) at the same mapping, and keep the two in sync, or the alias will work in the editor and fail at runtime.
Not since TypeScript 4.1. Without baseUrl, path aliases resolve relative to the folder containing tsconfig.json, which is usually what you want in a single-package project. Many older templates still emit baseUrl: '.', which is harmless but no longer necessary, so do not treat its absence as an error.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.