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
- Single-quoted strings
- Hexadecimal numbers
- Infinity/NaN
Note: TypeScript supports JSONC, not full JSON5. If you need features like unquoted keys, 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 "baseUrl": ".", "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": { // Support Node.js 18+ "target": "ES2022", "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 ES2022 for Node 18+, 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.
"baseUrl": ".", "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/node18.
{ "extends": "@tsconfig/node18/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.