ts-prettier-config
v0.0.8
Published
Shared TypeScript, ESLint, and Prettier configurations for Node.js and TypeScript projects
Maintainers
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, andbunsupport- Safe configuration initialization
--forcesupport for replacing existing configuration files
Installation
You can install the package globally or use it directly with npx.
npm
npm install -D ts-prettier-configpnpm
pnpm add -D ts-prettier-configyarn
yarn add -D ts-prettier-configBun
bun add -D ts-prettier-configOr use the CLI without installing it permanently:
npx ts-configWith pnpm:
pnpm dlx ts-configWith Bun:
bunx ts-configCLI
The package provides the following CLI:
ts-configAvailable commands:
init
list
doctorInitialize a project
The simplest option is:
npx ts-config init --allThis 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-prettierThe CLI automatically detects your package manager.
Supported package managers:
- npm
- pnpm
- yarn
- bun
Initialize TypeScript only
npx ts-config init typescriptThis creates:
tsconfig.jsonInitialize Prettier only
npx ts-config init prettierThis creates:
prettier.config.mjs
.prettierignoreInitialize ESLint only
npx ts-config init eslintThis creates:
eslint.config.jsInitialize everything
npx ts-config init --allYou can also specify a preset:
npx ts-config init --all --preset nodeConfiguration presets
The CLI provides presets for common project types.
Node.js
npx ts-config init --all --preset nodeThis selects:
TypeScript → node
ESLint → nodeRecommended for:
- Node.js services
- Fastify applications
- Express applications
- CLI applications
- Backend services
- Workers
Library
npx ts-config init --all --preset libraryThis selects:
TypeScript → library
ESLint → libraryRecommended for:
- npm packages
- shared libraries
- SDKs
- utility packages
- internal packages
Strict ESLint
npx ts-config init eslint --preset strictThis 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.jsonYou 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.jsontsconfig.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.jsonYou 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 prettierThis creates:
prettier.config.mjs
.prettierignoreThe 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-importsThis installs:
prettier
@trivago/prettier-plugin-sort-importsand 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
↓
StylesExample:
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 eslintThis creates:
eslint.config.jsThe package uses ESLint's modern flat configuration format.
The available configurations include:
base
node
library
strict
prettierESLint + Prettier
For projects using both ESLint and Prettier:
npx ts-config init --allThe CLI installs:
eslint
@eslint/js
typescript-eslint
eslint-config-prettier
prettierThis 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 --allIf:
tsconfig.json
prettier.config.mjs
eslint.config.jsalready exist, they will not be overwritten.
To overwrite them:
npx ts-config init --all --forceUse this carefully.
Doctor
Check your project's configuration:
npx ts-config doctorExample:
Project:
name: my-api
package manager: pnpm
Configuration:
TypeScript:
✓ tsconfig.json
Prettier:
✓ prettier.config.mjs
✓ .prettierignore
ESLint:
✓ eslint.config.jsThis is useful for quickly identifying missing configuration files.
List available configurations
npx ts-config listExample:
Configurations:
typescript
prettier
eslint
Presets:
node
library
strictRecommended setups
Node.js API
npx ts-config init --all --preset nodeResult:
TypeScript
ESLint
PrettierRecommended for:
- Fastify
- Express
- Node.js services
- Microservices
- Background workers
npm library
npx ts-config init --all --preset libraryRecommended 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 eslintThen 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.jsonRoot 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.jsonPrettier:
ts-prettier-config/prettier
ts-prettier-config/prettier/sort-importsESLint:
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.jsWhy 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
.prettierignoreOver 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-configInstall dependencies:
npm installRun tests:
npm testRun type checking:
npm run typecheckRun lint:
npm run lintFormat:
npm run formatCheck formatting:
npm run format:checkReleases
This project uses Changesets for versioning and publishing.
Create a changeset:
npx changesetCheck pending changesets:
npx changeset statusThe 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