tsconfig.json & JSON5

Add comments to your TypeScript configuration files. Yes, it's officially supported!

Good News: TypeScript natively supports comments and trailing commas in tsconfig.json! No plugins or setup needed - just add comments directly.

Comment Support in tsconfig.json

TypeScript uses a JSON parser called JSONC (JSON with Comments) for configuration files. This means you can use:

Supported

  • // single-line comments
  • /* */ multi-line comments
  • Trailing commas in arrays/objects

Not Supported

  • Unquoted keys - hard TS1327 error
  • Single-quoted strings - hard TS1327 error
  • Infinity/NaN - silently dropped

Note: TypeScript supports JSONC, not full JSON5. Quoting is the line it enforces: unquoted keys and single-quoted strings both fail with TS1327. Numbers are looser than you would expect - a hexadecimal value such as 0x10 is accepted and resolves to 16 - but do not rely on it, because other JSON5 numeric forms are dropped or coerced without a diagnostic. If you need real JSON5, see our JavaScript guide for parsing JSON5 in build scripts.

Commented tsconfig.json Examples

Basic Configuration

{ // TypeScript Compiler Options // See: https://www.typescriptlang.org/tsconfig "compilerOptions": { // Target ECMAScript version for output "target": "ES2022", // Module system to use "module": "NodeNext", "moduleResolution": "NodeNext", // Enable strict type checking "strict": true, // Output directory for compiled files "outDir": "./dist", // Generate declaration files (.d.ts) "declaration": true, // Skip type checking of declaration files // Speeds up compilation significantly "skipLibCheck": true, }, // Files to include in compilation "include": [ "src/**/*", ], // Files to exclude from compilation "exclude": [ "node_modules", "dist", "**/*.test.ts", // Exclude test files ], }

React/Vite Project

{ /* React + Vite TypeScript Configuration Optimized for modern browsers and fast HMR */ "compilerOptions": { // Modern ES features for Vite "target": "ES2020", "lib": ["ES2020", "DOM", "DOM.Iterable"], // Use ESM modules "module": "ESNext", "moduleResolution": "bundler", // React JSX transform (React 17+) "jsx": "react-jsx", // Enable all strict checks "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, // Allow importing JSON files "resolveJsonModule": true, // Ensure imports match the case on disk "forceConsistentCasingInFileNames": true, // Path aliases - match with vite.config.ts // No baseUrl: TypeScript 7 removed it, so paths are relative to this file "paths": { "@/*": ["./src/*"], // e.g., import { Button } from '@/components' }, }, "include": ["src"], }

Node.js Library

{ // Node.js Library Configuration // Outputs both ESM and CJS, with type declarations "compilerOptions": { // Target Node.js 24 LTS (Node 26 enters LTS on Oct 28, 2026) "target": "ES2024", "module": "NodeNext", "moduleResolution": "NodeNext", // Generate declaration files for consumers "declaration": true, "declarationMap": true, // Source maps for declarations // Output configuration "outDir": "./dist", "rootDir": "./src", // Strict type checking "strict": true, "exactOptionalPropertyTypes": true, "noUncheckedIndexedAccess": true, // Interop settings for mixed ESM/CJS projects "esModuleInterop": true, "allowSyntheticDefaultImports": true, // Skip type checking of node_modules "skipLibCheck": true, }, "include": ["src/**/*"], "exclude": ["**/*.test.ts", "**/*.spec.ts"], }

Common Options Explained

Here are the most commonly configured options with explanations of what they do.

strict

Enables all strict type-checking options. Recommended for all new projects.

"strict": true // Enables: strictNullChecks, strictFunctionTypes, etc.

target

The ECMAScript version to compile to. Use ES2024 for Node 24 (LTS, in maintenance since October 20, 2026) or ES2022 for Node 22. Node 26 enters active LTS on October 28, 2026. Node 18 and 20 are both past end-of-life. Drop to ES2020 for broader browser support.

"target": "ES2022" // Modern JavaScript features

module & moduleResolution

How modules are output and resolved. Use NodeNext for Node.js, ESNext/bundler for frontend.

// For Node.js "module": "NodeNext", "moduleResolution": "NodeNext", // For Vite/webpack "module": "ESNext", "moduleResolution": "bundler",

skipLibCheck

Skip type checking of declaration files. Significantly speeds up compilation.

"skipLibCheck": true // Much faster compilation

paths

Path aliases for cleaner imports. Must also be configured in your bundler. Write each target relative to the tsconfig file with a leading ./ and drop baseUrl: TypeScript 6.0 deprecated it and TypeScript 7.0 removed it, so a config that still sets it fails with error TS5102.

"paths": { "@/*": ["./src/*"], // import from '@/components' "@lib/*": ["./src/lib/*"], // import from '@lib/utils' }

Best Practices

Document Non-Obvious Settings

Don't comment obvious settings like "strict": true. Focus on why you made certain choices.

Use Trailing Commas

Add trailing commas to make diffs cleaner when adding new options.

Group Related Options

Use comments to create logical sections: strict checks, module settings, output settings, etc.

Link to Documentation

Include links to relevant TypeScript documentation for complex configurations.

Extend Base Configs

Use "extends" to inherit from recommended configs like @tsconfig/node24, or @tsconfig/node-lts to track whichever Node line is the active LTS.

{ "extends": "@tsconfig/node24/tsconfig.json", "compilerOptions": { // Your overrides here } }

Need More Help?

Check out our troubleshooting guide or explore other configuration topics.