You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
ESLint React supports reading settings from the `react-x` key in the[`settings`](https://eslint.org/docs/latest/use/configure/configuration-files#configuring-shared-settings) object of your ESLint configuration file.
7
+
ESLint React reads configurations from the `react-x` key within ESLint's[`settings`](https://eslint.org/docs/latest/use/configure/configuration-files#configuring-shared-settings) object. Configure these properties in your ESLint configuration file:
8
8
9
9
```ts title="eslint.config.js"
10
10
exportdefault [
11
11
{
12
12
files: ["**/*.ts", "**/*.tsx"],
13
13
settings: {
14
14
"react-x": {
15
-
version: "19.0.0",
15
+
version: "19.0.0", // React version for analysis
16
+
// ...other configurations
16
17
},
17
18
},
18
19
},
19
20
];
20
21
```
21
22
22
-
## Properties
23
+
## Configuration Properties
23
24
24
25
<SettingsTypeTable />
25
26
26
-
## Descriptions
27
+
## Property Specifications
27
28
28
29
### `version`
29
30
30
-
React version to perform the analysis, `"detect"` means auto detect React version from the project's dependencies.
31
-
32
-
If failed to detect, it will use the `19.0.0` version.
31
+
Defines the React version for semantic analysis.
32
+
-`"detect"`: Auto-detects from project dependencies (defaults to `19.0.0` if undetectable)
33
+
-`string`: Explicit version specification (e.g., `"18.2.0"`)
33
34
34
35
### `importSource`
35
36
36
-
<Callouttype="info">If `importSource` is specified, an equivalent version of React should be provided to the [`version`](#version) setting.</Callout>
37
-
38
-
The source where React is imported from.
37
+
Customizes the React module import source. Useful for non-standard distributions.
39
38
40
-
This allows to specify a custom import location for React when not using the official distribution.
41
-
42
-
For example, if you are using `@pika/react` instead of `react`, you can set the `importSource` to `@pika/react`:
39
+
Example for using `@pika/react` instead of `react`:
43
40
44
41
```ts
45
42
importReactfrom"@pika/react";
46
43
```
47
44
48
45
### `skipImportCheck`
49
46
50
-
When determining whether an API originates from React, bypass the import source check.
51
-
52
-
By default, the rule checks only the shape of the API to determine if it is a React API. If `skipImportCheck` is set to `false`, both the shape and the import source will be checked.
47
+
Controls whether to verify the import source when identifying React APIs.
53
48
54
-
This prevents false positives when using unrelated third-party libraries that have APIs similar to React.
55
-
56
-
For example, when `skipImportCheck` is set to `false`, the `memo` function from `unrelated-library` will not be recognized as React's `memo`.
49
+
Default is `true` (checks only API shape). When `false`, both shape and import source are verified, preventing false positives from third-party libraries with similar APIs.
57
50
58
51
```ts
59
52
import { memo } from"unrelated-library";
60
53
61
54
const NonComponentFunction =memo(() => {
62
-
// ^^^^
63
-
// - This will not be recognized as React's memo
55
+
// When skipImportCheck: false, this isn't recognized as React's memo
64
56
});
65
57
```
66
58
67
59
### `polymorphicPropName`
68
60
69
-
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.
61
+
Defines the prop used for polymorphic components. Helps rules determine element types for semantic context.
70
62
71
-
For example, if you set the `polymorphicPropName`setting to `as` then this element:
63
+
Example with `polymorphicPropName`set to `as`:
72
64
73
65
```tsx
74
66
<Boxas="h3">Configurations</Box>
67
+
// Evaluated as an h3 element
75
68
```
76
69
77
-
will be evaluated as an `h3`.
78
-
79
-
If no `polymorphicPropName` is set, then the component will be evaluated as `Box`.
80
-
81
-
### `additionalComponents`
70
+
### `additionalComponents` (Experimental)
82
71
83
-
<Callouttype="info">Before using `additionalComponents`, consider whether `polymorphicPropName`can be used instead, as it simpler and more efficient.</Callout>
72
+
<Callouttype="info">Consider using `polymorphicPropName`instead when possible, as it's simpler and more efficient.</Callout>
84
73
85
-
<Callouttype="warn">This is an experimental feature that can be unstable and lacks documentation.</Callout>
74
+
<Callouttype="warn">Experimental feature that may lack stability and documentation.</Callout>
86
75
87
-
An array of components and its attributes mapping. It allows the related rules to do even more comprehensive analysis. You can also provide default values for attributes here, that will be used when that attribute is not present.
76
+
Maps components and their attributes for comprehensive analysis. Supports default attribute values.
88
77
89
-
For example, if you set the `additionalComponents` to:
78
+
Example configuration:
90
79
91
80
```json
92
81
[
@@ -103,62 +92,31 @@ For example, if you set the `additionalComponents` to:
103
92
]
104
93
```
105
94
106
-
then this element:
95
+
This makes `<EmbedContent src="https://eslint-react.xyz" />{:tsx}` evaluate as `<iframe src="https://eslint-react.xyz" sandbox="" />{:tsx}`.
107
96
108
-
```tsx
109
-
<EmbedContentsrc="https://eslint-react.xyz" />
110
-
```
97
+
### `additionalHooks` (Experimental)
111
98
112
-
will be evaluated as an:
99
+
<Callouttype="warn">
100
+
Intended for edge cases. We suggest to use this option **very sparingly, if at all**. Generally saying, we recommend most custom Hooks do not vary the built-in React Hooks, and instead provide a higher-level API that is more focused around a specific use case.
So that both the `hooks-extra/no-direct-set-state-in-use-effect` and `hooks-extra/no-direct-set-state-in-use-layout-effect` rules can perform checks on it.
0 commit comments