eslint.config.js

import js from '@eslint/js';
import globals from 'globals';
import tsEslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import prettier from 'eslint-plugin-prettier/recommended';

export default tsEslint.config(
  { ignores: ['dist', '**/.output/', '**/.wxt/'] },
  {
    // specify the formats on which to apply the rules below
    files: ['packages/**/*.{ts,tsx}'],
    // use predefined configs in installed eslint plugins
    extends: [
      // js
      js.configs.recommended,
      // ts
      ...tsEslint.configs.recommended,
      // react
      react.configs.flat.recommended,
      // a11y (accessibility
      jsxA11y.flatConfigs.recommended,
      // prettier
      prettier
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser
    },
    // specify used plugins
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh
    },
    settings: {
      // for eslint-plugin-react to auto detect react version
      react: {
        version: 'detect'
      }
    },
    rules: {
      // set of custom rules
      'react/react-in-jsx-scope': 'off'
    }
  }
);