npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

ts-prettier-config

v0.0.8

Published

Shared TypeScript, ESLint, and Prettier configurations for Node.js and TypeScript projects

Readme

Absolutely. Based on the package structure and configuration options you've established, here's a complete README suitable for publishing ts-prettier-config to npm and GitHub.

ts-prettier-config

Shared TypeScript, ESLint, and Prettier configurations for Node.js, TypeScript libraries, and modern JavaScript/TypeScript projects.

The package provides reusable configuration presets so you can bootstrap a project without manually maintaining the same tsconfig, ESLint, and Prettier configuration across repositories.

Features

  • TypeScript configuration presets
  • Node.js configuration
  • Library configuration
  • Bundler configuration
  • React configuration
  • Next.js configuration
  • Strict TypeScript/ESLint configuration
  • Shared Prettier configuration
  • Optional import sorting with @trivago/prettier-plugin-sort-imports
  • Shared ESLint flat configurations
  • Automatic dependency installation through the CLI
  • Automatic package-script setup
  • Package-manager detection
  • npm, pnpm, yarn, and bun support
  • Safe configuration initialization
  • --force support for replacing existing configuration files

Installation

You can install the package globally or use it directly with npx.

npm

npm install -D ts-prettier-config

pnpm

pnpm add -D ts-prettier-config

yarn

yarn add -D ts-prettier-config

Bun

bun add -D ts-prettier-config

Or use the CLI without installing it permanently:

npx ts-config

With pnpm:

pnpm dlx ts-config

With Bun:

bunx ts-config

CLI

The package provides the following CLI:

ts-config

Available commands:

init
list
doctor

Initialize a project

The simplest option is:

npx ts-config init --all

This initializes:

  • TypeScript
  • Prettier
  • ESLint

The CLI also installs the required dependencies.

For example, depending on the configuration selected, it can install:

typescript
prettier
eslint
@eslint/js
typescript-eslint
eslint-config-prettier

The CLI automatically detects your package manager.

Supported package managers:

  • npm
  • pnpm
  • yarn
  • bun

Initialize TypeScript only

npx ts-config init typescript

This creates:

tsconfig.json

Initialize Prettier only

npx ts-config init prettier

This creates:

prettier.config.mjs
.prettierignore

Initialize ESLint only

npx ts-config init eslint

This creates:

eslint.config.js

Initialize everything

npx ts-config init --all

You can also specify a preset:

npx ts-config init --all --preset node

Configuration presets

The CLI provides presets for common project types.

Node.js

npx ts-config init --all --preset node

This selects:

TypeScript → node
ESLint     → node

Recommended for:

  • Node.js services
  • Fastify applications
  • Express applications
  • CLI applications
  • Backend services
  • Workers

Library

npx ts-config init --all --preset library

This selects:

TypeScript → library
ESLint     → library

Recommended for:

  • npm packages
  • shared libraries
  • SDKs
  • utility packages
  • internal packages

Strict ESLint

npx ts-config init eslint --preset strict

This enables the strict ESLint configuration.


TypeScript configurations

The package contains several TypeScript configurations.

tsconfig.base.json
tsconfig.node.json
tsconfig.library.json
tsconfig.bundler.json
tsconfig.next.json
tsconfig.react.json
tsconfig.react-library.json

You can use these directly through package exports.


Base TypeScript configuration

{
  "extends": "ts-prettier-config/tsconfig.json"
}

Or:

{
  "extends": "ts-prettier-config/tsconfig.base.json"
}

Use this as the foundation for custom configurations.


Node.js project

For a Node.js application:

{
  "extends": "ts-prettier-config/tsconfig.node.json"
}

Example project:

my-api/
├── src/
│   ├── config/
│   ├── controllers/
│   ├── services/
│   └── index.ts
├── package.json
└── tsconfig.json

tsconfig.json:

{
  "extends": "ts-prettier-config/tsconfig.node.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"]
}

Library project

For an npm package:

{
  "extends": "ts-prettier-config/tsconfig.library.json"
}

Example:

my-library/
├── src/
│   ├── index.ts
│   └── utils.ts
├── package.json
└── tsconfig.json

You can override package-specific options:

{
  "extends": "ts-prettier-config/tsconfig.library.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"]
}

Bundler project

For projects compiled by a bundler such as tsup, Vite, Rollup, or another build tool:

{
  "extends": "ts-prettier-config/tsconfig.bundler.json"
}

Example:

{
  "extends": "ts-prettier-config/tsconfig.bundler.json",
  "compilerOptions": {
    "noEmit": true
  },
  "include": ["src"]
}

This is useful when TypeScript is responsible primarily for type checking while the bundler handles JavaScript output.


React

For React projects:

{
  "extends": "ts-prettier-config/tsconfig.react.json"
}

Example:

{
  "extends": "ts-prettier-config/tsconfig.react.json",
  "compilerOptions": {
    "noEmit": true
  },
  "include": ["src"]
}

React library

For a reusable React component library:

{
  "extends": "ts-prettier-config/tsconfig.react-library.json"
}

Example:

{
  "extends": "ts-prettier-config/tsconfig.react-library.json",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src"]
}

Next.js

For a Next.js project:

{
  "extends": "ts-prettier-config/tsconfig.next.json"
}

You can still override project-specific settings:

{
  "extends": "ts-prettier-config/tsconfig.next.json",
  "compilerOptions": {
    "strict": true
  }
}

Extending and overriding configuration

The configurations are intentionally designed to be overridden.

For example:

{
  "extends": "ts-prettier-config/tsconfig.node.json",
  "compilerOptions": {
    "target": "ES2022",
    "outDir": "./dist",
    "rootDir": "./src",
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Your project's options take precedence over the shared configuration.


Prettier

Initialize Prettier:

npx ts-config init prettier

This creates:

prettier.config.mjs
.prettierignore

The shared configuration provides consistent formatting across projects.

Example:

/** @type {import('prettier').Config} */
export default {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,

  semi: true,
  singleQuote: true,
  jsxSingleQuote: false,
  quoteProps: 'as-needed',

  trailingComma: 'all',
  bracketSpacing: true,
  bracketSameLine: false,
  arrowParens: 'always',

  endOfLine: 'lf',
  embeddedLanguageFormatting: 'auto',
};

Prettier import sorting

Import sorting is optional.

Initialize it with:

npx ts-config init prettier --sort-imports

This installs:

prettier
@trivago/prettier-plugin-sort-imports

and creates the import-sorting configuration.

The import order is organized into groups such as:

React
↓
Node.js built-ins
↓
Third-party packages
↓
Internal aliases
↓
Side effects
↓
Parent imports
↓
Relative imports
↓
Styles

Example:

import React from 'react';

import fs from 'node:fs';
import path from 'node:path';

import axios from 'axios';
import { z } from 'zod';

import { logger } from '@/lib/logger';

import '../setup';

import { UserService } from '../../services/user.service';
import { User } from './user';

ESLint

Initialize ESLint:

npx ts-config init eslint

This creates:

eslint.config.js

The package uses ESLint's modern flat configuration format.

The available configurations include:

base
node
library
strict
prettier

ESLint + Prettier

For projects using both ESLint and Prettier:

npx ts-config init --all

The CLI installs:

eslint
@eslint/js
typescript-eslint
eslint-config-prettier
prettier

This keeps formatting concerns handled by Prettier while ESLint focuses primarily on code quality and correctness.


Package scripts

The CLI automatically adds missing scripts to your package.json.

For example:

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "lint": "eslint ."
  }
}

Existing scripts are not overwritten.


Force overwrite

By default, existing files are preserved.

For example:

npx ts-config init --all

If:

tsconfig.json
prettier.config.mjs
eslint.config.js

already exist, they will not be overwritten.

To overwrite them:

npx ts-config init --all --force

Use this carefully.


Doctor

Check your project's configuration:

npx ts-config doctor

Example:

Project:

name: my-api
package manager: pnpm

Configuration:

TypeScript:
✓ tsconfig.json

Prettier:
✓ prettier.config.mjs
✓ .prettierignore

ESLint:
✓ eslint.config.js

This is useful for quickly identifying missing configuration files.


List available configurations

npx ts-config list

Example:

Configurations:

typescript
prettier
eslint

Presets:

node
library
strict

Recommended setups

Node.js API

npx ts-config init --all --preset node

Result:

TypeScript
ESLint
Prettier

Recommended for:

  • Fastify
  • Express
  • Node.js services
  • Microservices
  • Background workers

npm library

npx ts-config init --all --preset library

Recommended for:

  • npm packages
  • SDKs
  • shared utilities
  • internal libraries

Frontend/React project

npx ts-config init typescript
npx ts-config init prettier
npx ts-config init eslint

Then extend the React configuration manually:

{
  "extends": "ts-prettier-config/tsconfig.react.json"
}

Monorepo example

The package can also be used in a monorepo.

Example:

my-monorepo/
├── apps/
│   ├── api/
│   │   └── tsconfig.json
│   └── web/
│       └── tsconfig.json
├── packages/
│   ├── shared/
│   │   └── tsconfig.json
│   └── ui/
│       └── tsconfig.json
├── package.json
└── tsconfig.json

Root configuration:

{
  "extends": "ts-prettier-config/tsconfig.base.json"
}

Individual packages can then extend the appropriate preset:

{
  "extends": "ts-prettier-config/tsconfig.library.json"
}

and applications can use:

{
  "extends": "ts-prettier-config/tsconfig.node.json"
}

Direct configuration imports

You don't have to use the CLI.

The configuration files are also exposed through package exports.

For example:

ts-prettier-config/tsconfig.json
ts-prettier-config/tsconfig.node.json
ts-prettier-config/tsconfig.library.json
ts-prettier-config/tsconfig.bundler.json
ts-prettier-config/tsconfig.next.json
ts-prettier-config/tsconfig.react.json
ts-prettier-config/tsconfig.react-library.json

Prettier:

ts-prettier-config/prettier
ts-prettier-config/prettier/sort-imports

ESLint:

ts-prettier-config/eslint
ts-prettier-config/eslint.js
ts-prettier-config/eslint.node.js
ts-prettier-config/eslint.library.js
ts-prettier-config/eslint.strict.js
ts-prettier-config/eslint.prettier.js

Why use this package?

Without a shared configuration package, every repository tends to contain slightly different versions of:

tsconfig.json
eslint.config.js
prettier.config.mjs
.prettierignore

Over time this causes:

  • inconsistent formatting
  • different TypeScript strictness
  • duplicated configuration
  • configuration drift
  • difficult upgrades
  • inconsistent linting rules

ts-prettier-config provides a single maintained source of truth while still allowing individual projects to override settings when necessary.


Configuration philosophy

The configurations follow these principles:

Strict by default

TypeScript configurations favor strict type checking and safer defaults.

Easy to override

Project-specific settings can be overridden through normal TypeScript extends behavior.

Modern module support

Configurations distinguish between:

  • Node.js
  • bundler-based projects
  • libraries
  • React
  • Next.js

rather than forcing a single module strategy on every project.

Minimal runtime coupling

The configurations themselves do not introduce runtime dependencies into your application.

Explicit optional tooling

Features such as import sorting are opt-in rather than forced on every project.


Development

Clone the repository:

git clone https://github.com/org-utils/app-ts-prettier-config.git
cd app-ts-prettier-config

Install dependencies:

npm install

Run tests:

npm test

Run type checking:

npm run typecheck

Run lint:

npm run lint

Format:

npm run format

Check formatting:

npm run format:check

Releases

This project uses Changesets for versioning and publishing.

Create a changeset:

npx changeset

Check pending changesets:

npx changeset status

The release workflow automatically handles versioning and npm publishing through GitHub Actions.


License

MIT © Anwar


Repository

GitHub:

https://github.com/org-utils/app-ts-prettier-config

npm

Package:

ts-prettier-config