|
4 | 4 |
|
5 | 5 | ### Plugins (with ecological niche explanation) |
6 | 6 |
|
7 | | -- `eslint-plugin-react-x` - Core rules (renderer-agnostic, compatible with x-platform). |
8 | | -- `eslint-plugin-react-dom` - DOM Specific rules for React DOM. |
9 | | -- `eslint-plugin-react-web-api` - Rules for interacting with Web APIs. |
10 | | -- `eslint-plugin-react-hooks` - The official one from React. |
11 | | -- `eslint-plugin-react-hooks-extra` - Extra rules for `eslint-plugin-react-hooks`. |
12 | | -- `eslint-plugin-react-naming-convention` - Optional naming convention rules (can be replaced with other plugins depending on the project). |
13 | | - |
14 | | -### Rules in `eslint-plugin-react-x` |
15 | | - |
16 | | -| Rule | Description | |
17 | | -| :--------------------------------------- | :--------------------------------------------------------------------------------------------------- | |
18 | | -| `ensure-forward-ref-using-ref` | Requires that components wrapped with `forwardRef` must have a `ref` parameter. | |
19 | | -| `no-access-state-in-setstate` | Prevents accessing `this.state` inside `setState` calls. | |
20 | | -| `no-array-index-key` | Prevents using array `index` as `key`. | |
21 | | -| `no-children-count` | Prevents using `Children.count`. | |
22 | | -| `no-children-for-each` | Prevents using `Children.forEach`. | |
23 | | -| `no-children-map` | Prevents using `Children.map`. | |
24 | | -| `no-children-only` | Prevents using `Children.only`. | |
25 | | -| `no-children-prop` | Prevents using `children` as a prop. | |
26 | | -| `no-children-to-array` | Prevents using `Children.toArray`. | |
27 | | -| `no-class-component` | Prevents using class component. | |
28 | | -| `no-clone-element` | Prevents using `cloneElement`. | |
29 | | -| `no-comment-textnodes` | Prevents comments from being inserted as text nodes. | |
30 | | -| `no-complex-conditional-rendering` | Prevents complex conditional rendering in JSX. | |
31 | | -| `no-component-will-mount` | Prevents using `componentWillMount`. | |
32 | | -| `no-component-will-receive-props` | Prevents using `componentWillReceiveProps`. | |
33 | | -| `no-component-will-update` | Prevents using `componentWillUpdate`. | |
34 | | -| `no-create-ref` | Prevents using `createRef`. | |
35 | | -| `no-default-props` | Prevents using `defaultProps` property in favor of ES6 default parameters. | |
36 | | -| `no-direct-mutation-state` | Prevents direct mutation of `this.state`. | |
37 | | -| `no-duplicate-key` | Prevents duplicate `key` on elements in the same array or a list of `children`. | |
38 | | -| `no-forward-ref` | Prevents using `forwardRef`. | |
39 | | -| `no-implicit-key` | Prevents `key` from not being explicitly specified (e.g. spreading `key` from objects). | |
40 | | -| `no-leaked-conditional-rendering` | Prevents problematic leaked values from being rendered. | |
41 | | -| `no-missing-component-display-name` | Enforces that all components have a `displayName` which can be used in devtools. | |
42 | | -| `no-missing-key` | Prevents missing `key` on items in list rendering. | |
43 | | -| `no-nested-components` | Prevents nesting component definitions inside other components. | |
44 | | -| `no-prop-types` | Prevents using `propTypes` in favor of TypeScript or another type-checking solution. | |
45 | | -| `no-redundant-should-component-update` | Prevents using `shouldComponentUpdate` when extending `React.PureComponent`. | |
46 | | -| `no-set-state-in-component-did-mount` | Prevents calling `this.setState` in `componentDidMount` outside of functions, such as callbacks. | |
47 | | -| `no-set-state-in-component-did-update` | Prevents calling `this.setState` in `componentDidUpdate` outside of functions, such as callbacks. | |
48 | | -| `no-set-state-in-component-will-update` | Prevents calling `this.setState` in `componentWillUpdate` outside of functions, such as callbacks. | |
49 | | -| `no-string-refs` | Prevents using deprecated string `refs`. | |
50 | | -| `no-unsafe-component-will-mount` | Warns the usage of `UNSAFE_componentWillMount` in class components. | |
51 | | -| `no-unsafe-component-will-receive-props` | Warns the usage of `UNSAFE_componentWillReceiveProps` in class components. | |
52 | | -| `no-unsafe-component-will-update` | Warns the usage of `UNSAFE_componentWillUpdate` in class components. | |
53 | | -| `no-unstable-context-value` | Prevents non-stable values (i.e. object literals) from being used as a value for `Context.Provider`. | |
54 | | -| `no-unstable-default-props` | Prevents using referential-type values as default props in object destructuring. | |
55 | | -| `no-unused-class-component-members` | Warns unused class component methods and properties. | |
56 | | -| `no-unused-state` | Warns unused class component state. | |
57 | | -| `no-useless-fragment` | Prevents using useless `fragment` components or `<>` syntax. | |
58 | | -| `prefer-destructuring-assignment` | Enforces using destructuring assignment over property assignment. | |
59 | | -| `prefer-read-only-props` | Enforce read-only props in components. | |
60 | | -| `prefer-shorthand-boolean` | Enforces using shorthand syntax for boolean attributes. | |
61 | | -| `prefer-shorthand-fragment` | Enforces using shorthand syntax for fragments. | |
62 | | - |
63 | | -### Rules in `eslint-plugin-react-dom` |
64 | | - |
65 | | -| Rule | Description | |
66 | | -| :------------------------------------------- | :-------------------------------------------------------------------------------------- | |
67 | | -| `no-dangerously-set-innerhtml-with-children` | Prevents `DOM element` using `dangerouslySetInnerHTML` and `children` at the same time. | |
68 | | -| `no-dangerously-set-innerhtml` | Prevents `DOM element` using `dangerouslySetInnerHTML`. | |
69 | | -| `no-find-dom-node` | Prevents usage of `findDOMNode`. | |
70 | | -| `no-missing-button-type` | Enforces explicit `type` attribute for `<button>` elements. | |
71 | | -| `no-missing-iframe-sandbox` | Enforces explicit `sandbox` attribute for `iframe` elements. | |
72 | | -| `no-namespace` | Enforces the absence of a `namespace` in React elements. | |
73 | | -| `no-render-return-value` | Prevents usage of the return value of `ReactDOM.render`. | |
74 | | -| `no-script-url` | Prevents usage of `javascript:` URLs as the value of certain attributes. | |
75 | | -| `no-unsafe-iframe-sandbox` | Enforces `sandbox` attribute for `iframe` elements is not set to unsafe combinations. | |
76 | | -| `no-unsafe-target-blank` | Prevents usage of `target="_blank"` without `rel="noreferrer noopener"`. | |
77 | | -| `no-void-elements-with-children` | Prevents passing `children` to void DOM elements. | |
78 | | - |
79 | | -### Rules in `eslint-plugin-react-web-api` |
80 | | - |
81 | | -| Rule | Description | |
82 | | -| :-------------------------------------- | :-------------------------------------------- | |
83 | | -| `no-leaked-timeout` | Prevents leaked `setTimeout` | |
84 | | -| `no-leaked-interval` | Prevents leaked `setInterval` | |
85 | | -| `no-leaked-idle-callback` | Prevents leaked `requestIdleCallback` | |
86 | | -| `no-leaked-animation-frame` | Prevents leaked `requestAnimationFrame` | |
87 | | -| `no-leaked-event-source` | Prevents leaked `EventSource` | |
88 | | -| `no-leaked-event-listener` | Prevents leaked `addEventListener` | |
89 | | -| `no-leaked-resize-observer` | Prevents leaked `ResizeObserver` | |
90 | | -| `no-leaked-intersection-observer` | Prevents leaked `IntersectionObserver` | |
91 | | -| `no-leaked-mutation-observer` | Prevents leaked `MutationObserver` | |
92 | | -| `no-leaked-performance-observer` | Prevents leaked `PerformanceObserver` | |
93 | | -| `no-leaked-websocket` | Prevents leaked `WebSocket` | |
94 | | -| `no-leaked-broadcast-channel` | Prevents leaked `BroadcastChannel` | |
95 | | -| `no-leaked-geolocation` | Prevents leaked `Geolocation.watchPosition()` | |
96 | | -| `no-leaked-absolute-orientation-sensor` | Prevents leaked `AbsoluteOrientationSensor` | |
97 | | -| `no-leaked-relative-accelerometer` | Prevents leaked `Accelerometer` | |
98 | | -| `no-leaked-ambient-light-sensor` | Prevents leaked `AmbientLightSensor` | |
99 | | -| `no-leaked-gravity-sensor` | Prevents leaked `GravitySensor` | |
100 | | -| `no-leaked-gyroscope` | Prevents leaked `Gyroscope` | |
101 | | -| `no-leaked-linear-acceleration-sensor` | Prevents leaked `LinearAccelerationSensor` | |
102 | | -| `no-leaked-magnetometer` | Prevents leaked `Magnetometer` | |
103 | | -| `no-leaked-orientation-sensor` | Prevents leaked `OrientationSensor` | |
104 | | - |
105 | | -### Rules in `eslint-plugin-react-hooks-extra` |
106 | | - |
107 | | -| Rule | Description | |
108 | | -| :------------------------------------- | :-------------------------------------------------------------------- | |
109 | | -| `no-direct-set-state-in-use-effect` | Disallow direct calls to `set` function of `useState` in `useEffect`. | |
110 | | -| `no-unnecessary-use-callback` | Disallow unnecessary usage of `useCallback`. | |
111 | | -| `no-unnecessary-use-memo` | Disallow unnecessary usage of `useMemo`. | |
112 | | -| `no-useless-custom-hooks` | Warns when custom Hooks that don't use other Hooks. | |
113 | | -| `prefer-use-state-lazy-initialization` | Warns function calls made inside `useState` calls. | |
114 | | - |
115 | | -### Rules in `eslint-plugin-react-naming-convention` |
116 | | - |
117 | | -| Rule | Description | |
118 | | -| :------------------- | :----------------------------------------------------------------------------------------- | |
119 | | -| `component-name` | Enforces naming conventions for components. | |
120 | | -| `filename` | Enforces naming convention for JSX files. | |
121 | | -| `filename-extension` | Enforces consistent use of the JSX file extension. | |
122 | | -| `use-state` | Enforces destructuring and symmetric naming of `useState` hook value and setter variables. | |
| 7 | +- [x] `eslint-plugin-react-x` - Core rules (renderer-agnostic, compatible with x-platform). |
| 8 | +- [x] `eslint-plugin-react-dom` - DOM Specific rules for React DOM. |
| 9 | +- [x] `eslint-plugin-react-web-api` - Rules for interacting with Web APIs. |
| 10 | +- [x] `eslint-plugin-react-hooks-extra` - Extra rules for `eslint-plugin-react-hooks`. |
| 11 | +- [x] `eslint-plugin-react-naming-convention` - Naming convention rules designed for React projects. |
| 12 | +- [x] `@eslint-react/eslint-plugin` - The main ESLint plugin of ESLint React. Contains all the rules from the above plugins with recommended presets. |
| 13 | + |
| 14 | +### Add codemod feature to rules that can be transformed safely |
| 15 | + |
| 16 | +- [x] `no-component-did-update` |
| 17 | +- [x] `no-component-will-receive-props` |
| 18 | +- [x] `no-component-will-update` |
| 19 | +- [x] `no-context-provider` |
| 20 | +- [x] `no-forward-ref` |
| 21 | + |
| 22 | +### Add auto-fix feature to rules that can be auto-fixed safely |
| 23 | + |
| 24 | +- [ ] `prefer-destructuring-assignment` |
| 25 | +- [ ] `prefer-shorthand-fragment` |
| 26 | +- [x] `prefer-react-namespace-import` |
| 27 | +- [x] `prefer-shorthand-boolean` |
| 28 | +- [ ] `function-component-definition` |
| 29 | + |
| 30 | +### Add suggestion-fix feature to rules that can be fixed interactively |
| 31 | + |
| 32 | +- [ ] `ensure-forward-ref-using-ref` |
| 33 | +- [ ] `no-leaked-conditional-rendering` |
| 34 | +- [ ] `no-redundant-should-component-update` |
| 35 | +- [ ] `no-unused-class-component-members` |
| 36 | +- [ ] `no-unused-state` |
| 37 | +- [ ] `no-useless-fragment` |
| 38 | +- [ ] `dom/no-namespace` |
| 39 | +- [ ] `dom/no-missing-button-type.md` |
| 40 | +- [ ] `dom/no-missing-iframe-sandbox` |
| 41 | +- [ ] `dom/no-unsafe-iframe-sandbox` |
| 42 | +- [ ] `dom/no-unsafe-target-blank` |
| 43 | +- [ ] `web-api/no-leaked-timeout` |
| 44 | +- [ ] `web-api/no-leaked-interval` |
| 45 | +- [ ] `web-api/no-leaked-event-listener` |
| 46 | +- [ ] `web-api/no-leaked-resize-observer` |
| 47 | + |
| 48 | +### New Rules |
| 49 | + |
| 50 | +- [ ] `function-component-definition` - Enforce the definition of function components ([rEl1cx/eslint-react#739](https://github.com/rEl1cx/eslint-react/issues/739)). |
| 51 | +- [ ] `hooks-extra/no-circular-effect` - Detect circular `set` (and `dispatch`) functions and deps patterns in `useEffect` like Hooks ([rEl1cx/eslint-react#755](https://github.com/rEl1cx/eslint-react/issues/755)) |
123 | 52 |
|
124 | 53 | ### Advanced Configuration features |
125 | 54 |
|
126 | | -- Additional components (`settings["react-x"].additionalComponents`) transitions from experimental to stable. |
127 | | - |
128 | | -## Milestone 3.0 (Draft) |
129 | | - |
130 | | -### Plugins (with ecological niche explanation) |
131 | | - |
132 | | -- `eslint-plugin-react-x` - Core rules (renderer-agnostic, compatible with x-platform). |
133 | | -- `eslint-plugin-react-dom` - DOM Specific rules for React DOM. |
134 | | -- `eslint-plugin-react-web-api` - Rules for interacting with Web APIs. |
135 | | -- `eslint-plugin-react-hooks` - The official one from React. |
136 | | -- `eslint-plugin-react-hooks-extra` - Extra rules for `eslint-plugin-react-hooks`. |
137 | | -- `eslint-plugin-react-naming-convention` - Optional naming convention rules (can be replaced with other plugins depending on the project). |
138 | | -- ... (Free to combine with other plugins from the community). |
| 55 | +- [ ] Additional components (`settings["react-x"].additionalComponents`) transitions from experimental to stable. |
0 commit comments