1.0.0-alpha.3 • Published 1 year ago
@rainstormy/preset-eslint-jsx v1.0.0-alpha.3
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.
The JSX preset is already included in the following presets:
Installation
Install the @rainstormy/preset-eslint-jsx
package and its peer dependencies:
npm install --save-dev @rainstormy/preset-eslint-jsx eslint
pnpm install --save-dev @rainstormy/preset-eslint-jsx eslint
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 (with rule names prefixed by
jsx-a11y/
) - eslint-plugin-react (only for generic JSX rules, with rule names prefixed by
react/
)
Usage
Create or extend a flat ESLint configuration file (eslint.config.js
) to target JSX component files in TypeScript.
For example:
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"] }),
]
You can install other relevant ESLint plugins and configure their rules accordingly. For example:
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",
},
},
]