@rainstormy/presets-eslint-jsx

Generic JSX Preset for ESLint

This package provides a predefined, opinionated ESLint configuration intended to be used as a foundation for any web project that uses the JSX syntax for components such as Qwik.

🔥 CAUTION

• For a Next.js app, use @rainstormy/presets-eslint-next instead.
• For Preact components, use @rainstormy/presets-eslint-preact instead.
• For React components, use @rainstormy/presets-eslint-react instead.
• For Solid components, use @rainstormy/presets-eslint-solid instead.

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

• eslint-plugin-jsx-a11y (with rule names prefixed by jsx-a11y/)
• eslint-plugin-react (only for generic JSX rules, with rule names prefixed by react/)

Installation

Install the @rainstormy/presets-eslint-jsx package and its peer dependencies:

npm install --save-dev @rainstormy/presets-eslint-jsx @rainstormy/presets-eslint eslint typescript

pnpm install --save-dev @rainstormy/presets-eslint-jsx @rainstormy/presets-eslint eslint typescript

yarn add --dev @rainstormy/presets-eslint-jsx @rainstormy/presets-eslint eslint typescript

Usage

Create or extend a flat ESLint configuration file (eslint.config.js) and apply the eslintPresetJsx preset.

For example (with the default options in comments):

import { eslintPresets } from "@rainstormy/presets-eslint"
import { eslintPresetJsx } from "@rainstormy/presets-eslint-jsx"

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

In Combination with Qwik

Install eslint-plugin-qwik and use the spread syntax (...) to add a custom configuration object after the preset configuration object.

For example:

import {
	eslintPresetAmbientTypeScriptModules,
	eslintPresets,
} from "@rainstormy/presets-eslint"
import { eslintPresetJsx } from "@rainstormy/presets-eslint-jsx"
import qwikPlugin from "eslint-plugin-qwik"

export default [
	...eslintPresets({
		additionalPresets: [
			eslintPresetAmbientTypeScriptModules(),
			eslintPresetJsx(),
		],
	}),
	{
		files: ["**/*.@(jsx|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",
		},
	},
]