@lilith/eslint-config-react

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

Extends @lilith/eslint-config-base
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

pnpm add -D @lilith/eslint-config-react

Peer Dependencies

pnpm add -D \
  eslint \
  typescript \
  @typescript-eslint/parser \
  @typescript-eslint/eslint-plugin \
  eslint-plugin-import \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-jsx-a11y \
  @lilith/eslint-config-base

Direct Usage (Advanced)

Only use directly if you need custom alias handling:

// .eslintrc.cjs
module.exports = {
  extends: ['@lilith/eslint-config-react'],
  parserOptions: {
    project: './tsconfig.json',
  },
  // Add your own import rules here
};

What's Included

React Hooks

// Enforced: exhaustive-deps
useEffect(() => {
  doSomething(value);
}, [value]); // Must include all dependencies

// Enforced: rules-of-hooks
// Hooks only at top level of components/hooks

// Enforced: alt text for images
<img src="photo.jpg" alt="Description" />

// Enforced: interactive elements keyboard accessible
<button onClick={handleClick}>Click me</button>

// Enforced: valid ARIA attributes
<div role="button" aria-pressed="false">Toggle</div>

React Best Practices

No array index as key
Self-closing components
Consistent component patterns
Arrow function components

What's NOT Included

Import alias rules (@/ enforcement) - Use react-app for this
Library strictness (no-console, explicit types) - Use react-lib for this

@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

License

MIT

2.7 KiB Raw Permalink Blame History