diff --git a/.pkgs/eslint-plugin-local/dist/index.js b/.pkgs/eslint-plugin-local/dist/index.js index 96621d893d..7bc99d98aa 100644 --- a/.pkgs/eslint-plugin-local/dist/index.js +++ b/.pkgs/eslint-plugin-local/dist/index.js @@ -49,9 +49,7 @@ function getRequireExpressionArguments(node) { // src/rules/avoid-multiline-template-expression.ts var RULE_NAME = "avoid-multiline-template-expression"; -var RULE_FEATURES = [ - "CHK" -]; +var RULE_FEATURES = []; var avoid_multiline_template_expression_default = createRule({ meta: { type: "problem", @@ -82,9 +80,7 @@ var avoid_multiline_template_expression_default = createRule({ // src/rules/no-shadow-underscore.ts var RULE_NAME2 = "no-shadow-underscore"; -var RULE_FEATURES2 = [ - "CHK" -]; +var RULE_FEATURES2 = []; var no_shadow_underscore_default = createRule({ meta: { type: "problem", @@ -119,7 +115,7 @@ var prefer_eqeq_nullish_comparison_default = createRule({ meta: { type: "suggestion", docs: { - description: "enforce eqeqeq preferences around nullish comparisons" + description: "Enforces eqeqeq preferences around nullish comparisons." }, fixable: "code", hasSuggestions: true, diff --git a/.pkgs/eslint-plugin-local/src/rules/prefer-eqeq-nullish-comparison.ts b/.pkgs/eslint-plugin-local/src/rules/prefer-eqeq-nullish-comparison.ts index 62ff095517..acaf294886 100644 --- a/.pkgs/eslint-plugin-local/src/rules/prefer-eqeq-nullish-comparison.ts +++ b/.pkgs/eslint-plugin-local/src/rules/prefer-eqeq-nullish-comparison.ts @@ -16,7 +16,7 @@ export default createRule({ meta: { type: "suggestion", docs: { - description: "enforce eqeqeq preferences around nullish comparisons", + description: "Enforces eqeqeq preferences around nullish comparisons.", }, fixable: "code", hasSuggestions: true, diff --git a/apps/website/content/docs/rules/overview.mdx b/apps/website/content/docs/rules/overview.mdx index da6e9b0dd6..e68485d527 100644 --- a/apps/website/content/docs/rules/overview.mdx +++ b/apps/website/content/docs/rules/overview.mdx @@ -24,42 +24,42 @@ Linter rules can have false positives, false negatives, and some rules are depen | Rule | ✅ | 🌟 | Description | `react` | | :----------------------------------------------------------------------------------- | :- | :------: | :---------------------------------------------------------------------------------------------------- | :-----: | -| [`avoid-shorthand-boolean`](./avoid-shorthand-boolean) | 0️⃣ | `🔧` | Enforces the use of explicit boolean values for boolean attributes | | -| [`avoid-shorthand-fragment`](./avoid-shorthand-fragment) | 0️⃣ | | Enforces the use of explicit `` components instead of the shorthand `<>` or `` syntax | | -| [`no-access-state-in-setstate`](./no-access-state-in-setstate) | 2️⃣ | | Prevents accessing `this.state` inside `setState` calls | | -| [`no-array-index-key`](./no-array-index-key) | 1️⃣ | | Prevents using an item's index in the array as its key | | -| [`no-children-count`](./no-children-count) | 1️⃣ | | Prevents using `Children.count` | | -| [`no-children-for-each`](./no-children-for-each) | 1️⃣ | | Prevents using `Children.forEach` | | -| [`no-children-map`](./no-children-map) | 1️⃣ | | Prevents using `Children.map` | | -| [`no-children-only`](./no-children-only) | 1️⃣ | | Prevents using `Children.only` | | -| [`no-children-prop`](./no-children-prop) | 0️⃣ | | Prevents using `children` as a prop | | -| [`no-children-to-array`](./no-children-to-array) | 1️⃣ | | Prevents using `Children.toArray` | | -| [`no-class-component`](./no-class-component) | 0️⃣ | | Prevents using class component | | -| [`no-clone-element`](./no-clone-element) | 1️⃣ | | Prevents using `cloneElement` | | +| [`avoid-shorthand-boolean`](./avoid-shorthand-boolean) | 0️⃣ | `🔧` | Enforces explicit boolean values for boolean attributes | | +| [`avoid-shorthand-fragment`](./avoid-shorthand-fragment) | 0️⃣ | | Enforces explicit `` components instead of the shorthand `<>` or `` syntax | | +| [`no-access-state-in-setstate`](./no-access-state-in-setstate) | 2️⃣ | | Disallow accessing `this.state` inside `setState` calls | | +| [`no-array-index-key`](./no-array-index-key) | 1️⃣ | | Disallow an item's index in the array as its key | | +| [`no-children-count`](./no-children-count) | 1️⃣ | | Disallow `Children.count` | | +| [`no-children-for-each`](./no-children-for-each) | 1️⃣ | | Disallow `Children.forEach` | | +| [`no-children-map`](./no-children-map) | 1️⃣ | | Disallow `Children.map` | | +| [`no-children-only`](./no-children-only) | 1️⃣ | | Disallow `Children.only` | | +| [`no-children-prop`](./no-children-prop) | 0️⃣ | | Disallow passing `children` as a prop | | +| [`no-children-to-array`](./no-children-to-array) | 1️⃣ | | Disallow `Children.toArray` | | +| [`no-class-component`](./no-class-component) | 0️⃣ | | Disallow class component | | +| [`no-clone-element`](./no-clone-element) | 1️⃣ | | Disallow `cloneElement` | | | [`no-comment-textnodes`](./no-comment-textnodes) | 1️⃣ | | Prevents comments from being inserted as text nodes | | -| [`no-complex-conditional-rendering`](./no-complex-conditional-rendering) | 0️⃣ | | Prevents complex conditional rendering in JSX | | +| [`no-complex-conditional-rendering`](./no-complex-conditional-rendering) | 0️⃣ | | Disallow complex conditional rendering in JSX expressions | | | [`no-component-will-mount`](./no-component-will-mount) | 2️⃣ | `🔄` | Replaces usages of `componentWillMount` with `UNSAFE_componentWillMount` | >=16.3.0 | | [`no-component-will-receive-props`](./no-component-will-receive-props) | 2️⃣ | `🔄` | Replaces usages of `componentWillReceiveProps` with `UNSAFE_componentWillReceiveProps` | >=16.3.0 | | [`no-component-will-update`](./no-component-will-update) | 2️⃣ | `🔄` | Replaces usages of `componentWillUpdate` with `UNSAFE_componentWillUpdate` | >=16.3.0 | | [`no-context-provider`](./no-context-provider) | 1️⃣ | `🔄` | Replaces usages of `` with `` | >=19.0.0 | -| [`no-create-ref`](./no-create-ref) | 2️⃣ | | Prevents using `createRef` | | -| [`no-default-props`](./no-default-props) | 2️⃣ | | Prevents using `defaultProps` property in favor of ES6 default parameters | | -| [`no-direct-mutation-state`](./no-direct-mutation-state) | 2️⃣ | | Prevents direct mutation of `this.state` | | -| [`no-duplicate-jsx-props`](./no-duplicate-jsx-props) | 1️⃣ | | Prevents duplicate props in JSX | | -| [`no-duplicate-key`](./no-duplicate-key) | 2️⃣ | | Prevents duplicate `key` on elements in the same array or a list of `children` | | +| [`no-create-ref`](./no-create-ref) | 2️⃣ | | Disallow `createRef` in function components | | +| [`no-default-props`](./no-default-props) | 2️⃣ | | Disallow `defaultProps` property in favor of ES6 default parameters | | +| [`no-direct-mutation-state`](./no-direct-mutation-state) | 2️⃣ | | Disallow direct mutation of `this.state` | | +| [`no-duplicate-jsx-props`](./no-duplicate-jsx-props) | 1️⃣ | | Disallow duplicate props in JSX elements | | +| [`no-duplicate-key`](./no-duplicate-key) | 2️⃣ | | Disallow duplicate `key` on elements in the same array or a list of `children` | | | [`no-forward-ref`](./no-forward-ref) | 1️⃣ | `🔄` | Replaces usages of `forwardRef` with passing `ref` as a prop | >=19.0.0 | | [`no-implicit-key`](./no-implicit-key) | 1️⃣ | | Prevents `key` from not being explicitly specified (e.g. spreading `key` from objects) | | | [`no-leaked-conditional-rendering`](./no-leaked-conditional-rendering) | 1️⃣ | `💭` | Prevents problematic leaked values from being rendered | | | [`no-missing-component-display-name`](./no-missing-component-display-name) | 0️⃣ | | Enforces that all components have a `displayName` which can be used in devtools | | -| [`no-missing-context-display-name`](./no-missing-context-display-name) | 0️⃣ | | Enforces that all contexts have a `displayName` which React can use as its `displayName` in devtools | | -| [`no-missing-key`](./no-missing-key) | 2️⃣ | | Prevents missing `key` on items in list rendering | | -| [`no-nested-component-definitions`](./no-nested-component-definitions) | 2️⃣ | | Prevents nesting component definitions inside other components | | -| [`no-prop-types`](./no-prop-types) | 2️⃣ | | Prevents using `propTypes` in favor of TypeScript or another type-checking solution | | -| [`no-redundant-should-component-update`](./no-redundant-should-component-update) | 2️⃣ | | Prevents using `shouldComponentUpdate` when extending `React.PureComponent` | | -| [`no-set-state-in-component-did-mount`](./no-set-state-in-component-did-mount) | 1️⃣ | | Prevents calling `this.setState` in `componentDidMount` outside of functions, such as callbacks | | -| [`no-set-state-in-component-did-update`](./no-set-state-in-component-did-update) | 1️⃣ | | Prevents calling `this.setState` in `componentDidUpdate` outside of functions, such as callbacks | | -| [`no-set-state-in-component-will-update`](./no-set-state-in-component-will-update) | 1️⃣ | | Prevents calling `this.setState` in `componentWillUpdate` outside of functions, such as callbacks | | -| [`no-string-refs`](./no-string-refs) | 2️⃣ | | Prevents using deprecated string `refs` | | +| [`no-missing-context-display-name`](./no-missing-context-display-name) | 0️⃣ | | Enforces that all contexts have a `displayName` which can be used in devtools | | +| [`no-missing-key`](./no-missing-key) | 2️⃣ | | Disallow missing `key` on items in list rendering | | +| [`no-nested-component-definitions`](./no-nested-component-definitions) | 2️⃣ | | Disallow nesting component definitions inside other components | | +| [`no-prop-types`](./no-prop-types) | 2️⃣ | | Disallow `propTypes` in favor of TypeScript or another type-checking solution | | +| [`no-redundant-should-component-update`](./no-redundant-should-component-update) | 2️⃣ | | Disallow `shouldComponentUpdate` when extending `React.PureComponent` | | +| [`no-set-state-in-component-did-mount`](./no-set-state-in-component-did-mount) | 1️⃣ | | Disallow calling `this.setState` in `componentDidMount` outside of functions, such as callbacks | | +| [`no-set-state-in-component-did-update`](./no-set-state-in-component-did-update) | 1️⃣ | | Disallow calling `this.setState` in `componentDidUpdate` outside of functions, such as callbacks | | +| [`no-set-state-in-component-will-update`](./no-set-state-in-component-will-update) | 1️⃣ | | Disallow calling `this.setState` in `componentWillUpdate` outside of functions, such as callbacks | | +| [`no-string-refs`](./no-string-refs) | 2️⃣ | | Disallow deprecated string `refs` | | | [`no-unsafe-component-will-mount`](./no-unsafe-component-will-mount) | 1️⃣ | | Warns the usage of `UNSAFE_componentWillMount` in class components | | | [`no-unsafe-component-will-receive-props`](./no-unsafe-component-will-receive-props) | 1️⃣ | | Warns the usage of `UNSAFE_componentWillReceiveProps` in class components | | | [`no-unsafe-component-will-update`](./no-unsafe-component-will-update) | 1️⃣ | | Warns the usage of `UNSAFE_componentWillUpdate` in class components | | @@ -68,35 +68,35 @@ Linter rules can have false positives, false negatives, and some rules are depen | [`no-unused-class-component-members`](./no-unused-class-component-members) | 1️⃣ | | Warns unused class component methods and properties | | | [`no-unused-state`](./no-unused-state) | 1️⃣ | | Warns unused class component state | | | [`no-use-context`](./no-use-context) | 1️⃣ | `🔄` | Replaces usages of `useContext` with `use` | >=19.0.0 | -| [`no-useless-forward-ref`](./no-useless-forward-ref) | 1️⃣ | | Requires that components wrapped with `forwardRef` must have a `ref` parameter | | -| [`no-useless-fragment`](./no-useless-fragment) | 1️⃣ | `🔧` `⚙️` | Prevents using useless `fragment` components or `<>` syntax | | -| [`prefer-destructuring-assignment`](./prefer-destructuring-assignment) | 0️⃣ | | Enforces using destructuring assignment over property assignment | | +| [`no-useless-forward-ref`](./no-useless-forward-ref) | 1️⃣ | | Disallow useless `forwardRef` calls on components that don't use `ref`s | | +| [`no-useless-fragment`](./no-useless-fragment) | 0️⃣ | `🔧` `⚙️` | Disallow useless fragment elements | | +| [`prefer-destructuring-assignment`](./prefer-destructuring-assignment) | 0️⃣ | | Enforces destructuring assignment for component props and context | | | [`prefer-react-namespace-import`](./prefer-react-namespace-import) | 0️⃣ | `🔧` | Enforces React is imported via a namespace import | | | [`prefer-read-only-props`](./prefer-read-only-props) | 0️⃣ | `💭` | Enforces read-only props in components | | -| [`prefer-shorthand-boolean`](./prefer-shorthand-boolean) | 0️⃣ | `🔧` | Enforces the use of shorthand syntax for boolean attributes | | -| [`prefer-shorthand-fragment`](./prefer-shorthand-fragment) | 0️⃣ | `🔧` | Enforces the use of shorthand syntax for fragments | | +| [`prefer-shorthand-boolean`](./prefer-shorthand-boolean) | 0️⃣ | `🔧` | Enforces shorthand syntax for boolean attributes | | +| [`prefer-shorthand-fragment`](./prefer-shorthand-fragment) | 0️⃣ | `🔧` | Enforces shorthand syntax for fragments | | | [`use-jsx-vars`](./use-jsx-vars) | 1️⃣ | | Marks variables used in JSX as used | | ## DOM Rules | Rule | ✅ | 🌟 | Description | `react-dom` | | :----------------------------------------------------------------------------------------------- | :- | :------: | :------------------------------------------------------------------------------------- | :---------: | -| [`no-dangerously-set-innerhtml`](./dom-no-dangerously-set-innerhtml) | 1️⃣ | | Prevents DOM elements using `dangerouslySetInnerHTML` | | -| [`no-dangerously-set-innerhtml-with-children`](./dom-no-dangerously-set-innerhtml-with-children) | 2️⃣ | | Prevents DOM elements using `dangerouslySetInnerHTML` and `children` at the same time | | -| [`no-find-dom-node`](./dom-no-find-dom-node) | 2️⃣ | | Prevents using `findDOMNode` | | -| [`no-flush-sync`](./dom-no-flush-sync) | 2️⃣ | | Prevents using `flushSync` | | +| [`no-dangerously-set-innerhtml`](./dom-no-dangerously-set-innerhtml) | 1️⃣ | | Disallow `dangerouslySetInnerHTML` | | +| [`no-dangerously-set-innerhtml-with-children`](./dom-no-dangerously-set-innerhtml-with-children) | 2️⃣ | | Disallow `dangerouslySetInnerHTML` and `children` at the same time | | +| [`no-find-dom-node`](./dom-no-find-dom-node) | 2️⃣ | | Disallow `findDOMNode` | | +| [`no-flush-sync`](./dom-no-flush-sync) | 2️⃣ | | Disallow `flushSync` | | | [`no-hydrate`](./dom-no-hydrate) | 2️⃣ | `🔄` | Replaces usages of `ReactDom.hydrate()` with `hydrateRoot()` | >=18.0.0 | | [`no-missing-button-type`](./dom-no-missing-button-type) | 1️⃣ | | Enforces explicit `type` attribute for `button` elements | | | [`no-missing-iframe-sandbox`](./dom-no-missing-iframe-sandbox) | 1️⃣ | | Enforces explicit `sandbox` attribute for `iframe` elements | | | [`no-namespace`](./dom-no-namespace) | 2️⃣ | | Enforces the absence of a `namespace` in React elements | | | [`no-render`](./dom-no-render) | 2️⃣ | `🔄` | Replaces usages of `ReactDom.render()` with `createRoot(node).render()` | >=18.0.0 | -| [`no-render-return-value`](./dom-no-render-return-value) | 2️⃣ | | Prevents using the return value of `ReactDOM.render` | | -| [`no-script-url`](./dom-no-script-url) | 1️⃣ | | Prevents using `javascript:` URLs as the value of attributes | | -| [`no-unknown-property`](./dom-no-unknown-property) | 1️⃣ | `🔧` `⚙️` | Prevents using unknown `DOM` property | | +| [`no-render-return-value`](./dom-no-render-return-value) | 2️⃣ | | Disallow the return value of `ReactDOM.render` | | +| [`no-script-url`](./dom-no-script-url) | 1️⃣ | | Disallow `javascript:` URLs as attribute values | | +| [`no-unknown-property`](./dom-no-unknown-property) | 1️⃣ | `🔧` `⚙️` | Disallow unknown `DOM` property | | | [`no-unsafe-iframe-sandbox`](./dom-no-unsafe-iframe-sandbox) | 1️⃣ | | Enforces `sandbox` attribute for `iframe` elements is not set to unsafe combinations | | -| [`no-unsafe-target-blank`](./dom-no-unsafe-target-blank) | 1️⃣ | | Prevents using `target="_blank"` without `rel="noreferrer noopener"` | | -| [`no-use-form-state`](./dom-no-use-form-state) | 2️⃣ | `🔄` | Replaces the usages of `useFormState` with `useActionState` | >=19.0.0 | -| [`no-void-elements-with-children`](./dom-no-void-elements-with-children) | 2️⃣ | | Prevents using `children` in void DOM elements | | +| [`no-unsafe-target-blank`](./dom-no-unsafe-target-blank) | 1️⃣ | | Disallow `target="_blank"` without `rel="noreferrer noopener"` | | +| [`no-use-form-state`](./dom-no-use-form-state) | 2️⃣ | `🔄` | Replaces usages of `useFormState` with `useActionState` | >=19.0.0 | +| [`no-void-elements-with-children`](./dom-no-void-elements-with-children) | 2️⃣ | | Disallow `children` in void DOM elements | | ## Web API Rules diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.ts index ef9112bbf5..4f726f1404 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "report all class components, including anonymous ones", + description: "Reports all class components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.ts index bf15b4e489..d2f2ba5d17 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "report all function components, including anonymous ones", + description: "Reports all function components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/hook.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/hook.ts index 5670440e7f..ec674e56fd 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/hook.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/hook.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "report all React Hooks", + description: "Reports all React Hooks.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.ts index f551697b15..eeda841672 100644 --- a/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.ts +++ b/packages/plugins/eslint-plugin-react-debug/src/rules/is-from-react.ts @@ -21,7 +21,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "report all identifiers that are initialized from React.", + description: "Report all identifiers that are initialized from React.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.md index 8cbf72f006..67758cb46c 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.md @@ -23,7 +23,7 @@ react-dom/no-dangerously-set-innerhtml-with-children ## Description -Disallows DOM elements using `children` and `dangerouslySetInnerHTML` at the same time. +Disallow `dangerouslySetInnerHTML` and `children` at the same time. When using `dangerouslySetInnerHTML`, the content of the DOM element is set from the `__html` property. The content of the DOM element is completely replaced, so the children will not be rendered as expected. diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.ts index a97bb75155..1fd28c5df9 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow when a DOM component is using both 'children' and 'dangerouslySetInnerHTML'", + description: "Disallow `dangerouslySetInnerHTML` and `children` at the same time.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.md index e66a83a115..052fc530ac 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.md @@ -23,7 +23,7 @@ react-dom/no-dangerously-set-innerhtml ## Description -Warns when using `dangerouslySetInnerHTML`. +Disallow `dangerouslySetInnerHTML`. This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability. diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.ts index a324887db5..31153c1233 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.ts @@ -16,7 +16,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow when a DOM component is using 'dangerouslySetInnerHTML'", + description: "Disallow `dangerouslySetInnerHTML`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.md index 9415c7c709..5bbc7c0a58 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.md @@ -23,7 +23,7 @@ react-dom/no-find-dom-node ## Description -This rule disallows the use of `findDOMNode`. +Disallow `findDOMNode`. This API will be removed in a future major version of React. [See the alternatives](https://react.dev/reference/react-dom/findDOMNode#alternatives). diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.ts index f5db224b1a..77b3b3bcc6 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow 'findDOMNode'", + description: "Disallow `findDOMNode`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.md index 4f5f91d846..6c0a7d52b4 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.md @@ -23,7 +23,7 @@ react-dom/no-flush-sync ## Description -This rule reports usages of `flushSync`. +Disallow `flushSync`. `flushSync` can significantly hurt performance, and may unexpectedly force pending Suspense boundaries to show their fallback state. diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.ts index 235b398474..673c83f7d0 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-flush-sync.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow 'flushSync'", + description: "Disallow `flushSync`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-hydrate.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-hydrate.ts index 1c6080999f..580bec2e25 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-hydrate.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-hydrate.ts @@ -21,7 +21,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replaces usages of 'ReactDom.hydrate()' with 'hydrateRoot()'", + description: "Replaces usages of `ReactDom.hydrate()` with `hydrateRoot()`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts index 986470e783..24bc592084 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts @@ -16,7 +16,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce that button component have an explicit 'type' attribute", + description: "Enforces explicit `type` attribute for `button` elements.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.ts index bb2b0de7e1..0cb2e603b8 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.ts @@ -42,7 +42,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce that 'iframe' component have an explicit 'sandbox' attribute", + description: "Enforces explicit `sandbox` attribute for `iframe` elements.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.ts index 97fe00907d..c468d24766 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce that namespaces are not used in React elements", + description: "Enforces the absence of a `namespace` in React elements.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.md index 2dc3a8ad3c..f2d21afde3 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.md @@ -23,7 +23,7 @@ react-dom/no-render-return-value ## Description -Prevents usage of the return value of `ReactDOM.render`. +Disallow the return value of `ReactDOM.render`. `ReactDOM.render()` currently returns a reference to the root ReactComponent instance. However, using this return value is legacy and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root ReactComponent instance, the preferred solution is to attach a [callback ref](https://react.dev/learn/manipulating-the-dom-with-refs) to the root element. diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.ts index be37ddcb78..4e8e1baba0 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.ts @@ -24,7 +24,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow usage of the return value of 'ReactDOM.render'", + description: "Disallow the return value of `ReactDOM.render`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render.ts index 6fe88279a2..e211f52d26 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render.ts @@ -21,7 +21,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replace usages of 'ReactDom.render()' with 'createRoot(node).render()'", + description: "Replaces usages of `ReactDom.render()` with `createRoot(node).render()`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.md index 984740c255..a48be3455f 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.md @@ -23,7 +23,7 @@ react-dom/no-script-url ## Description -Prevents usage of `javascript:` URLs as the value of attributes. +Disallow `javascript:` URLs as attribute values. `javascript:` URLs are a form of [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. They allow an attacker to execute arbitrary JavaScript in the context of your website, which can be used to steal user data, deface your website, or perform other malicious actions. diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.ts index c24217fd16..fb34a7dc39 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.ts @@ -21,7 +21,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow 'javascript:' URLs as JSX event handler prop's value", + description: "Disallow `javascript:` URLs as attribute values.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.md index 893cb43c09..be7a9363c3 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.md @@ -25,6 +25,8 @@ react-dom/no-unknown-property ## Description +Disallow unknown `DOM` property. + In JSX most DOM properties and attributes should be camelCased to be consistent with standard JavaScript style. This can be a possible source of error if you are used to writing plain HTML. Only `data-*` and `aria-*` attributes are usings hyphens and lowercase letters in JSX. diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.ts index 9cd6ce26a3..4aa36e4834 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unknown-property.ts @@ -1063,7 +1063,7 @@ export default createRule({ meta: { type: "problem", docs: { - description: "disallow usage of unknown DOM property", + description: "Disallow unknown `DOM` property.", }, fixable: "code", messages, diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.ts index f31ab55c74..673f5b32f3 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.ts @@ -27,7 +27,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow unsafe iframe 'sandbox' attribute combinations", + description: "Enforces `sandbox` attribute for `iframe` elements is not set to unsafe combinations.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank.ts index b7f0c6a0e6..ff0bea7877 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-target-blank.ts @@ -30,7 +30,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: `disallow 'target="_blank"' on an external link without 'rel="noreferrer noopener"'`, + description: 'Disallow `target="_blank"` without `rel="noreferrer noopener"`.', [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md index 270ae51c2b..7dd38aa86f 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md @@ -27,7 +27,7 @@ react-dom/no-use-form-state ## Description -Replaces the usages of `useFormState` with `useActionState`. +Replaces usages of `useFormState` with `useActionState`. An **safe** codemod is available for this rule. diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.ts index f5e3137e69..7711099f2f 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.ts @@ -21,7 +21,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replace the usages of 'useFormState' with 'useActionState'", + description: "Replaces usages of `useFormState` with `useActionState`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.md index ceab0ece1f..cf54284f28 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.md +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.md @@ -23,7 +23,7 @@ react-dom/no-void-elements-with-children ## Description -Prevents the use of `children` in void DOM elements. +Disallow `children` in void DOM elements. Self-closing HTML elements (e.g. ``, `
`, `
`) are collectively known as void DOM elements. React will give you a warning if you try to give these children: diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts index f2e7cc6fb4..835c3b7a07 100644 --- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts +++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-void-elements-with-children.ts @@ -35,7 +35,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow void elements (AKA self-closing elements) from having children", + description: "Disallow `children` in void DOM elements.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.ts index f6411490b0..4085fa6f4e 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.ts +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow direct calls to the 'set' function of 'useState' in 'useEffect'", + description: "Disallow direct calls to the `set` function of `useState` in `useEffect`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.ts index 68e6aac691..ccf1fbab12 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.ts +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow direct calls to the 'set' function of 'useState' in 'useLayoutEffect'", + description: "Disallow direct calls to the `set` function of `useState` in `useLayoutEffect`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-callback.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-callback.ts index 9bd513d64a..3945db7bcb 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-callback.ts +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-callback.ts @@ -21,7 +21,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow unnecessary usage of 'useCallback'", + description: "Disallow unnecessary usage of `useCallback`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-memo.md b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-memo.md index 9b3b7049cf..2fb5cd6885 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-memo.md +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-memo.md @@ -16,7 +16,7 @@ react-hooks-extra/no-unnecessary-use-memo ## Description -Disallows unnecessary usage of `useMemo`. +Disallow unnecessary usage of `useMemo`. React Hooks `useMemo` has empty dependencies array like what's in the examples, are unnecessary. The hook can be removed and it's value can be calculated in the component body or hoisted to the outer scope of the component. diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-memo.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-memo.ts index 7c1ed74e3d..3a3626e1a4 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-memo.ts +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-memo.ts @@ -21,7 +21,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow unnecessary usage of 'useMemo'", + description: "Disallow unnecessary usage of `useMemo`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md index 4e69f40030..33e9136ec8 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md @@ -22,7 +22,7 @@ react-hooks-extra/no-unnecessary-use-prefix ## Description -Enforces that a function with the `use` prefix should call at least one Hook inside of it. +Enforces that a function with the 'use' prefix should use at least one Hook inside of it. If your function doesn’t call any Hooks, avoid the `use` prefix. Instead, write it as a regular function without the `use` prefix. For example, `useSorted` below doesn’t call Hooks, so call it `getSorted` instead: diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.ts index 87d8bb4882..65a094168b 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.ts +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.ts @@ -26,7 +26,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce that a function with the 'use' prefix should use at least one Hook inside of it", + description: "Enforces that a function with the `use` prefix should use at least one Hook inside of it.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.ts index be8c5e65d8..65a7ec8060 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.ts +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.ts @@ -32,7 +32,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow function calls in 'useState' that aren't wrapped in an initializer function", + description: "Enforces function calls made inside `useState` to be wrapped in an `initializer function`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.md b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.md index 6a9c5ad958..891b44057d 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.md +++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.md @@ -24,8 +24,6 @@ Enforces naming conventions for components. ## Examples -This rule enforces naming conventions for components. Can be used to enforce `PascalCase` and `CONSTANT_CASE`. By default, it enforces `PascalCase`. - ### Failing ```tsx diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.ts b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.ts index 8dc334f761..ef725a4fe5 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.ts +++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.ts @@ -89,7 +89,7 @@ export default createRule({ type: "problem", defaultOptions: [...defaultOptions], docs: { - description: "enforce naming convention for components", + description: "Enforces naming conventions for components.", }, messages: { invalid: "A component name '{{name}}' does not match {{rule}}.", diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.md b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.md index 9f30101a7b..4f2d1e0d99 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.md +++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.md @@ -16,7 +16,7 @@ react-naming-convention/context-name ## Description -Enforces consistent naming conventions for context providers. +Enforces context name to be a valid component name with the suffix `Context`. In React 19, you can render `` as a provider instead of ``. This rule enforces that the context has a valid component name with the suffix `Context`. diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.ts b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.ts index 306cea9734..d284ea5f0d 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.ts +++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/context-name.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce context name to be a valid component name with the suffix 'Context'", + description: "Enforces context name to be a valid component name with the suffix `Context`.", }, messages: { invalid: "A context name must be a valid component name with the suffix 'Context'.", diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename-extension.ts b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename-extension.ts index 62efe619d6..ae7e98a71f 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename-extension.ts +++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename-extension.ts @@ -72,7 +72,7 @@ export default createRule({ type: "problem", defaultOptions: [...defaultOptions], docs: { - description: "enforce naming convention for JSX file extensions", + description: "Enforces consistent file naming conventions.", }, messages: { useJsxFileExtension: "Use {{extensions}} file extension for JSX files.", diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.md b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.md index a4a86a065a..fd909d6ced 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.md +++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.md @@ -20,7 +20,7 @@ react-naming-convention/filename ## Description -Enforces consistent file naming conventions. Can be used to enforce PascalCase, camelCase, kebab-case, snake_case. By default, it enforces PascalCase. +Enforces consistent file naming conventions. ## Examples diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.ts b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.ts index 2227c30b78..1df6f163bc 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.ts +++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.ts @@ -83,7 +83,7 @@ export default createRule({ type: "problem", defaultOptions: [...defaultOptions], docs: { - description: "enforce naming convention for JSX filenames", + description: "Enforces consistent file naming conventions.", }, messages: { filenameEmpty: "A file must have non-empty name.", diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.ts b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.ts index 10005789c5..b0c13d74ab 100644 --- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.ts +++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.ts @@ -19,7 +19,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce destructuring and symmetric naming of 'useState' hook value and setter", + description: "Enforces destructuring and symmetric naming of `useState` hook value and setter.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.ts b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.ts index 7e6e14229e..94f4dfb5fa 100644 --- a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.ts +++ b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.ts @@ -147,8 +147,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: - "enforce that every 'addEventListener' in a component or custom Hook has a corresponding 'removeEventListener'.", + description: "Prevents leaked `addEventListener` in a component or custom Hook.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.ts b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.ts index 0c85c1547d..b22c5dd74f 100644 --- a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.ts +++ b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.ts @@ -58,8 +58,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: - "enforce that every 'setInterval' in a component or custom Hook has a corresponding 'clearInterval'.", + description: "Prevents leaked `setInterval` in a component or custom Hook.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.ts b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.ts index 578c37b56d..e6642c076e 100644 --- a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.ts +++ b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.ts @@ -87,7 +87,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce cleanup of 'ResizeObserver' instances in components and custom Hooks.", + description: "Prevents leaked `ResizeObserver` in a component or custom Hook.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.ts b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.ts index 0683d0b63f..5807577ed7 100644 --- a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.ts +++ b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.ts @@ -58,7 +58,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce that every 'setTimeout' in a component or custom Hook has a corresponding 'clearTimeout'.", + description: "Prevents leaked `setTimeout` in a component or custom Hook.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/configs/recommended.ts b/packages/plugins/eslint-plugin-react-x/src/configs/recommended.ts index 87e6e2d099..27cb79a603 100644 --- a/packages/plugins/eslint-plugin-react-x/src/configs/recommended.ts +++ b/packages/plugins/eslint-plugin-react-x/src/configs/recommended.ts @@ -41,7 +41,6 @@ export const rules = { "react-x/no-unused-state": "warn", "react-x/no-use-context": "warn", "react-x/no-useless-forward-ref": "warn", - "react-x/no-useless-fragment": "warn", "react-x/use-jsx-vars": "warn", } as const satisfies RulePreset; diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.md b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.md index da04ba7239..d0d71587e7 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.md @@ -20,7 +20,7 @@ react-x/avoid-shorthand-boolean ## Description -Enforces the use of explicit boolean values for boolean attributes. +Enforces explicit boolean values for boolean attributes. A **safe** auto-fix is available for this rule. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.ts b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.ts index 5a63ab1f9d..1bf4669c08 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using shorthand boolean attributes", + description: "Enforces explicit boolean values for boolean attributes.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.md b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.md index f2487e1afe..9524c0f4c4 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.md @@ -16,7 +16,7 @@ react-x/avoid-shorthand-fragment ## Description -Enforces the use of explicit `` or `` components instead of the shorthand `<>` or `` syntax. +Enforces explicit `` components instead of the shorthand `<>` or `` syntax. ## Examples diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.ts index 3bedd5476e..d1500cd94e 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.ts @@ -14,7 +14,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using shorthand fragment syntax", + description: "Enforces explicit `` components instead of the shorthand `<>` or `` syntax.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate.ts index 46acc4de50..e84de87608 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate.ts @@ -35,7 +35,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow accessing 'this.state' within 'setState'", + description: "Disallow accessing `this.state` inside `setState` calls.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md index 563ba03edb..31f41eb818 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md @@ -23,7 +23,7 @@ react-x/no-array-index-key ## Description -Warns when using an item's index in the array as its key. +Disallow an item's index in the array as its key. The order of items in a list rendering can change over time if an item is inserted, deleted, or the array is reordered. Indexes as keys often lead to subtle and confusing errors. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.ts index c4d5919c53..1066471b55 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.ts @@ -113,7 +113,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using an item's index in the array as its key", + description: "Disallow an item's index in the array as its key.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md index 659315665b..ad01b5a407 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md @@ -23,7 +23,7 @@ react-x/no-children-count ## Description -Prevents the use of `Children.count` from the `react` package. +Disallow the use of `Children.count` from the `react` package. Using `Children` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives). diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.ts index bfa66a7603..2c556a7b69 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'Children.count'", + description: "Disallow `Children.count`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md index ef03f565a3..baefd5fafa 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md @@ -23,7 +23,7 @@ react-x/no-children-for-each ## Description -Prevents the use of `Children.forEach` from the `react` package. +Disallow the use of `Children.forEach` from the `react` package. Using `Children` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives). diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.ts index 518b464db1..0216e44d6b 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'Children.forEach'", + description: "Disallow 'Children.forEach'.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md index 6e2882cd48..db72ac916d 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md @@ -23,7 +23,7 @@ react-x/no-children-map ## Description -Prevents the use of `Children.map` from the `react` package. +Disallow the use of `Children.map` from the `react` package. Using `Children` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives). diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.ts index 0ed8fb113e..3d2cd148be 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'Children.map'", + description: "Disallow `Children.map`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md index 20afe73b7c..93f0d31b7e 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md @@ -23,7 +23,7 @@ react-x/no-children-only ## Description -Prevents the use of `Children.only` from the `react` package. +Disallow the use of `Children.only` from the `react` package. Using `Children` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives). diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.ts index d2dd7ee11c..06b2f62b5f 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'Children.only'", + description: "Disallow `Children.only`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.md index da61a3a16a..8ec93fac8c 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.md @@ -16,7 +16,7 @@ react-x/no-children-prop ## Description -Disallows passing `children` as a prop. +Disallow passing `children` as a prop. Most of the time, `children` should be actual `children`, not passed in as a `prop`. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.ts index d546d8b7d6..883afdd9d9 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow passing 'children' as props", + description: "Disallow passing `children` as a prop.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md index 5ba174f0e2..6ee4cd0902 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md @@ -23,7 +23,7 @@ react-x/no-children-to-array ## Description -Prevents the use of `Children.toArray` from the `react` package. +Disallow the use of `Children.toArray` from the `react` package. Using `Children.toArray` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives). diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.ts index b994d4358d..65e2aca88d 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'Children.toArray'", + description: "Disallow `Children.toArray`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md index ac20eb63bd..7e084bdd4a 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md @@ -23,7 +23,7 @@ react-x/no-class-component ## Description -Prevents the use of class components. +Disallow class components. Component is the base class for the React components defined as JavaScript classes. Class components are still supported by React, but we don’t recommend using them in new code. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.ts index 540e96e491..31e70bb989 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using class components", + description: "Disallow class components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md index 75ed85f8dc..17c0f3d4c1 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md @@ -23,7 +23,7 @@ react-x/no-clone-element ## Description -Disallows the use of `cloneElement`. +Disallow `cloneElement`. Using cloneElement is uncommon and can lead to fragile code. This also makes it harder to trace the data flow. Try the [alternatives](https://react.dev/reference/react/cloneElement#alternatives) instead. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.ts index 6433c5e1df..5e71b63c51 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'cloneElement'", + description: "Disallow `cloneElement`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.ts index 9995566a25..d97b9d4daf 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow comments from being inserted as text nodes", + description: "Prevents comments from being inserted as text nodes.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-complex-conditional-rendering.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-complex-conditional-rendering.md index cc8b83bde6..6c6d4f3c7b 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-complex-conditional-rendering.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-complex-conditional-rendering.md @@ -16,7 +16,7 @@ react-x/no-complex-conditional-rendering ## Description -Warns when conditional rendering is too complex. +Disallow complex conditional rendering in JSX expressions. ## Examples diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-complex-conditional-rendering.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-complex-conditional-rendering.ts index 7306a3b929..bcebd32d03 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-complex-conditional-rendering.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-complex-conditional-rendering.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow complex conditional rendering", + description: "Disallow complex conditional rendering in JSX expressions.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.ts index fdafad05e6..3e69ba4dcb 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.ts @@ -26,7 +26,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replace usages of 'componentWillMount' with 'UNSAFE_componentWillMount'", + description: "Replace usages of `componentWillMount` with `UNSAFE_componentWillMount`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.ts index 06214ad01e..5dbf422730 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.ts @@ -26,7 +26,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replace usages of 'componentWillReceiveProps' with 'UNSAFE_componentWillReceiveProps'", + description: "Replace usages of `componentWillReceiveProps` with `UNSAFE_componentWillReceiveProps`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.ts index f03bf2e6d2..a0d9ec9d09 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.ts @@ -26,7 +26,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replace usages of 'componentWillUpdate' with 'UNSAFE_componentWillUpdate'", + description: "Replace usages of `componentWillUpdate` with `UNSAFE_componentWillUpdate`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.ts index 028afc7839..5eb6c88db6 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.ts @@ -20,7 +20,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replace usages of '' with ''", + description: "Replace usages of `` with ``.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.md index 52a3474fa1..22a5e75141 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.md @@ -23,7 +23,7 @@ react-x/no-create-ref ## Description -Prevents usage of `createRef()` in function components. +Disallow `createRef` in function components. `createRef()` is a legacy API that is not recommended for use in new code. Instead, prefer using `useRef()` with function components. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.ts index bba2b39d8b..83b50853ce 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.ts @@ -16,7 +16,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'createRef' in function components", + description: "Disallow `createRef` in function components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-default-props.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-default-props.md index b858f64b76..dc24e43225 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-default-props.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-default-props.md @@ -23,7 +23,7 @@ react-x/no-default-props ## Description -Disallows using `defaultProps` property in favor of ES6 default parameters. +Disallow `defaultProps` property in favor of ES6 default parameters. The `defaultProps` will be removed from functional components in React 19 in place of ES6 default parameters. If you’re using `defaultProps`, it is recommend to migrate to ES6 default parameters. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-default-props.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-default-props.ts index 7bcfadc657..4327a63449 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-default-props.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-default-props.ts @@ -18,7 +18,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'defaultProps' property in components", + description: "Disallow `defaultProps` property in favor of ES6 default parameters.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.md index a48ad2b0d8..8b9c610b81 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.md @@ -23,7 +23,7 @@ react-x/no-direct-mutation-state ## Description -Disallows direct mutation of `this.state`. +Disallow direct mutation of `this.state`. NEVER mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.ts index ac014c1072..05042518ec 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.ts @@ -27,7 +27,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow direct mutation of state", + description: "Disallow direct mutation of `this.state`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.md index e373133042..7fac330174 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.md @@ -21,7 +21,7 @@ react-x/no-duplicate-jsx-props ## Description -This rule prevents the use of duplicate props in JSX elements. +Disallow duplicate props in JSX elements. ## Examples diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.ts index 9fe621ddcd..e7d10d257a 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow duplicate props", + description: "Disallow duplicate props in JSX elements.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.md index bd62fa06d0..564f3efdc5 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.md @@ -23,7 +23,7 @@ react-x/no-duplicate-key ## Description -Prevents duplicate `key` on elements in the same array or a list of `children`. +Disallow duplicate `key` on elements in the same array or a list of `children`. React uses keys to identify elements in an array. If two elements have the same key, React will not be able to distinguish them. This can lead to issues with state and rendering. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.ts index e0d5b91daa..7f2598067c 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.ts @@ -23,7 +23,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow duplicate keys when rendering list", + description: "Disallow duplicate `key` on elements in the same array or a list of `children`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts index c3c7507ef8..2c67adaaf1 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.ts @@ -24,7 +24,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replace usages of 'forwardRef' with passing 'ref' as a prop", + description: "Replaces usages of `forwardRef` with passing `ref` as a prop.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.ts index 89ab17fbc7..9e8c3b2236 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow implicit 'key' props", + description: "Prevents `key` from not being explicitly specified (e.g. spreading `key` from objects).", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.ts index 36182367f9..68b1409d55 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.ts @@ -177,7 +177,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow problematic leaked values from being rendered", + description: "Prevents problematic leaked values from being rendered.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.md index 409a2163cc..614b672382 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.md @@ -16,7 +16,7 @@ react-x/no-missing-component-display-name ## Description -Enforces that all components have a `displayName` or `name` which React can use as its `displayName` in devtools. +Enforces that all components have a `displayName` which can be used in devtools. When defining a React component, if you specify its component name in a way that React can't infer its `displayName`, it will show up as an `anonymous` component in devtools, which makes debugging more difficult. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.ts index a6427d1814..a1d199224a 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.ts @@ -16,7 +16,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "require 'displayName' for 'memo' and 'forwardRef' components", + description: "Enforces that all components have a `displayName` which can be used in devtools.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.md index 6b450c4f78..e3a397708e 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.md @@ -16,7 +16,7 @@ react-x/no-missing-context-display-name ## Description -Enforces that all contexts have a `displayName` which React can use as its `displayName` in devtools. +Enforces that all contexts have a `displayName` which can be used in devtools. ## Examples diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.ts index 9286f14a4c..8e4aec0533 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.ts @@ -22,7 +22,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "require 'displayName' for contexts.", + description: "Enforces that all contexts have a `displayName` which can be used in devtools.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.md index c2d90c8145..8337b73b3c 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.md @@ -23,7 +23,7 @@ react-x/no-missing-key ## Description -Prevents missing `key` on items in list rendering. +Disallow missing `key` on items in list rendering. React needs keys to identify items in the list. If you don’t specify a key, React will use the array index as a key, which often leads to subtle and confusing bugs. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.ts index fbe95d96a4..454526a72b 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.ts @@ -20,7 +20,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "require 'key' when rendering list", + description: "Disallow missing `key` on items in list rendering.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-nested-component-definitions.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-nested-component-definitions.ts index 026282ed39..0fbe7fcdc0 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-nested-component-definitions.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-nested-component-definitions.ts @@ -28,7 +28,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "prevents nesting component definitions inside other components", + description: "Disallow nesting component definitions inside other components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-prop-types.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-prop-types.md index e5e9fc65c7..9113c9adeb 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-prop-types.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-prop-types.md @@ -23,7 +23,7 @@ react-x/no-prop-types ## Description -Disallows using `propTypes` property in favor of TypeScript or another type-checking solution. +Disallow `propTypes` in favor of TypeScript or another type-checking solution. `PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings). diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-prop-types.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-prop-types.ts index 4a176e741a..31196d1944 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-prop-types.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-prop-types.ts @@ -18,7 +18,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'propTypes' property in components", + description: "Disallow `propTypes` in favor of TypeScript or another type-checking solution.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.md index 63f9fb9077..318b82eed4 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.md @@ -23,7 +23,7 @@ react-x/no-redundant-should-component-update ## Description -Prevents usage of `shouldComponentUpdate` when extending `React.PureComponent`. +Disallow `shouldComponentUpdate` when extending `React.PureComponent`. While having `shouldComponentUpdate` will still work, it becomes pointless to extend `React.PureComponent`. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.ts index c04fc110ab..01109faa90 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.ts @@ -24,7 +24,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'shouldComponentUpdate' in class component extends 'React.PureComponent'", + description: "Disallow `shouldComponentUpdate` when extending `React.PureComponent`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.md index 47ce10c4b9..a82cc6ad1c 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.md @@ -23,7 +23,7 @@ react-x/no-set-state-in-component-did-mount ## Description -Disallows calling `this.setState` in `componentDidMount` outside of functions, such as callbacks. +Disallow calling `this.setState` in `componentDidMount` outside of functions, such as callbacks. Updating the state after a component mount will trigger a second `render()` call and can lead to property/layout thrashing. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.ts index 4dd88fa1bc..ad1224cca1 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.ts @@ -24,7 +24,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'setState' in 'componentDidMount'", + description: "Disallow calling `this.setState` in `componentDidMount` outside of functions, such as callbacks.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update.ts index 8ca19365fb..17854faa38 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update.ts @@ -24,7 +24,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'setState' in 'componentDidUpdate'", + description: "Disallows calling `this.setState` in `componentDidUpdate` outside of functions, such as callbacks.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update.ts index 2c65917e59..9d8fe38f52 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update.ts @@ -24,7 +24,8 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'setState' in 'componentWillUpdate'", + description: + "Disallows calling `this.setState` in `componentWillUpdate` outside of functions, such as callbacks.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.md index 1b4e7f7a5a..b1be88059a 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.md @@ -23,7 +23,7 @@ react-x/no-string-refs ## Description -Disallows using deprecated `string refs`. +Disallow deprecated string `refs`. String refs are deprecated in React. Use callback refs instead. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.ts index dd6860d514..6749f2bbd4 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.ts @@ -31,7 +31,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using deprecated string refs", + description: "Disallow deprecated string `refs`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount.ts index 35c216998d..07697ca067 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount.ts @@ -24,7 +24,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'UNSAFE_componentWillMount'", + description: "Warns the usage of `UNSAFE_componentWillMount` in class components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props.ts index 812af862b6..e1ddb63ea3 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props.ts @@ -24,7 +24,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'UNSAFE_componentWillReceiveProps'", + description: "Warns the usage of `UNSAFE_componentWillReceiveProps` in class components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update.ts index 439f6f27df..0022977512 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update.ts @@ -24,7 +24,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using 'UNSAFE_componentWillUpdate'", + description: "Warns the usage of `UNSAFE_componentWillUpdate` in class components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.ts index 051645b2dd..1afacec823 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.ts @@ -20,7 +20,8 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow passing constructed values to context providers", + description: + "Prevents non-stable values (i.e. object literals) from being used as a value for `Context.Provider`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.md index cb28ba6cc5..56acd64d00 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.md @@ -23,7 +23,7 @@ react-x/no-unstable-default-props ## Description -Prevents usage of referential-type values as default props in object destructuring. +Prevents using referential-type values as default props in object destructuring. When using object destructuring syntax you can set the default value for a given property if it does not exist. If you set the default value to one of the values that is compared by identity, then each time the destructuring is evaluated, the JS engine will create a new, distinct value in the destructured variable. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.ts index f9ea09adbb..51b0e3a064 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.ts @@ -26,7 +26,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow using unstable value as default param in function component", + description: "Prevents using referential-type values as default props in object destructuring.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members.ts index 9188fbca8d..f5d31ea1b4 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members.ts @@ -57,7 +57,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow unused class component members", + description: "Warns unused class component methods and properties.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-state.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-state.ts index 8bad043e7f..ae31ff6787 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-state.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-state.ts @@ -36,7 +36,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "disallow unused state of class component", + description: "Warns unused class component state.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-use-context.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-use-context.ts index f065720e84..7e6c0855ae 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-use-context.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-use-context.ts @@ -22,7 +22,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "replace usages of 'useContext' with 'use'", + description: "Replaces usages of `useContext` with `use`.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-forward-ref.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-forward-ref.md index 2a801d46c4..619e32fb45 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-forward-ref.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-forward-ref.md @@ -23,7 +23,7 @@ react-x/no-useless-forward-ref ## Description -Enforces that `forwardRef` is only used when a `ref` parameter is declared. +Disallow useless `forwardRef` calls on components that don't use `ref`s. This rule enforces that: diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-forward-ref.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-forward-ref.ts index 91fedb9fe6..69f81ee654 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-forward-ref.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-forward-ref.ts @@ -17,7 +17,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "require a 'ref' parameter to be set when using 'forwardRef'", + description: "Disallow useless `forwardRef` calls on components that don't use `ref`s.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.md index 7359e0c65a..8dac993dcc 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.md @@ -18,16 +18,9 @@ react-x/no-useless-fragment `🔧` `⚙️` -**Presets** - -- `core` -- `recommended` -- `recommended-typescript` -- `recommended-type-checked` - ## Description -Prevents the use of useless fragments. +Disallow useless fragment elements. A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a [keyed fragment](https://react.dev/reference/react/Fragment#caveats). diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.ts index bd01d784b2..731cf75be9 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.ts @@ -26,6 +26,46 @@ const defaultOptions = [{ allowExpressions: true, }] as const satisfies Options; +export default createRule({ + meta: { + type: "problem", + defaultOptions: [...defaultOptions], + docs: { + description: "Disallow useless fragment elements.", + }, + fixable: "code", + messages: { + uselessFragment: "A fragment {{reason}} is useless.", + }, + schema: [{ + type: "object", + additionalProperties: false, + properties: { + allowExpressions: { + type: "boolean", + description: "Allow fragments with a single expression child", + }, + }, + }], + }, + name: RULE_NAME, + create, + defaultOptions, +}); + +export function create(context: RuleContext, [option]: Options): RuleListener { + const { allowExpressions = true } = option; + return { + JSXElement(node) { + if (!JSX.isFragmentElement(node)) return; + doCheck(context, node, allowExpressions); + }, + JSXFragment(node) { + doCheck(context, node, allowExpressions); + }, + }; +} + function trimLikeReact(text: string) { const leadingSpaces = /^\s*/.exec(text)?.[0] ?? ""; const trailingSpaces = /\s*$/.exec(text)?.[0] ?? ""; @@ -161,43 +201,3 @@ function doCheck( } return; } - -export default createRule({ - meta: { - type: "problem", - defaultOptions: [...defaultOptions], - docs: { - description: "disallow useless fragments", - }, - fixable: "code", - messages: { - uselessFragment: "A fragment {{reason}} is useless.", - }, - schema: [{ - type: "object", - additionalProperties: false, - properties: { - allowExpressions: { - type: "boolean", - description: "Allow fragments with a single expression child", - }, - }, - }], - }, - name: RULE_NAME, - create, - defaultOptions, -}); - -export function create(context: RuleContext, [option]: Options): RuleListener { - const { allowExpressions = true } = option; - return { - JSXElement(node) { - if (!JSX.isFragmentElement(node)) return; - doCheck(context, node, allowExpressions); - }, - JSXFragment(node) { - doCheck(context, node, allowExpressions); - }, - }; -} diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.md b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.md index 3d052b9192..557ffa2d7c 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.md @@ -16,7 +16,7 @@ react-x/prefer-destructuring-assignment ## Description -Enforces the use of destructuring assignment over property assignment. +Enforces destructuring assignment for component props and context. ## Examples diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.ts index fd8fa728bc..e88589ffd7 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.ts @@ -25,7 +25,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce using destructuring assignment in component props and context", + description: "Enforces destructuring assignment for component props and context.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-react-namespace-import.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-react-namespace-import.ts index e2aa364eb8..7890015bd2 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-react-namespace-import.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-react-namespace-import.ts @@ -18,7 +18,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce React is imported via a namespace import", + description: "Enforces React is imported via a namespace import.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.md b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.md index de034367b9..d391450eb5 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.md @@ -20,7 +20,7 @@ react-x/prefer-read-only-props ## Description -This rule enforces that function components props are read-only. +Enforces read-only props in components. Props are read-only snapshots in time: every render receives a new version of props. You can't change props. This rule enforces that you don't accidentally mutate props. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.ts index 6cc4a1bd39..f40ca2703b 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.ts @@ -19,7 +19,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce read-only props in components", + description: "Enforces read-only props in components.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: { diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.md b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.md index 5d3a37eecd..b3429c8fc2 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.md @@ -20,7 +20,7 @@ react-x/prefer-shorthand-boolean ## Description -Enforces the use of shorthand syntax for boolean attributes. +Enforces shorthand syntax for boolean attributes. A **safe** auto-fix is available for this rule. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.ts index 652fdb1a0a..3747e8fad8 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.ts @@ -19,7 +19,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce the use of shorthand syntax for boolean attributes", + description: "Enforces shorthand syntax for boolean attributes.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.md b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.md index 04f22fcf1b..92d1a125fd 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.md +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.md @@ -20,7 +20,7 @@ react-x/prefer-shorthand-fragment ## Description -Enforces the use of shorthand syntax for fragments. +Enforces shorthand syntax for fragments. A **safe** auto-fix is available for this rule. diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts index bec4ea41d0..13413b2ce3 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts @@ -18,7 +18,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "enforce the use of shorthand syntax for fragments", + description: "Enforces shorthand syntax for fragments.", [Symbol.for("rule_features")]: RULE_FEATURES, }, fixable: "code", diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/use-jsx-vars.ts b/packages/plugins/eslint-plugin-react-x/src/rules/use-jsx-vars.ts index 276a264185..51e3799214 100644 --- a/packages/plugins/eslint-plugin-react-x/src/rules/use-jsx-vars.ts +++ b/packages/plugins/eslint-plugin-react-x/src/rules/use-jsx-vars.ts @@ -15,7 +15,7 @@ export default createRule<[], MessageID>({ meta: { type: "problem", docs: { - description: "marks variables used in JSX as used", + description: "Marks variables used in JSX as used.", [Symbol.for("rule_features")]: RULE_FEATURES, }, messages: {