ESLint Config Sylph - React (@sylphlab/eslint-config-sylph-react)

This package provides the ESLint Flat Config rules specifically tailored for SylphLab React and Next.js projects. It extends the foundational @sylphlab/eslint-config-sylph base configuration with specific rules for React best practices, JSX accessibility (A11y), and React Hooks conventions.

Core Philosophy & Design Principles

This configuration builds upon the base philosophy with a focus on robust React development:

• React Best Practices: Enforces rules from eslint-plugin-react to promote common patterns, prevent anti-patterns, and ensure consistency in component definition and JSX usage.
• Hooks Rules: Integrates eslint-plugin-react-hooks to enforce the Rules of Hooks (react-hooks/rules-of-hooks) and check for exhaustive dependencies (react-hooks/exhaustive-deps), preventing common bugs related to hook usage.
• JSX Accessibility (A11y): Includes eslint-plugin-jsx-a11y to catch potential accessibility issues directly within your JSX markup, promoting the development of inclusive web applications.
• Strictness & Consistency: Maintains the extreme strictness and focus on AI/human readability inherited from the base configuration.

Installation

Install this package and its peer dependencies. The easiest way is using install-peerdeps:

1# Using pnpm (recommended) - Installs this package, the base package, and all necessary plugins
2npx install-peerdeps --dev @sylphlab/eslint-config-sylph-react -p pnpm
3
4# --- OR ---
5
6# Manual Installation (if needed):
7# 1. Install this package and the base package
8pnpm add -D @sylphlab/eslint-config-sylph-react @sylphlab/eslint-config-sylph
9# 2. Install all peer dependencies listed in BOTH package.json files (react's and base's)
10pnpm add -D eslint typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unicorn prettier react

(Ensure you have eslint and typescript installed in your project as well.)

Usage

Import and include the configuration array in your eslint.config.js or eslint.config.ts. This package exports a combined array that includes the base configuration automatically.

1// eslint.config.ts
2import sylphReactConfig from '@sylphlab/eslint-config-sylph-react';
3// Optionally import base config if you need to layer rules specifically
4// import sylphBaseConfig from '@sylphlab/eslint-config-sylph';
5
6export default [
7  // Include the combined React config
8  ...sylphReactConfig,
9
10  // Your project-specific rules or overrides
11  {
12    files: ['**/*.ts', '**/*.tsx'], // Target specific files
13    languageOptions: {
14      parserOptions: {
15        project: './tsconfig.json', // Point to your project's tsconfig
16      },
17    },
18    rules: {
19      // Example: Allow console logs in specific files or globally
20      'no-console': 'warn',
21      // Example: Relax abbreviation rule for 'props'
22      'unicorn/prevent-abbreviations': ['error', { replacements: { props: false } }],
23      // Example: Next.js specific override (if not using Next.js plugin)
24      // 'react/react-in-jsx-scope': 'off',
25    },
26  },
27  {
28    // Example: Ignoring specific files/folders from linting
29    ignores: ['**/dist/**', '**/node_modules/**', '**/.next/**'],
30  },
31];

See the main monorepo README for more details on the overall philosophy and available configurations.