@ariestools/eslint-config-react-flat

@ariestools/eslint-config-react-flat

ESLint Config used throughout XY Labs TypeScript/JavaScript libraries and react projects

Install

Using npm:

npm install -D {{name}}

Using yarn:

yarn add -D {{name}}

Using pnpm:

pnpm add -D {{name}}

Using bun:

bun add -D {{name}}

Usage

Use this config in your eslint.config.ts:

import {
  configReactStorybook,
  recommendedConfig,
} from '@ariestools/eslint-config-react-flat'

const xylabsConfig = recommendedConfig({ tier: 3, isTypeChecked: true })

export default [
  ...xylabsConfig,
  ...configReactStorybook,
]

recommendedConfig accepts tier (0–4, default 3) and isTypeChecked (default true). Named configReactTier* exports remain available but are deprecated.

Tiered presets

React layers are added at tier 2 (best practices) and above. Lower tiers match @ariestools/eslint-config-flat without React rules.

Export	Description
configReactTier0Correctness / configReactTier0CorrectnessTypeChecked	Base tier 0 only
configReactTier1Consistency / configReactTier1ConsistencyTypeChecked	Base tier 1 only
configReactTier2BestPractices / configReactTier2BestPracticesTypeChecked	Base + React
configReactTier3OpinionatedTypeChecked	SonarJS + optional rules at error severity; preferred default
configReactTier4Experimental / configReactTier4ExperimentalTypeChecked	Opinionated + newly introduced unicorn rules as warnings

config is deprecated. Use configReactTier3OpinionatedTypeChecked instead, and add configReactStorybook explicitly if needed.

Extending with custom rules

import { configReactTier3OpinionatedTypeChecked } from '@ariestools/eslint-config-react-flat'

const eslintConfig = [
  ...configReactTier3OpinionatedTypeChecked,
  {
    rules: {
      // your overrides
    },
  },
]

export default eslintConfig

What's included

Everything from @ariestools/eslint-config-flat, plus:

• React component and hooks linting via eslint-plugin-react-x
• DOM API validation via eslint-plugin-react-dom
• Enhanced hooks rules via eslint-plugin-react-hooks-extra
• Naming convention enforcement via eslint-plugin-react-naming-convention
• React Refresh validation via eslint-plugin-react-refresh
• Web API best practices via eslint-plugin-react-web-api

License

See the LICENSE file for license rights and limitations (LGPL-3.0-only).

Credits

Made with 🔥 and ❄️ by XY Labs