Skip to main content

​
Overview

@zayne-labs/tsconfig provides battle-tested TypeScript configuration presets for various project types. Inspired by Matt Pocock’s TSConfig Cheat Sheet, these presets ensure proper compiler settings for your specific use case.

​
Installation

pnpm add -D @zayne-labs/tsconfig

​
Choosing the Right Config

The first step is determining which configuration preset fits your project. Answer these questions:
1

Are you using tsc to compile TypeScript?

If yes, choose from the tsc presets.If no, you’re probably using a bundler (Vite, webpack, esbuild, etc.) - choose from the bundler presets.
2

Does your code run in the DOM?

If yes, choose a dom preset (includes browser APIs).If no, choose a no-dom preset (for Node.js, CLI tools, etc.).
3

What type of project are you building?

  • App: Application or website
  • Library: Reusable package for npm
  • Library (Monorepo): Library within a monorepo structure

​
Using TypeScript Compiler (tsc)

If you’re using tsc to turn your .ts files into .js files, use these presets:
For code that runs in the browser:
{
  "extends": "@zayne-labs/tsconfig/tsc/dom/app"
}

​
Using a Bundler

If you’re using an external bundler (Vite, webpack, esbuild, Rollup, etc.), use these presets:
For code that runs in the browser:
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/app"
}

​
Framework-Specific Configs

Some frameworks have specific TypeScript configuration requirements:

​
Next.js

For Next.js projects:
tsconfig.json
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/next"
}
More framework-specific configs will be added as needed.

​
Customizing Your Config

You can extend the base config with your own compiler options:
tsconfig.json
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/app",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

​
Common Use Cases

tsconfig.json
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/app",
  "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}
tsconfig.json
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/next",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ]
}
tsconfig.json
{
  "extends": "@zayne-labs/tsconfig/tsc/no-dom/app",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}
tsconfig.json
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/library",
  "compilerOptions": {
    "outDir": "./dist",
    "declarationDir": "./dist/types",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}
tsconfig.json
{
  "extends": "@zayne-labs/tsconfig/bundler/no-dom/library-monorepo",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src",
    "composite": true
  },
  "include": ["src/**/*"]
}

​
Multiple TSConfig Files

For complex projects, you might need multiple TypeScript configs:
tsconfig.json (main app):
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/app",
  "include": ["src"]
}
tsconfig.node.json (build scripts):
{
  "extends": "@zayne-labs/tsconfig/bundler/no-dom/app",
  "include": ["scripts", "vite.config.ts"]
}

​
Decision Tree

Use this flowchart to quickly find the right preset:

​
Best Practices

Always extend a preset: Don’t start from scratch. The presets include carefully chosen defaults that work well together.
Don’t override strict settings: The presets use strict compiler options for better type safety. Avoid loosening these unless absolutely necessary.
tsconfig.json
{
  "extends": "@zayne-labs/tsconfig/bundler/dom/app",
  "compilerOptions": {
    // Path aliases for cleaner imports
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  },
  // Include only your source files
  "include": ["src/**/*"],
  // Exclude build outputs and dependencies
  "exclude": ["node_modules", "dist", "build"]
}

​
Troubleshooting

Make sure your moduleResolution is set correctly:
{
  "compilerOptions": {
    "moduleResolution": "bundler" // or "node" for Node.js
  }
}
Install the necessary type packages:
pnpm add -D @types/node @types/react # etc.
Ensure your bundler is configured to handle path aliases:Vite:
vite.config.ts
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

​
Next Steps

ESLint Setup

Configure ESLint with TypeScript support

Prettier Setup

Set up Prettier for consistent formatting

Build docs developers (and LLMs) love

Get started for freeTalk to us