@draft0/tsconfig

Skip setup, start shipping.

⚠️ This package is in beta preview and its API is subject to change.

@draft0/tsconfig is part of Draft0, an opinionated, zero-configuration toolkit for modern TypeScript projects.

This package provides ready-to-use TypeScript tsconfig presets so you can use strict, modern defaults immediately and focus on your code.

Use it as an extends layer in your project tsconfig.json, then add your own include, exclude, aliases, and output-specific overrides.

Install

npm install -D @draft0/tsconfig typescript

Usage

// tsconfig.json
{
  "extends": "@draft0/tsconfig/tsc/dom/app",
  "compilerOptions": {
    "jsx": "react-jsx",
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"],
}

Pick a preset in 30 seconds

1) Choose runtime path

• TypeScript compiles your final JavaScript → use tsc/...
• A bundler or framework handles build output → use bundler/...

2) Choose environment

• DOM available (browser apps) → .../dom/...
• No DOM (Node, CLI, server runtime) → .../no-dom/...

3) Choose output type

• Application code → .../.../app
• Library code → .../.../lib

Examples

• Browser app using tsc: @draft0/tsconfig/tsc/dom/app
• Node service using tsc: @draft0/tsconfig/tsc/no-dom/app
• Browser app with bundler: @draft0/tsconfig/bundler/dom/app

Framework presets

If you use one of these frameworks, start from its dedicated preset and only add project-specific fields:

| Framework | Preset | | --------------------------------------------------------- | -------------------------------------------- | | Analog | @draft0/tsconfig/frameworks/analog | | Angular | @draft0/tsconfig/frameworks/angular | | Astro | @draft0/tsconfig/frameworks/astro | | Ember | @draft0/tsconfig/frameworks/ember | | Lit | @draft0/tsconfig/frameworks/lit | | NestJS | @draft0/tsconfig/frameworks/nestjs | | Next.js | @draft0/tsconfig/frameworks/nextjs | | Nuxt | @draft0/tsconfig/frameworks/nuxt | | Preact | @draft0/tsconfig/frameworks/preact | | Qwik | @draft0/tsconfig/frameworks/qwik | | React Native | @draft0/tsconfig/frameworks/react-native | | React Router (framework mode) | @draft0/tsconfig/frameworks/react-router | | Remix | @draft0/tsconfig/frameworks/remix | | Solid | @draft0/tsconfig/frameworks/solid | | Svelte | @draft0/tsconfig/frameworks/svelte | | SvelteKit | @draft0/tsconfig/frameworks/svelte-kit | | TanStack Start | @draft0/tsconfig/frameworks/tanstack-start | | Vue | @draft0/tsconfig/frameworks/vue |

Some frameworks also generate their own tsconfig (for example Nuxt and SvelteKit). In those cases, follow the framework’s docs for merge order so generated path aliases stay intact.

Examples

Add include and exclude yourself to fit your repo layout.

Next.js app

{
  "extends": "@draft0/tsconfig/frameworks/nextjs",
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"],
    },
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mts", ".next/types/**/*.ts"],
  "exclude": ["node_modules"],
}

NestJS API (src-based project)

{
  "extends": "@draft0/tsconfig/frameworks/nestjs",
  "compilerOptions": {
    "rootDir": "./src",
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"],
}

Vite-style frontend (no framework preset)

{
  "extends": "@draft0/tsconfig/bundler/dom/app",
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist"],
}

Draft0 Core only

All presets inherit from a strict Draft0 Core config (ES2025 target, strict mode, stronger module/type-checking defaults). If you only want those defaults, use:

{
  "extends": "@draft0/tsconfig/core",
}

Documentation

Full documentation: draft0.dev.