Configuration
ESLint React provides the following configurations:
Settings
importSource
(type: string
, default: "react"
)
The source where React is imported from.
This allows to specify a custom import location for React when not using the official distribution (e.g. @pika/react
, etc).
jsxPragma
(type: string
, default: "createElement"
)
The identifier that’s used for JSX Element creation.
This should not be a member expression (i.e. use "createElement"
instead of "React.createElement"
).
jsxPragmaFrag
(type: string
, default: "Fragment"
)
The identifier that’s used for JSX fragment elements.
This should not be a member expression (i.e. use "Fragment"
instead of "React.Fragment"
).
version
(type: string
, default: "detect"
)
React version to use, "detect"
means auto detect React version from the project’s dependencies.
If importSource
is specified, an equivalent version of React should be provided here.
polymorphicPropName
(type: string
)
You can optionally use the polymorphicPropName
setting to define the prop your code uses to create polymorphic components. This setting will be used determine the element type in rules that require semantic context.
For example, if you set the polymorphicPropName
setting to as
then this element:
<Box as="h3">Configurations </Box>
will be evaluated as an h3
. If no polymorphicPropName
is set, then the component will be evaluated as Box
.
additionalHooks
(type: [key: string]: string[]
)
A object of aliases for React built-in hooks. ESLint React will recognize these aliases as equivalent to the built-in hooks in all its rules.
(e.g. { useLayoutEffect: ["useIsomorphicLayoutEffect"] }
).
additionalComponents
(type: { name: string; as: string; attributes: { name: string; as?: string; defaultValue?: string }[] }[]
)
An array of user-defined components, used to inform the ESLint React plugins how to treat these components during checks.
Examples
import const react: {
readonly meta: {
readonly name: string;
readonly version: string;
};
readonly configs: {
readonly core: {
readonly plugins: {
readonly "@eslint-react": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-x/dist/index");
readonly "@eslint-react/debug": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-debug/dist/index");
readonly "@eslint-react/dom": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-dom/dist/index");
readonly "@eslint-react/hooks-extra": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-hooks-extra/dist/index");
readonly "@eslint-react/naming-convention": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-naming-convention/dist/index");
readonly "@eslint-react/web-api": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-web-api/dist/index");
};
readonly rules: {
readonly "@eslint-react/ensure-forward-ref-using-ref": "warn";
readonly "@eslint-react/no-access-state-in-setstate": "error";
readonly "@eslint-react/no-array-index-key": "warn";
readonly "@eslint-react/no-children-count": "warn";
readonly "@eslint-react/no-children-for-each": "warn";
readonly "@eslint-react/no-children-map": "warn";
readonly "@eslint-react/no-children-only": "warn";
readonly "@eslint-react/no-children-to-array" ...
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": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-x/dist/index");
readonly "@eslint-react/debug": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-debug/dist/index");
readonly "@eslint-react/dom": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-dom/dist/index");
readonly "@eslint-react/hooks-extra": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-hooks-extra/dist/index");
readonly "@eslint-react/naming-convention": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-naming-convention/dist/index");
readonly "@eslint-react/web-api": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-web-api/dist/index");
};
readonly rules: {
readonly "@eslint-react/ensure-forward-ref-using-ref": "warn";
readonly "@eslint-react/no-access-state-in-setstate": "error";
readonly "@eslint-react/no-array-index-key": "warn";
readonly "@eslint-react/no-children-count": "warn";
readonly "@eslint-react/no-children-for-each": "warn";
readonly "@eslint-react/no-children-map": "warn";
readonly "@eslint-react/no-children-only": "warn";
readonly "@eslint-react/no-children-to-array" ...
react.configs: {
readonly core: {
readonly plugins: {
readonly "@eslint-react": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-x/dist/index");
readonly "@eslint-react/debug": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-debug/dist/index");
readonly "@eslint-react/dom": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-dom/dist/index");
readonly "@eslint-react/hooks-extra": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-hooks-extra/dist/index");
readonly "@eslint-react/naming-convention": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-naming-convention/dist/index");
readonly "@eslint-react/web-api": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-web-api/dist/index");
};
readonly rules: {
readonly "@eslint-react/ensure-forward-ref-using-ref": "warn";
readonly "@eslint-react/no-access-state-in-setstate": "error";
readonly "@eslint-react/no-array-index-key": "warn";
readonly "@eslint-react/no-children-count": "warn";
readonly "@eslint-react/no-children-for-each": "warn";
readonly "@eslint-react/no-children-map": "warn";
readonly "@eslint-react/no-children-only": "warn";
readonly "@eslint-react/no-children-to-array": "warn";
readonly "@eslint-react/no-clone-element": "warn";
readonly "@eslint-react/no-comment-textnodes": "warn";
readonly "@eslint-react/no-component-will-mount" ...
configs.recommended: {
readonly plugins: {
readonly "@eslint-react": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-x/dist/index");
readonly "@eslint-react/debug": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-debug/dist/index");
readonly "@eslint-react/dom": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-dom/dist/index");
readonly "@eslint-react/hooks-extra": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-hooks-extra/dist/index");
readonly "@eslint-react/naming-convention": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-naming-convention/dist/index");
readonly "@eslint-react/web-api": typeof import("/vercel/path0/packages/plugins/eslint-plugin-react-web-api/dist/index");
};
readonly rules: {
readonly "@eslint-react/hooks-extra/no-direct-set-state-in-use-effect": "warn";
readonly "@eslint-react/hooks-extra/no-redundant-custom-hook": "warn";
readonly "@eslint-react/hooks-extra/prefer-use-state-lazy-initialization": "warn";
readonly "@eslint-react/web-api/no-leaked-event-listener": "warn";
readonly "@eslint-react/web-api/no-leaked-interval": "warn";
readonly "@eslint-react/web-api/no-leaked-resize-observer": "warn";
readonly "@eslint-react/web-api/no-leaked-timeout": "warn";
readonly "@eslint-react/dom/no-children-in-void-dom-elements": "warn";
readonly "@eslint-react/dom/no-dangerously-set-innerhtml": "warn";
readonly "@eslint-react/dom/no-dangerously-set-innerhtml-with-children" ...
recommended,
settings: {
"react-x": {
importSource: string;
jsxPragma: string;
jsxPragmaFrag: string;
additionalHooks: {
useLayoutEffect: string[];
};
additionalComponents: {
name: string;
as: 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;
as: string;
attributes: ({
name: string;
as: string;
} | {
name: string;
defaultValue: string;
})[];
}[]
additionalComponents: [
{
name: string
name: "Link",
as: string
as: "a",
attributes: ({
name: string;
as: string;
} | {
name: string;
defaultValue: string;
})[]
attributes: [
{ name: string
name: "to", as: string
as: "href" },
{ name: string
name: "rel", defaultValue: string
defaultValue: "noopener noreferrer" },
],
},
],
version: string
version: "detect",
},
},
},
];