Lumirelle's TypeScript Config

[!Caution]

Since 0.1.0, this package only supports TypeScript 6.0 and above, if you are using older versions of TypeScript, please use 0.0.x versions.

Lumirelle's opinionated TypeScript config.

Motivation

The tsconfig.json is the configuration file for TypeScript compilers (tsc, tsgo, tsdown, bunup, ... All of the compilers / build tools who respect the tsconfig.json file). It's used to tell the compiler what files should be included, and how they should be processed.

In modern TypeScript projects, we often use tsconfig.json files to:

1. IDE LSP (Language Server Protocol) support, powered by IDE plugin with tsserver (TypeScript language server);
2. Compiler configuration, for example, this project uses bunup as the compiler / build tool, who respects the tsconfig.json file, and will change its behavior based on the config;
3. Type aware linting, for example, some ESLint or OxLint rules require type information, how the generator of type information is configured is also based on the tsconfig.json file;
4. Type aware checking, for example, for library projects, we may use tsc --noEmit to check the type correctness; for Vue application projects, we may use vue-tsc --noEmit to do this.

In order to get better DX and UX, we need to have a good tsconfig.json config, use better types to build libaries / applications with better quality.

Configuration

@lumirelle/tsconfig/ts

For JavaScript / TypeScript files.

@lumirelle/tsconfig/vue

For Vue files.

Specially, this config limits the language level to ES2022.

Usage

1. Install the package:

   # @antfu/ni
   ni -D @lumirelle/tsconfig
   # Bun
   bun add -D @lumirelle/tsconfig
   # npm
   npm install -D @lumirelle/tsconfig
   # ...

2. Extend the config in your tsconfig.json:

   For library projects:

   {
     "extends": "@lumirelle/tsconfig/lib",
     "compilerOptions": {
       // Only include types you need, if you are using Node.js, please replace "bun" with "node".
       "types": ["bun"],
       // Enable isolated declarations to speed up type checking & generation
       "declaration": true,
       "isolatedDeclarations": true
     },
     // Only include your project's source files and their tests, not the config files, e.g. `vite.config.ts`.
     "include": ["src/**/*", "test/**/*"],
     "exclude": ["test/fixture/**/*"]
   }

   For Vue application projects:

   {
     "extends": "@lumirelle/tsconfig/vue",
     "compilerOptions": {
       // Please adjust the path aliases to match your bundler's configuration.
       "paths": {
         "~": ["./"],
         "~/*": ["./*"]
       },
       // Only include types you need, if you are using Vite, you can leave below as is, otherwise, please replace "vite/client" with the types you need.
       "types": ["vite/client"]
     },
     // Only include your project's source files and their tests, not the config files, e.g. `knip.config.ts`.
     // `vite.config.ts` is required for provide vite client types, you can remove it if you are not using Vite.
     "include": ["*.d.ts", "vite.config.ts", "src/**/*"]
   }

Examples

You can find example projects using this config in the example directory.

Or see the real-world usage:

• TypeScript library project: lumirelle/starter-ts
• TypeScript monorepo library project: lumirelle/starship-butler & lumirelle/starter-monorepo
• Vue application project: lumirelle/lumirelle.me

Sponsors

License

MIT License © Lumirelle