@mdor/eslint-react-config

Shared ESLint flat configuration for React applications. It combines @mdor/eslint-config, @eslint-react/eslint-plugin, and eslint-plugin-react, and eslint-plugin-react-hooks.

Requirements

• Node.js 22.13 or newer
• npm 10 or newer
• ESLint 10.8 or newer within the 10.x release line (^10.8.0)

Installation

npm install --save-dev @mdor/eslint-react-config @mdor/eslint-config eslint typescript

@mdor/eslint-config, ESLint, and TypeScript are peer dependencies because the consuming repository owns their versions. The React plugins and React Hooks plugin are runtime dependencies of this package. npm 7 and newer installs compatible peers automatically; the explicit command above also works with package managers that do not.

If peer dependencies are not installed automatically, install the base preset's plugin peers too:

npm install --save-dev eslint-plugin-regexp eslint-plugin-sonarjs eslint-plugin-unicorn

Usage

// eslint.config.mjs
import eslintReactConfig from "@mdor/eslint-react-config";

export default eslintReactConfig;

The default export includes the base MDOR JavaScript rules, the recommended ESLint React rules, and the latest recommended React Hooks rules. The React and Hooks configurations are also available as the named exports reactConfig and reactHooksConfig for custom composition.

The configuration targets JavaScript and JSX. TypeScript projects should add a TypeScript ESLint parser configuration for TS and TSX files separately.

Use in another repository

For example, a standalone React application can use this structure:

my-react-app/
├── eslint.config.mjs
├── package.json
└── src/
    ├── App.jsx
    └── main.jsx

Add lint scripts to the application's package.json:

{
  "name": "my-react-app",
  "private": true,
  "type": "module",
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

Then add the shared preset at the repository root:

// eslint.config.mjs
import mdorReactConfig from "@mdor/eslint-react-config";

export default [
  ...mdorReactConfig,
  {
    files: ["src/**/*.{js,jsx}"],
    rules: {
      "@eslint-react/no-array-index-key": "error",
      "react-hooks/exhaustive-deps": "warn",
    },
  },
];

Run it from that application with:

npm run lint
npm run lint:fix

Test-file overrides

Place exceptions after the shared preset so they take precedence:

// eslint.config.mjs
import mdorReactConfig from "@mdor/eslint-react-config";

export default [
  ...mdorReactConfig,
  {
    files: ["src/**/*.test.{js,jsx}"],
    rules: {
      // custom overrides
    },
  },
];

Compose only the React layers

The default export already contains @mdor/eslint-config. When another repository loads the base preset separately, use the named React entries to avoid applying it twice:

// eslint.config.mjs
import mdorConfig from "@mdor/eslint-config";
import { reactConfig, reactHooksConfig } from "@mdor/eslint-react-config";

export default [
  ...mdorConfig,
  reactConfig,
  reactHooksConfig,
  {
    files: ["src/**/*.{js,jsx}"],
    rules: {
      "react-hooks/set-state-in-effect": "warn",
    },
  },
];

JavaScript and TypeScript in the same repository

This package configures .js, .mjs, .cjs, and .jsx. A repository with TSX files should add its TypeScript parser and rules as separate flat-config entries, then keep this preset for JavaScript and JSX:

// eslint.config.mjs
import mdorReactConfig from "@mdor/eslint-react-config";
import tseslint from "typescript-eslint";

export default [
  ...mdorReactConfig,
  ...tseslint.configs.recommended,
  {
    files: ["src/**/*.{ts,tsx}"],
    languageOptions: {
      parser: tseslint.parser,
    },
  },
];

The TypeScript example additionally requires:

npm install --save-dev typescript-eslint