@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

Accessibility (a11y)

// 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

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

License

MIT