@tiagoporto/eslint-config/eslint-configs/react.mjs

Shareable Config for ESlint.

import eslintReact from '@eslint-react/eslint-plugin'
import { importX } from 'eslint-plugin-import-x'
import reactHooks from 'eslint-plugin-react-hooks'
import tseslint from 'typescript-eslint'

import { testRules } from './javascript.mjs'
import { tsBaseConfig } from './typescript.mjs'

const react = {
  settings: {
    ...tsBaseConfig.settings,
  },
  languageOptions: {
    ...tsBaseConfig.languageOptions,
    ...importX.flatConfigs.react.languageOptions,
  },
  plugins: {
    ...tsBaseConfig.plugins,
    ...importX.flatConfigs.react.plugins,
    ...eslintReact.configs['recommended-typescript'].plugins,
    'react-hooks': reactHooks,
  },
  rules: {
    ...tsBaseConfig.rules,
    ...reactHooks.configs.recommended.rules,
    'unicorn/filename-case': [
      'error',
      {
        case: 'pascalCase',
      },
    ],
  },
}

/** @type {import('eslint').Linter.Config[]} */
export const reactConfig = [
  {
    name: 'tp/react',
    files: ['**/*.{jsx,tsx}'],
    ...react,
    rules: {
      ...react.rules,
      ...eslintReact.configs['recommended-typescript'].rules,
    },
  },
  {
    name: 'tp/react-test',
    files: ['**/*.{test,spec}.{jsx,tsx}'],
    rules: {
      ...testRules,
    },
  },
]

/** @type {import('eslint').Linter.Config[]} */
export const reactConfigTypeChecked = [
  {
    name: 'tp/react',
    files: ['**/*.{jsx,tsx}'],
    ...react,
    rules: {
      ...react.rules,
      ...tseslint.configs.recommendedTypeCheckedOnly[2].rules,
      ...tseslint.configs.stylisticTypeCheckedOnly[2].rules,
      ...eslintReact.configs['recommended-type-checked'].rules,
    },
  },
  {
    name: 'tp/react-test',
    files: ['**/*.{test,spec}.{jsx,tsx}'],
    rules: {
      ...testRules,
    },
  },
]