Advanced Configuration (WIP)
⚠️
This page contains experimental features that still under development. The content may change without notice.
Examples
eslint.config.js
import const react: {
readonly meta: {
readonly name: string;
readonly version: string;
};
readonly configs: {
readonly core: {
readonly plugins: {
readonly "@eslint-react": {
meta: {
name: string;
version: string;
};
rules: {
"avoid-shorthand-boolean": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandBoolean", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"avoid-shorthand-fragment": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandFragment", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"ensure-forward-ref-using-ref": _typescript_eslint_utils_ts_eslint.RuleModule<"ensureForwardRefUsingRef", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-access-state-in-setstate": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-array-index-key": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-count": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-for-each": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-map": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-only": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-prop": _typescript_eslint_utils_ts_eslint ...
react from "@eslint-react/eslint-plugin";
export default [
// ...
{
files: string[]
files: ["**/*.{ts,tsx}"],
...const react: {
readonly meta: {
readonly name: string;
readonly version: string;
};
readonly configs: {
readonly core: {
readonly plugins: {
readonly "@eslint-react": {
meta: {
name: string;
version: string;
};
rules: {
"avoid-shorthand-boolean": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandBoolean", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"avoid-shorthand-fragment": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandFragment", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"ensure-forward-ref-using-ref": _typescript_eslint_utils_ts_eslint.RuleModule<"ensureForwardRefUsingRef", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-access-state-in-setstate": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-array-index-key": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-count": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-for-each": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-map": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-only": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-prop": _typescript_eslint_utils_ts_eslint ...
react.configs: {
readonly core: {
readonly plugins: {
readonly "@eslint-react": {
meta: {
name: string;
version: string;
};
rules: {
"avoid-shorthand-boolean": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandBoolean", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"avoid-shorthand-fragment": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandFragment", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"ensure-forward-ref-using-ref": _typescript_eslint_utils_ts_eslint.RuleModule<"ensureForwardRefUsingRef", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-access-state-in-setstate": _typescript_eslint_utils_ts_eslint.RuleModule<"noAccessStateInSetstate", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-array-index-key": _typescript_eslint_utils_ts_eslint.RuleModule<"noArrayIndexKey", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-children-count": _typescript_eslint_utils_ts_eslint.RuleModule<"noChildrenCount", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-children-for-each": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-map": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-only": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-prop" ...
configs.recommended: {
readonly plugins: {
readonly "@eslint-react": {
meta: {
name: string;
version: string;
};
rules: {
"avoid-shorthand-boolean": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandBoolean", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"avoid-shorthand-fragment": _typescript_eslint_utils_ts_eslint.RuleModule<"avoidShorthandFragment", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"ensure-forward-ref-using-ref": _typescript_eslint_utils_ts_eslint.RuleModule<"ensureForwardRefUsingRef", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-access-state-in-setstate": _typescript_eslint_utils_ts_eslint.RuleModule<"noAccessStateInSetstate", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-array-index-key": _typescript_eslint_utils_ts_eslint.RuleModule<"noArrayIndexKey", [], unknown, _typescript_eslint_utils_ts_eslint.RuleListener>;
"no-children-count": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-for-each": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-map": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-only": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-prop": _typescript_eslint_utils_ts_eslint.RuleModule<...>;
"no-children-to-array": _typescript_eslint_utils_ts_eslint.RuleModule< ...
recommended,
settings: {
"react-x": {
importSource: string;
jsxPragma: string;
jsxPragmaFrag: string;
additionalHooks: {
useLayoutEffect: string[];
};
additionalComponents: ({
name: string;
attributes: {
name: string;
as: string;
}[];
} | {
...;
} | {
...;
})[];
version: string;
};
}
settings: {
"react-x": {
importSource: string
importSource: "react",
jsxPragma: string
jsxPragma: "createElement",
jsxPragmaFrag: string
jsxPragmaFrag: "Fragment",
additionalHooks: {
useLayoutEffect: string[];
}
additionalHooks: {
useLayoutEffect: string[]
useLayoutEffect: ["useIsomorphicLayoutEffect"],
},
additionalComponents: ({
name: string;
attributes: {
name: string;
as: string;
}[];
} | {
name: string;
selector: string;
as: string;
attributes: {
name: string;
defaultValue: string;
}[];
} | {
name: string;
selector: string;
as: string;
attributes: ({
...;
} | {
...;
})[];
})[]
additionalComponents: [
{
// Match all components with `html` attribute and alias it to `dangerouslySetInnerHTML`
name: string
name: "*",
attributes: {
name: string;
as: string;
}[]
attributes: [
{ name: string
name: "html", as: string
as: "dangerouslySetInnerHTML" },
],
},
{
// Match all components with `component="button"` attribute and alias it to `button` component with `type="button"` attribute
name: string
name: "*",
selector: string
selector: ":has(JSXAttribute[name.name='component'][value.value='button'])",
as: string
as: "button",
attributes: {
name: string;
defaultValue: string;
}[]
attributes: [
{ name: string
name: "type", defaultValue: string
defaultValue: "button" },
],
},
{
// Match Button component with `component="a"` attribute and alias it to `a` component with `rel="noopener noreferrer"` attribute
name: string
name: "Button",
selector: string
selector: ":has(JSXAttribute[name.name='component'][value.value='a'])",
as: string
as: "a",
attributes: {
name: string;
defaultValue: string;
}[]
attributes: [
{ name: string
name: "rel", defaultValue: string
defaultValue: "noopener noreferrer" },
],
},
{
// Match MUIButton component with a `href` or `to` attribute and alias it to `a` component with `rel="noopener noreferrer"` attribute
name: string
name: "MUIButton",
selector: string
selector: ":matches(:has(JSXAttribute[name.name='href']), :has(JSXAttribute[name.name='to']))",
as: string
as: "a",
attributes: {
name: string;
defaultValue: string;
}[]
attributes: [
{ name: string
name: "rel", defaultValue: string
defaultValue: "noopener noreferrer" },
],
},
{
// Match TextInput component with `mode="uncontrolled"` attribute and alias it to an uncontrolled input component with `content` and `onContentUpdate` pair
name: string
name: "TextInput",
selector: string
selector: ":has(JSXAttribute[name.name='mode'][value.value='uncontrolled'])",
as: string
as: "input",
attributes: ({
name: string;
as: string;
controlled: boolean;
} | {
name: string;
as: string;
})[]
attributes: [
{ name: string
name: "content", as: string
as: "value", controlled: boolean
controlled: false },
{ name: string
name: "onContentUpdate", as: string
as: "onChange" },
],
},
],
version: string
version: "detect",
},
},
},
];