npm package: @rainstormy/presets-eslint-react
Description: A predefined, opinionated ESLint configuration suitable for any web project with React components.
Author: Steffen Diswal
Latest version: 1.0.0-rc.0

# React Preset for ESLint

This package provides a predefined, opinionated [ESLint](https://eslint.org) configuration suitable for any [TypeScript](https://www.typescriptlang.org)-based web project with [React](https://react.dev) components.

<dl><dt><strong>🔥 CAUTION</strong></dt><dd>

For a Next.js app, use [@rainstormy/presets-eslint-next](https://github.com/rainstormy/presets-web/tree/main/packages/presets-eslint-next) instead.
</dd></dl>

This preset configures a subset of rules from the following plugins, which are installed along with the preset package:

* [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y#supported-rules) (with rule names prefixed by `jsx-a11y/`)
* [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react#list-of-supported-rules) (with rule names prefixed by `react/`)
* [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks#custom-configuration) (with rule names prefixed by `react-hooks/`)

Additionally, it includes the following preset:

* [@rainstormy/presets-eslint-jsx](https://github.com/rainstormy/presets-web/tree/main/packages/presets-eslint-jsx)

## Installation
Install the `@rainstormy/presets-eslint-react` package and its peer dependencies:

```shell
npm install --save-dev @rainstormy/presets-eslint-react @rainstormy/presets-eslint eslint typescript
```

```shell
pnpm install --save-dev @rainstormy/presets-eslint-react @rainstormy/presets-eslint eslint typescript
```

```shell
yarn add --dev @rainstormy/presets-eslint-react @rainstormy/presets-eslint eslint typescript
```

## Usage
Create or extend a [flat ESLint configuration file](https://eslint.org/docs/latest/use/configure/configuration-files-new) (`eslint.config.js`) and apply the `eslintPresetReact` preset.

For example (with the default options in comments):

```javascript
import { eslintPresets } from "@rainstormy/presets-eslint"
import { eslintPresetReact } from "@rainstormy/presets-eslint-react"

export default eslintPresets({
	additionalPresets: [
		// ...other presets...
		eslintPresetReact({
			// targetFilePatterns: ["**/*.@(jsx|tsx)"],
		}),
	],
})
```

### In Combination with Storybook, Tailwind CSS, and Testing Library
For example (with the default options applied):

```javascript
import {
	eslintPresetAmbientTypeScriptModules,
	eslintPresetTestData,
	eslintPresets,
} from "@rainstormy/presets-eslint"
import { eslintPresetReact } from "@rainstormy/presets-eslint-react"
import { eslintPresetStorybook } from "@rainstormy/presets-eslint-storybook"
import { eslintPresetTailwind } from "@rainstormy/presets-eslint-tailwind"
import { eslintPresetTestingLibrary } from "@rainstormy/presets-eslint-testing-library"
import { eslintPresetVitest } from "@rainstormy/presets-eslint-vitest"

export default eslintPresets({
	additionalPresets: [
		eslintPresetAmbientTypeScriptModules(),
		eslintPresetReact(),
		eslintPresetStorybook(),
		eslintPresetTailwind(),
		eslintPresetTestData(),
		eslintPresetTestingLibrary(),
		eslintPresetVitest(),
	],
})
```