@rainstormy/presets-eslint-preact v1.0.0-rc.0

Preact Preset for ESLint

This package provides a predefined, opinionated ESLint configuration suitable for any TypeScript-based web project with Preact components.

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 (with rule names prefixed by react/)
• eslint-plugin-react-hooks (with rule names prefixed by react-hooks/)

Additionally, it includes the following presets:

• @rainstormy/presets-eslint-jsx
• @rainstormy/presets-eslint-react

Installation

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

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

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

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

Usage

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

For example (with the default options in comments):

import { eslintPresets } from "@rainstormy/presets-eslint"
import { eslintPresetPreact } from "@rainstormy/presets-eslint-preact"

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

In Combination with Storybook, Tailwind CSS, and Testing Library

For example (with the default options applied):

import {
	eslintPresetAmbientTypeScriptModules,
	eslintPresetTestData,
	eslintPresets,
} from "@rainstormy/presets-eslint"
import { eslintPresetPreact } from "@rainstormy/presets-eslint-preact"
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(),
		eslintPresetPreact(),
		eslintPresetStorybook(),
		eslintPresetTailwind(),
		eslintPresetTestData(),
		eslintPresetTestingLibrary(),
		eslintPresetVitest(),
	],
})