diff --git a/README.md b/README.md index 7add8d9..2c8cbc3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,25 @@ # @lilith/eslint-config-react -ESLint configuration for React applications with TypeScript and accessibility support. +**Base** ESLint configuration for React code with TypeScript and accessibility support. + +## Architecture + +``` +@lilith/eslint-config-react ← BASE (this package) + ↓ ↓ + react-app react-lib + (applications) (libraries) +``` + +## Which Config Should I Use? + +| Building... | Use | Why | +|------------|-----|-----| +| Standalone React app | `@lilith/eslint-config-react-app` | Adds `@/` import alias enforcement | +| React library/package | `@lilith/eslint-config-react-lib` | Stricter rules, no aliases | +| Custom setup | `@lilith/eslint-config-react` | Base only, add your own rules | + +**Most projects should use `react-app` or `react-lib`, not this base config directly.** ## Features @@ -8,6 +27,7 @@ ESLint configuration for React applications with TypeScript and accessibility su - React Hooks rules (`eslint-plugin-react-hooks`) - JSX accessibility rules (`eslint-plugin-jsx-a11y`) - React best practices (`eslint-plugin-react`) +- React 18+ JSX transform support - TypeScript JSX support ## Installation @@ -31,7 +51,9 @@ pnpm add -D \ @lilith/eslint-config-base ``` -## Usage +## Direct Usage (Advanced) + +Only use directly if you need custom alias handling: ```javascript // .eslintrc.cjs @@ -40,17 +62,11 @@ module.exports = { parserOptions: { project: './tsconfig.json', }, + // Add your own import rules here }; ``` -Or use directly: - -```javascript -// .eslintrc.cjs -module.exports = require('@lilith/eslint-config-react'); -``` - -## React-Specific Rules +## What's Included ### React Hooks @@ -80,26 +96,21 @@ useEffect(() => { ### React Best Practices - No array index as key -- No direct state mutation +- Self-closing components - Consistent component patterns -- PropTypes/TypeScript for type checking +- Arrow function components -## Recommended tsconfig.json +## What's NOT Included -```json -{ - "extends": "@lilith/configs/typescript/react", - "compilerOptions": { - "jsx": "react-jsx" - } -} -``` +- **Import alias rules** (`@/` enforcement) - Use `react-app` for this +- **Library strictness** (no-console, explicit types) - Use `react-lib` for this ## Related Packages +- `@lilith/eslint-config-react-app` - For applications (adds aliases) +- `@lilith/eslint-config-react-lib` - For libraries (stricter rules) - `@lilith/eslint-config-base` - Base configuration - `@lilith/eslint-config-nestjs` - NestJS configuration -- `@lilith/configs` - Unified configuration package ## License diff --git a/index.js b/index.js index 49f1a00..3fb22ee 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,16 @@ /** - * @eslint/config-react - * ESLint configuration for React applications - * Extends @eslint/config-base with React-specific rules + * @lilith/eslint-config-react + * + * BASE ESLint configuration for React code. + * Extends @lilith/eslint-config-base with React-specific rules. + * + * This is the foundation config - it does NOT include import alias rules. + * For specific use cases, extend one of: + * + * - @lilith/eslint-config-react-app → For applications (adds @/ alias enforcement) + * - @lilith/eslint-config-react-lib → For libraries (stricter rules, no aliases) + * + * Direct usage is discouraged - prefer the specialized configs. */ module.exports = { diff --git a/package.json b/package.json index dbe9b3e..e4d8028 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "prepare": "git config core.hooksPath .githooks" }, "name": "@lilith/eslint-config-react", - "version": "1.1.1", - "description": "ESLint configuration for React applications", + "version": "1.2.0", + "description": "Base ESLint configuration for React (use react-app or react-lib for specific use cases)", "main": "index.js", "keywords": [ "eslint",