[Docs] document which rules provide suggestions

bmish · ljharb · commit bb999c2e3d77 · 2022-08-18T18:00:38.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,7 +36,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [Refactor] [`jsx-closing-bracket-location`], [`jsx-no-bind`]: fix eslint issues ([#3351][] @caroline223)
 * [Tests] [`function-component-definition`]: add passing test cases ([#3355][] @TildaDares)
 * [Docs] [`jsx-no-target-blank`]: Fix link to link-type-noreferrer ([#3319][] @Luccasoli)
+* [Docs] document which rules provide suggestions ([#3359][] @bmish)
 
+[#3359]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3359
 [#3355]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3355
 [#3353]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3353
 [#3351]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3351
diff --git a/README.md b/README.md
diff --git a/docs/rules/destructuring-assignment.md b/docs/rules/destructuring-assignment.md
@@ -1,5 +1,7 @@
 # Enforce consistent usage of destructuring assignment of props, state, and context (react/destructuring-assignment)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 Rule can be set to either of `always` or `never`;
 ```js
 "react/destructuring-assignment": [<enabled>, 'always']
diff --git a/docs/rules/function-component-definition.md b/docs/rules/function-component-definition.md
@@ -1,8 +1,8 @@
 # Enforce a specific function type for function components (react/function-component-definition)
 
-This option enforces a specific function type for function components.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+This option enforces a specific function type for function components.
 
 ## Rule Details
 
diff --git a/docs/rules/hook-use-state.md b/docs/rules/hook-use-state.md
@@ -1,5 +1,7 @@
 # Ensure destructuring and symmetric naming of useState hook value and setter variables (react/hook-use-state)
 
+💡 This rule provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
 ## Rule Details
 
 This rule checks whether the value and setter variables destructured from a `React.useState()` call are named symmetrically.
diff --git a/docs/rules/jsx-boolean-value.md b/docs/rules/jsx-boolean-value.md
@@ -1,8 +1,8 @@
 # Enforce boolean attributes notation in JSX (react/jsx-boolean-value)
 
-[When using a boolean attribute in JSX](https://facebook.github.io/react/docs/jsx-in-depth.html#boolean-attributes), you can set the attribute value to `true` or omit the value. This rule will enforce one or the other to keep consistency in your code.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+[When using a boolean attribute in JSX](https://facebook.github.io/react/docs/jsx-in-depth.html#boolean-attributes), you can set the attribute value to `true` or omit the value. This rule will enforce one or the other to keep consistency in your code.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-closing-bracket-location.md b/docs/rules/jsx-closing-bracket-location.md
@@ -1,8 +1,8 @@
 # Validate closing bracket location in JSX (react/jsx-closing-bracket-location)
 
-Enforce the closing bracket location for JSX multiline elements.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Enforce the closing bracket location for JSX multiline elements.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-closing-tag-location.md b/docs/rules/jsx-closing-tag-location.md
@@ -1,8 +1,8 @@
 # Validate closing tag location in JSX (react/jsx-closing-tag-location)
 
-Enforce the closing tag location for multiline JSX elements.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Enforce the closing tag location for multiline JSX elements.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-curly-brace-presence.md b/docs/rules/jsx-curly-brace-presence.md
@@ -1,5 +1,7 @@
 # Enforce curly braces or disallow unnecessary curly braces in JSX props and/or children. (react/jsx-curly-brace-presence)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 This rule allows you to enforce curly braces or disallow unnecessary curly braces in JSX props and/or children.
 
 For situations where JSX expressions are unnecessary, please refer to [the React doc](https://facebook.github.io/react/docs/jsx-in-depth.html) and [this page about JSX gotchas](https://github.com/facebook/react/blob/v15.4.0-rc.3/docs/docs/02.3-jsx-gotchas.md#html-entities).
@@ -175,7 +177,7 @@ Examples of **correct** code for this rule, even when configured with `"never"`:
  */
 <App>{' '}</App>
 <App>{'     '}</App>
-<App>{/* comment */ <Bpp />}</App> // the comment makes the container necessary 
+<App>{/* comment */ <Bpp />}</App> // the comment makes the container necessary
 ```
 
 ## When Not To Use It
diff --git a/docs/rules/jsx-curly-newline.md b/docs/rules/jsx-curly-newline.md
@@ -1,8 +1,8 @@
 # Enforce linebreaks in curly braces in JSX attributes and expressions. (react/jsx-curly-newline)
 
-Many style guides require or disallow newlines inside of jsx curly expressions.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Many style guides require or disallow newlines inside of jsx curly expressions.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-curly-spacing.md b/docs/rules/jsx-curly-spacing.md
@@ -1,8 +1,8 @@
 # Enforce or disallow spaces inside of curly braces in JSX attributes and expressions. (react/jsx-curly-spacing)
 
-While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-equals-spacing.md b/docs/rules/jsx-equals-spacing.md
@@ -1,8 +1,8 @@
 # Enforce or disallow spaces around equal signs in JSX attributes. (react/jsx-equals-spacing)
 
-Some style guides require or disallow spaces around equal signs.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Some style guides require or disallow spaces around equal signs.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-first-prop-new-line.md b/docs/rules/jsx-first-prop-new-line.md
@@ -1,8 +1,10 @@
 # Configure the position of the first property (react/jsx-first-prop-new-line)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 Ensure correct position of the first property.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line. However, fix does not include indentation. Please rerun lint to correct those errors.
+Note: The fixer does not include indentation. Please rerun lint to correct those errors.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-fragments.md b/docs/rules/jsx-fragments.md
@@ -1,11 +1,11 @@
 # Enforce shorthand or standard form for React fragments (react/jsx-fragments)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 In JSX, a React fragment is created either with `<React.Fragment>...</React.Fragment>`, or, using the shorthand syntax, `<>...</>`. This rule allows you to enforce one way or the other.
 
 Support for fragments was added in React v16.2, so the rule will warn on either of these forms if an older React version is specified in [shared settings][shared_settings].
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
-
 ## Rule Options
 
 ```js
diff --git a/docs/rules/jsx-indent-props.md b/docs/rules/jsx-indent-props.md
@@ -1,8 +1,8 @@
 # Validate props indentation in JSX (react/jsx-indent-props)
 
-This option validates a specific indentation style for props.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+This option validates a specific indentation style for props.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-indent.md b/docs/rules/jsx-indent.md
@@ -1,9 +1,10 @@
 # Validate JSX indentation (react/jsx-indent)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 This option validates a specific indentation style for JSX.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
-Fixer will fix whitespace and tabs indentation.
+Note: The fixer will fix whitespace and tabs indentation.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-max-props-per-line.md b/docs/rules/jsx-max-props-per-line.md
@@ -1,8 +1,10 @@
 # Limit maximum of props on a single line in JSX (react/jsx-max-props-per-line)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 Limiting the maximum of props on a single line can improve readability.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line. However, fix does not include indentation. Please rerun lint to correct those errors.
+Note: The fixer does not include indentation. Please rerun lint to correct those errors.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-newline.md b/docs/rules/jsx-newline.md
@@ -1,6 +1,6 @@
 # Require or prevent a new line after jsx elements and expressions. (react/jsx-newline)
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-no-leaked-render.md b/docs/rules/jsx-no-leaked-render.md
@@ -1,5 +1,7 @@
 # Prevent problematic leaked values from being rendered (react/jsx-no-leaked-render)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 Using the `&&` operator to render some element conditionally in JSX can cause unexpected values being rendered, or even crashing the rendering.
 
 
@@ -16,11 +18,11 @@ const Example = () => {
       {0 && <Something/>}
       {/* React: renders undesired 0 */}
       {/* React Native: crashes 💥 */}
-      
+
       {'' && <Something/>}
       {/* React: renders nothing */}
       {/* React Native: crashes 💥 */}
-      
+
       {NaN && <Something/>}
       {/* React: renders undesired NaN */}
       {/* React Native: crashes 💥 */}
diff --git a/docs/rules/jsx-no-target-blank.md b/docs/rules/jsx-no-target-blank.md
@@ -1,5 +1,7 @@
 # Prevent usage of unsafe `target='_blank'` (react/jsx-no-target-blank)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 When creating a JSX element that has an `a` tag, it is often desired to have the link open in a new tab using the `target='_blank'` attribute. Using this attribute unaccompanied by `rel='noreferrer'`, however, is a severe security vulnerability (see [noreferrer docs](https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer) and [noopener docs](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener) for more details)
 This rules requires that you accompany `target='_blank'` attributes with `rel='noreferrer'`.
 
diff --git a/docs/rules/jsx-no-useless-fragment.md b/docs/rules/jsx-no-useless-fragment.md
@@ -1,5 +1,7 @@
 # Disallow unnecessary fragments (react/jsx-no-useless-fragment)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 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://reactjs.org/docs/fragments.html#keyed-fragments).
 
 **Fixable:** This rule is sometimes automatically fixable using the `--fix` flag on the command line.
diff --git a/docs/rules/jsx-one-expression-per-line.md b/docs/rules/jsx-one-expression-per-line.md
@@ -1,9 +1,10 @@
 # One JSX Element Per Line (react/jsx-one-expression-per-line)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 This option limits every line in JSX to one expression each.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
-Fixer will insert line breaks between any expression that are on the same line.
+Note: The fixer will insert line breaks between any expression that are on the same line.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-props-no-multi-spaces.md b/docs/rules/jsx-props-no-multi-spaces.md
@@ -1,8 +1,8 @@
 # Disallow multiple spaces between inline JSX props (react/jsx-props-no-multi-spaces)
 
-Enforces that there is exactly one space between all attributes and after tag name and the first attribute in the same line.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Enforces that there is exactly one space between all attributes and after tag name and the first attribute in the same line.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-sort-props.md b/docs/rules/jsx-sort-props.md
@@ -1,8 +1,8 @@
 # Enforce props alphabetical sorting (react/jsx-sort-props)
 
-Some developers prefer to sort props names alphabetically to be able to find necessary props easier at the later time. Others feel that it adds complexity and becomes burden to maintain.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Some developers prefer to sort props names alphabetically to be able to find necessary props easier at the later time. Others feel that it adds complexity and becomes burden to maintain.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-space-before-closing.md b/docs/rules/jsx-space-before-closing.md
@@ -1,11 +1,11 @@
 # Validate spacing before closing bracket in JSX (react/jsx-space-before-closing)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 **Deprecation notice**: This rule is deprecated. Please use the `"beforeSelfClosing"` option of the [jsx-tag-spacing](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) rule instead.
 
 Enforce or forbid spaces before the closing bracket of self-closing JSX elements.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
-
 ## Rule Details
 
 This rule checks if there is one or more spaces before the closing bracket of self-closing JSX elements.
diff --git a/docs/rules/jsx-tag-spacing.md b/docs/rules/jsx-tag-spacing.md
@@ -1,8 +1,8 @@
 # Validate whitespace in and around the JSX opening and closing brackets (react/jsx-tag-spacing)
 
-Enforce or forbid spaces after the opening bracket, before the closing bracket, before the closing bracket of self-closing elements, and between the angle bracket and slash of JSX closing or self-closing elements.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Enforce or forbid spaces after the opening bracket, before the closing bracket, before the closing bracket of self-closing elements, and between the angle bracket and slash of JSX closing or self-closing elements.
 
 ## Rule Details
 
diff --git a/docs/rules/jsx-wrap-multilines.md b/docs/rules/jsx-wrap-multilines.md
@@ -1,8 +1,8 @@
 # Prevent missing parentheses around multiline JSX (react/jsx-wrap-multilines)
 
-Wrapping multiline JSX in parentheses can improve readability and/or convenience.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Wrapping multiline JSX in parentheses can improve readability and/or convenience.
 
 ## Rule Details
 
diff --git a/docs/rules/no-arrow-function-lifecycle.md b/docs/rules/no-arrow-function-lifecycle.md
@@ -1,5 +1,7 @@
 # Lifecycle methods should be methods on the prototype, not class fields (react/no-arrow-function-lifecycle)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 It is not neccessary to use arrow function for lifecycle methods. This makes things harder to test, conceptually less performant (although in practice, performance will not be affected, since most engines will optimize efficiently), and can break hot reloading patterns.
 
 ## Rule Details
diff --git a/docs/rules/no-invalid-html-attribute.md b/docs/rules/no-invalid-html-attribute.md
@@ -1,5 +1,7 @@
 # Prevent usage of invalid attributes (react/no-invalid-html-attribute)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 Some HTML elements have a specific set of valid values for some attributes.
 For instance the elements: `a`, `area`, `link`, or `form` all have an attribute called `rel`.
 There is a fixed list of values that have any meaning for this attribute on these tags (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)).
diff --git a/docs/rules/no-unknown-property.md b/docs/rules/no-unknown-property.md
@@ -1,8 +1,8 @@
 # Prevent usage of unknown DOM property (react/no-unknown-property)
 
-In JSX all 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.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+In JSX all 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.
 
 ## Rule Details
 
diff --git a/docs/rules/prefer-read-only-props.md b/docs/rules/prefer-read-only-props.md
@@ -1,5 +1,7 @@
 # Enforce that props are read-only (react/prefer-read-only-props)
 
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
+
 Using Flow, one can define types for props. This rule enforces that prop types are read-only (covariant).
 
 ## Rule Details
diff --git a/docs/rules/self-closing-comp.md b/docs/rules/self-closing-comp.md
@@ -1,8 +1,8 @@
 # Prevent extra closing tags for components without children (react/self-closing-comp)
 
-Components without children can be self-closed to avoid unnecessary extra closing tag.
+🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.
 
-**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line.
+Components without children can be self-closed to avoid unnecessary extra closing tag.
 
 ## Rule Details
 
diff --git a/docs/rules/sort-comp.md b/docs/rules/sort-comp.md
@@ -1,8 +1,8 @@
 # Enforce component methods order (react/sort-comp)
 
-When creating React components it is more convenient to always follow the same organisation for method order to help you easily find lifecycle methods, event handlers, etc.
+🔧 This rule is automatically fixable using the [`sort-comp` transform](https://github.com/reactjs/react-codemod/blob/master/transforms/sort-comp.js) in [react-codemod](https://www.npmjs.com/package/react-codemod).
 
-**Fixable:** This rule is automatically fixable using the [`sort-comp` transform](https://github.com/reactjs/react-codemod/blob/master/transforms/sort-comp.js) in [react-codemod](https://www.npmjs.com/package/react-codemod).
+When creating React components it is more convenient to always follow the same organisation for method order to help you easily find lifecycle methods, event handlers, etc.
 
 ## Rule Details
 
diff --git a/markdown.config.js b/markdown.config.js
diff --git a/tests/index.js b/tests/index.js
