@oskartdragon/config NPM

@oskartdragon/config

Shareable ESLint and Prettier configurations for TypeScript, React, and testing projects

This package provides opinionated but flexible ESLint and Prettier configurations that automatically adapt to your project's dependencies.

Features

Smart Detection: Automatically enables rules based on your installed dependencies
TypeScript Support: Full TypeScript integration when detected
React Ready: React and React Hooks rules when React is installed
Testing Focused: Support for Vitest, Testing Library, Jest DOM, and Playwright
Modern Stack: TanStack Query and Router plugin support
Tailwind CSS: Prettier plugin for Tailwind class sorting

Installation

npm install --save-dev @oskartdragon/config

Usage

Prettier

Add to your package.json:

{
  "prettier": "@oskartdragon/config/prettier"
}

Or create a .prettierrc.js file:

import config from '@oskartdragon/config/prettier'

export default config

import defaultConfig from '@oskartdragon/config/prettier'

/** @type {import("prettier").Options} */
export default {
	...defaultConfig,
	// Your overrides here
	printWidth: 120,
}

ESLint

Create an eslint.config.js file:

import { config } from '@oskartdragon/config/eslint'

export default config

import { config } from '@oskartdragon/config/eslint'

export default [
	...config,
	{
		// Your custom rules here
		rules: {
			'no-console': 'warn',
		},
	},
]

What's Included

ESLint Rules

Base: Import sorting, no duplicates, warning comment detection
TypeScript: Unused vars, consistent imports, promise handling (when typescript detected)
React: JSX key warnings, hooks rules (when react detected)
Testing: Testing Library, Jest DOM, Vitest rules (when respective packages detected)
E2E: Playwright rules for e2e test files (when playwright detected)
TanStack: Query and Router specific rules (when respective packages detected)

Prettier Configuration

Tab indentation (2 spaces for package.json)
Single quotes, trailing commas
Line width: 80 characters
Tailwind CSS class sorting
Special MDX formatting rules

Automatic Detection

The configuration automatically detects and enables rules for:

typescript → TypeScript rules
react → React and React Hooks rules
@testing-library/dom → Testing Library rules
@testing-library/jest-dom → Jest DOM rules
vitest → Vitest-specific rules
playwright → Playwright rules
@tanstack/react-query → TanStack Query rules
@tanstack/react-router → TanStack Router rules

File Patterns

Test files: **/__tests__/**/*, **/*.test.*, **/*.spec.*, **/tests/**
E2E files: **/e2e/**
Ignored: node_modules, build, dist, coverage, public, .cache