diff --git a/docs/rules/display-name.md b/docs/rules/display-name.md index 97aa68bdeb..e3583bb088 100644 --- a/docs/rules/display-name.md +++ b/docs/rules/display-name.md @@ -1,5 +1,7 @@ # Disallow missing displayName in a React component definition (react/display-name) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + DisplayName allows you to name your component. This name is used by React in debugging messages. ## Rule Details diff --git a/docs/rules/jsx-key.md b/docs/rules/jsx-key.md index 17c71c433d..84b4abc85d 100644 --- a/docs/rules/jsx-key.md +++ b/docs/rules/jsx-key.md @@ -1,5 +1,7 @@ # Disallow missing `key` props in iterators/collection literals (react/jsx-key) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + Warn if an element that likely requires a `key` prop--namely, one present in an array literal or an arrow function expression. diff --git a/docs/rules/jsx-no-comment-textnodes.md b/docs/rules/jsx-no-comment-textnodes.md index 4a1f1ff310..e72ffb3afd 100644 --- a/docs/rules/jsx-no-comment-textnodes.md +++ b/docs/rules/jsx-no-comment-textnodes.md @@ -1,5 +1,7 @@ # Disallow comments from being inserted as text nodes (react/jsx-no-comment-textnodes) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + This rule prevents comment strings (e.g. beginning with `//` or `/*`) from being accidentally injected as a text node in JSX statements. diff --git a/docs/rules/jsx-no-duplicate-props.md b/docs/rules/jsx-no-duplicate-props.md index 22c462fefd..f2fa5739a6 100644 --- a/docs/rules/jsx-no-duplicate-props.md +++ b/docs/rules/jsx-no-duplicate-props.md @@ -1,5 +1,7 @@ # Disallow duplicate properties in JSX (react/jsx-no-duplicate-props) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + Creating JSX elements with duplicate props can cause unexpected behavior in your application. ## Rule Details diff --git a/docs/rules/jsx-no-target-blank.md b/docs/rules/jsx-no-target-blank.md index 0caa0a8024..5ac218d2fe 100644 --- a/docs/rules/jsx-no-target-blank.md +++ b/docs/rules/jsx-no-target-blank.md @@ -1,5 +1,7 @@ # Disallow `target="_blank"` attribute without `rel="noreferrer"` (react/jsx-no-target-blank) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + 🔧 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) diff --git a/docs/rules/jsx-no-undef.md b/docs/rules/jsx-no-undef.md index 7d6b2f10b5..85bc17f96b 100644 --- a/docs/rules/jsx-no-undef.md +++ b/docs/rules/jsx-no-undef.md @@ -1,5 +1,7 @@ # Disallow undeclared variables in JSX (react/jsx-no-undef) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + This rule helps locate potential ReferenceErrors resulting from misspellings or missing components. ## Rule Details diff --git a/docs/rules/jsx-space-before-closing.md b/docs/rules/jsx-space-before-closing.md index 7e192a2b7b..23e586c2ff 100644 --- a/docs/rules/jsx-space-before-closing.md +++ b/docs/rules/jsx-space-before-closing.md @@ -1,9 +1,9 @@ # Enforce 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. +🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Enforce or forbid spaces before the closing bracket of self-closing JSX elements. ## Rule Details diff --git a/docs/rules/jsx-uses-react.md b/docs/rules/jsx-uses-react.md index df88fc3337..34de70e88d 100644 --- a/docs/rules/jsx-uses-react.md +++ b/docs/rules/jsx-uses-react.md @@ -1,5 +1,7 @@ # Disallow React to be incorrectly marked as unused (react/jsx-uses-react) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + JSX expands to a call to `React.createElement`, a file which includes `React` but only uses JSX should consider the `React` variable as used. diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md index b5acbf8c2e..039b1afad9 100644 --- a/docs/rules/jsx-uses-vars.md +++ b/docs/rules/jsx-uses-vars.md @@ -1,5 +1,7 @@ # Disallow variables used in JSX to be incorrectly marked as unused (react/jsx-uses-vars) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + Since 0.17.0 the `eslint` `no-unused-vars` rule does not detect variables used in JSX ([see details](https://eslint.org/blog/2015/03/eslint-0.17.0-released#changes-to-jsxreact-handling)). This rule will find variables used in JSX and mark them as used. This rule only has an effect when the `no-unused-vars` rule is enabled. diff --git a/docs/rules/no-children-prop.md b/docs/rules/no-children-prop.md index cca47f152a..74c1ca77f2 100644 --- a/docs/rules/no-children-prop.md +++ b/docs/rules/no-children-prop.md @@ -1,5 +1,7 @@ # Disallow passing of children as props (react/no-children-prop) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + Children should always be actual children, not passed in as a prop. When using JSX, the children should be nested between the opening and closing diff --git a/docs/rules/no-danger-with-children.md b/docs/rules/no-danger-with-children.md index ec661df979..a345e2dda5 100644 --- a/docs/rules/no-danger-with-children.md +++ b/docs/rules/no-danger-with-children.md @@ -1,5 +1,7 @@ # Disallow when a DOM element is using both children and dangerouslySetInnerHTML (react/no-danger-with-children) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + This rule helps prevent problems caused by using children and the dangerouslySetInnerHTML prop at the same time. React will throw a warning if this rule is ignored. diff --git a/docs/rules/no-deprecated.md b/docs/rules/no-deprecated.md index 078d27b796..b2f8347963 100644 --- a/docs/rules/no-deprecated.md +++ b/docs/rules/no-deprecated.md @@ -1,5 +1,7 @@ # Disallow usage of deprecated methods (react/no-deprecated) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + Several methods are deprecated between React versions. This rule will warn you if you try to use a deprecated method. Use the [shared settings](/README.md#configuration) to specify the React version. ## Rule Details diff --git a/docs/rules/no-direct-mutation-state.md b/docs/rules/no-direct-mutation-state.md index f1862b39e2..8bc8a24762 100644 --- a/docs/rules/no-direct-mutation-state.md +++ b/docs/rules/no-direct-mutation-state.md @@ -1,5 +1,7 @@ # Disallow direct mutation of this.state (react/no-direct-mutation-state) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + 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/docs/rules/no-find-dom-node.md b/docs/rules/no-find-dom-node.md index f95bbec7a7..c04861e02f 100644 --- a/docs/rules/no-find-dom-node.md +++ b/docs/rules/no-find-dom-node.md @@ -1,5 +1,7 @@ # Disallow usage of findDOMNode (react/no-find-dom-node) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + Facebook will eventually deprecate `findDOMNode` as it blocks certain improvements in React in the future. It is recommended to use callback refs instead. See [Dan Abramov comments and examples](https://github.com/jsx-eslint/eslint-plugin-react/issues/678#issue-165177220). diff --git a/docs/rules/no-is-mounted.md b/docs/rules/no-is-mounted.md index cbf7d7b69d..33c50ad4fe 100644 --- a/docs/rules/no-is-mounted.md +++ b/docs/rules/no-is-mounted.md @@ -1,5 +1,7 @@ # Disallow usage of isMounted (react/no-is-mounted) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and it is on its way to being officially deprecated. [anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html diff --git a/docs/rules/no-render-return-value.md b/docs/rules/no-render-return-value.md index 904d901c8a..fcdcad1332 100644 --- a/docs/rules/no-render-return-value.md +++ b/docs/rules/no-render-return-value.md @@ -1,5 +1,7 @@ # Disallow usage of the return value of ReactDOM.render (react/no-render-return-value) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + > `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://reactjs.org/docs/refs-and-the-dom.html#callback-refs) to the root element. Source: [ReactDOM documentation](https://facebook.github.io/react/docs/react-dom.html#render) diff --git a/docs/rules/no-string-refs.md b/docs/rules/no-string-refs.md index a50fb4efb8..20c9d2292a 100644 --- a/docs/rules/no-string-refs.md +++ b/docs/rules/no-string-refs.md @@ -1,5 +1,7 @@ # Disallow using string references (react/no-string-refs) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + Currently, two ways are supported by React to refer to components. The first way, providing a string identifier, is now considered legacy in the official documentation. The documentation now prefers a second method -- referring to components by setting a property on the `this` object in the reference callback. ## Rule Details diff --git a/docs/rules/no-unescaped-entities.md b/docs/rules/no-unescaped-entities.md index d722b5942d..d9cddd39b1 100644 --- a/docs/rules/no-unescaped-entities.md +++ b/docs/rules/no-unescaped-entities.md @@ -1,5 +1,7 @@ # Disallow unescaped HTML entities from appearing in markup (react/no-unescaped-entities) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + This rule prevents characters that you may have meant as JSX escape characters from being accidentally injected as a text node in JSX statements. diff --git a/docs/rules/no-unknown-property.md b/docs/rules/no-unknown-property.md index 1b1cd43f95..9842d837e3 100644 --- a/docs/rules/no-unknown-property.md +++ b/docs/rules/no-unknown-property.md @@ -1,5 +1,7 @@ # Disallow usage of unknown DOM property (react/no-unknown-property) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + 🔧 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 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. diff --git a/docs/rules/prop-types.md b/docs/rules/prop-types.md index 2afde21e8c..cd8cc5086e 100644 --- a/docs/rules/prop-types.md +++ b/docs/rules/prop-types.md @@ -1,5 +1,7 @@ # Disallow missing props validation in a React component definition (react/prop-types) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + Defining types for component props improves reusability of your components by validating received data. It can warn other developers if they make a mistake while reusing the component with improper data type. diff --git a/docs/rules/react-in-jsx-scope.md b/docs/rules/react-in-jsx-scope.md index 6af904b2c0..bf8ddb1944 100644 --- a/docs/rules/react-in-jsx-scope.md +++ b/docs/rules/react-in-jsx-scope.md @@ -1,5 +1,7 @@ # Disallow missing React when using JSX (react/react-in-jsx-scope) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + When using JSX, `` expands to `React.createElement("a")`. Therefore the `React` variable must be in scope. If you are using the @jsx pragma this rule will check the designated variable and not the `React` one. diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md index 009d8f7628..3aee9c2b78 100644 --- a/docs/rules/require-render-return.md +++ b/docs/rules/require-render-return.md @@ -1,5 +1,7 @@ # Enforce ES5 or ES6 class for returning value in render function (react/require-render-return) +✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config. + When writing the `render` method in a component it is easy to forget to return the JSX content. This rule will warn if the `return` statement is missing. ## Rule Details diff --git a/tests/index.js b/tests/index.js index 06e992abda..cc75da5509 100644 --- a/tests/index.js +++ b/tests/index.js @@ -26,6 +26,7 @@ describe('rule documentation files have the correct content', () => { const MESSAGES = { fixable: '🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.', hasSuggestions: '💡 This rule provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).', + recommended: '✔️ This rule is part of the [recommended](https://github.com/jsx-eslint/eslint-plugin-react#recommended) config.', }; ruleFiles.forEach((ruleName) => { @@ -42,6 +43,11 @@ describe('rule documentation files have the correct content', () => { // Decide which notices should be shown at the top of the doc. const expectedNotices = []; const unexpectedNotices = []; + if (rule.meta.docs.recommended) { + expectedNotices.push('recommended'); + } else { + unexpectedNotices.push('recommended'); + } if (rule.meta.fixable) { expectedNotices.push('fixable'); } else {