tsconfig.json Generator
Generate a valid TypeScript config from a few options.
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"dist"
]
}How the tsconfig generator works
This tool builds a valid tsconfig.json from a few choices: the JavaScript target, the
module system, the module resolution strategy, and a set of toggles like strict and
declaration. It writes the options you pick into a compilerOptions block, adds a few settings
every modern project wants (esModuleInterop, skipLibCheck, forceConsistentCasingInFileNames),
and includes src while excluding node_modules and dist.
It also checks for combinations that TypeScript does not accept. If you choose a NodeNext or
Node16 module, TypeScript requires the matching moduleResolution, so the generator corrects it
and tells you.
Worked example
Selecting a modern bundled app:
- Target
ES2022, ModuleESNext, Module resolutionBundler, strict on
produces:
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"exclude": ["node_modules", "dist"]
}If you switch the module to NodeNext, the generator changes moduleResolution to NodeNext as
well and shows a warning, because the two must match.
How to use it
- Pick Bundler resolution for app projects (Vite, esbuild, webpack), or NodeNext for Node libraries and scripts.
- Keep strict on unless you are migrating an old codebase gradually.
- Turn on declaration if you publish a library and need
.d.tstype files. - Set jsx to
react-jsxonly if you write JSX or TSX. - Use the Copy button and paste the result into your project root.
Limitations
This generates a solid baseline, not a full project setup. It does not configure paths, types, references for monorepos, or framework-specific options (an Astro or Next.js project layers more on top). Treat the output as a correct starting point and extend it for your build.
Frequently asked questions
Which moduleResolution should I pick?
For apps bundled by Vite, esbuild, or webpack, choose Bundler. For a Node library or script run directly by Node, choose NodeNext. If you select a NodeNext or Node16 module, the generator sets the matching resolution automatically, because TypeScript requires them to agree.
Why is strict on by default?
Strict mode turns on the full set of type-safety checks (noImplicitAny, strictNullChecks, and more). It catches real bugs at compile time and is the recommended default for new projects. You can turn it off, but most teams keep it on.
What does noUncheckedIndexedAccess do?
It makes indexed access (like arr[i] or obj[key]) include undefined in the type, so you handle the missing case. It is stricter than strict mode alone and pairs well with it. The generator warns if you enable it without strict.
Do I need the jsx option?
Only if your project uses JSX or TSX files. Choose react-jsx for the modern automatic runtime (React 17+ and Preact). Leave it as None for plain TypeScript with no JSX.
Is the output ready to use?
Yes. The result is a complete, valid tsconfig.json with esModuleInterop, skipLibCheck, and forceConsistentCasingInFileNames already set, plus sensible include and exclude paths. Copy it into your project root.