npm package: @rainstormy/preset-eslint-jsx
Description: A predefined, opinionated ESLint configuration intended to be used as a foundation for any web project that uses the JSX syntax for components.
Author: Steffen Diswal
Latest version: 1.0.0-alpha.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Generic JSX Preset for ESLint

This package provides a predefined, opinionated [ESLint](https://eslint.org) configuration intended to be used as a foundation for any web project that uses the JSX syntax for components such as [Qwik](https://qwik.builder.io).

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

The JSX preset is already included in the following presets:

* [@rainstormy/preset-eslint-preact](https://github.com/rainstormy/presets-web/tree/main/packages/preset-eslint-preact)
* [@rainstormy/preset-eslint-react](https://github.com/rainstormy/presets-web/tree/main/packages/preset-eslint-react)
* [@rainstormy/preset-eslint-solid](https://github.com/rainstormy/presets-web/tree/main/packages/preset-eslint-solid)
</dd></dl>

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

```shell
npm install --save-dev @rainstormy/preset-eslint-jsx eslint
```

```shell
pnpm install --save-dev @rainstormy/preset-eslint-jsx eslint
```

```shell
yarn add --dev @rainstormy/preset-eslint-jsx eslint
```

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) (only for generic JSX rules, with rule names prefixed by `react/`)

## Usage
Create or extend a [flat ESLint configuration file](https://eslint.org/docs/latest/use/configure/configuration-files-new) (`eslint.config.js`) to target JSX component files in TypeScript.
For example:

```javascript
import {
	eslintAmbientTypeScriptModules,
	eslintBase
} from "@rainstormy/preset-eslint-base"
import { eslintJsx } from "@rainstormy/preset-eslint-jsx"

export default [
	eslintBase({ files: ["**/*.+(js|ts|tsx)"] }),

	// `eslintAmbientTypeScriptModules` and `eslintJsx` must follow `eslintBase` to take effect.
	eslintAmbientTypeScriptModules({ files: ["**/*.d.ts"] }),
	eslintJsx({ files: ["**/*.tsx"] }),
]
```

<dl><dt><strong>💡 TIP: Configure Additional Framework-Specific Rules</strong></dt><dd>

You can install other relevant ESLint plugins and configure their rules accordingly.
For example:

```javascript
import {
	eslintAmbientTypeScriptModules,
	eslintBase
} from "@rainstormy/preset-eslint-base"
import { eslintJsx } from "@rainstormy/preset-eslint-jsx"
import qwikPlugin from "eslint-plugin-qwik"

export default [
	eslintBase({ files: ["**/*.+(js|ts|tsx)"] }),

	// `eslintAmbientTypeScriptModules`, `eslintJsx`, and custom configurations must follow `eslintBase` to take effect.
	eslintAmbientTypeScriptModules({ files: ["**/*.d.ts"] }),
	eslintJsx({ files: ["**/*.tsx"] }),
	{
		files: ["**/*.tsx"],
		plugins: {
			qwik: qwikPlugin,
		},
		rules: {
			"react/function-component-definition": "off",
			"react/jsx-key": "off",
			"react/jsx-no-script-url": "off",
			"qwik/jsx-img": "error",
			"qwik/jsx-key": "error",
			"qwik/jsx-no-script-url": "error",
			"qwik/loader-location": "error",
			"qwik/no-react-props": "error",
			"qwik/prefer-classlist": "error",
			"qwik/unused-server": "error",
			"qwik/use-method-usage": "error",
			"qwik/valid-lexical-scope": "error",
		},
	},
]
```
</dd></dl>

## Complementary Presets
* [@rainstormy/preset-eslint-storybook](https://github.com/rainstormy/presets-web/tree/main/packages/preset-eslint-storybook)
* [@rainstormy/preset-eslint-tailwind](https://github.com/rainstormy/presets-web/tree/main/packages/preset-eslint-tailwind)
* [@rainstormy/preset-eslint-testing-library](https://github.com/rainstormy/presets-web/tree/main/packages/preset-eslint-testing-library)