tsconfig.json &
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
TS1327error - Single-quoted strings - hard
TS1327error - Infinity/NaN - silently dropped
Note: TypeScript supports JSONC, not full JSON6. 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 JSON6 numeric forms are dropped or coerced without a diagnostic. If you need real JSON6, see our JavaScript guide for parsing JSON6 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 featuresmodule & 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 compilationpaths
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 } }Ready-to-Use Templates
Copy these templates as starting points for different project types.
Need More Help?
Check out our troubleshooting guide or explore other configuration topics.