React 19 ESlint and Prettier Config

.prettierrc

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "jsxSingleQuote": false,
  "bracketSameLine": false,
  "endOfLine": "lf",
  "plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-packagejson"
  ],
  "importOrder": [
    "^react",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@/components/(.*)$",
    "^@/hooks/(.*)$",
    "",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import reactCompiler from 'eslint-plugin-react-compiler';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
import unicorn from 'eslint-plugin-unicorn';
import eslintConfigPrettier from 'eslint-config-prettier';

/** @type {import('eslint').Linter.Config[]} */
export default [
  // 1. Base JS recommended
  js.configs.recommended,

  // 2. TypeScript recommended (must spread because it's an array)
  ...tseslint.configs.recommended,

  unicorn.configs['recommended'],

  // 3. Your custom rules and plugin settings
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-compiler': reactCompiler,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      // React 19 Compiler rules
      'react-compiler/react-compiler': 'error',

      // Standard React Hooks rules
      ...reactHooks.configs.recommended.rules,
      // Refresh & Logic
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
      'unicorn/prevent-abbreviations': 'off', 
      'unicorn/filename-case': 'off', 

      'padding-line-between-statements': [
        'error',
        { "blankLine": "always", "prev": "*", "next": "return" },
        { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
        { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] }
      ],

      // TypeScript specific rules
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          vars: 'all',
          args: 'after-used',
          ignoreRestSiblings: true,
          varsIgnorePattern: '^_',
          argsIgnorePattern: '^_',
          caughtErrorsIgnorePattern: '^_'
        }
      ],
    },
  },

  // 4. Global ignores (must be in its own object)
  { ignores: ['dist'] },

  // 5. Prettier (Must always be last)
  eslintConfigPrettier,
];