diff --git a/CHANGELOG.md b/CHANGELOG.md index a21506cb88..d0a14ddaf9 100644 --- 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 index 51b121b24e..d5045417c3 100644 --- a/README.md +++ b/README.md @@ -112,116 +112,117 @@ Enable the rules that you would like to use. # List of supported rules ✔: Enabled in the [`recommended`](#recommended) configuration.\ -🔧: Fixable with [`eslint --fix`](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems). +🔧: Fixable with [`eslint --fix`](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems).\ +💡: Provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions). -| ✔ | 🔧 | Rule | Description | -| :---: | :---: | :--- | :--- | -| | | [react/boolean-prop-naming](docs/rules/boolean-prop-naming.md) | Enforces consistent naming for boolean props | -| | | [react/button-has-type](docs/rules/button-has-type.md) | Forbid "button" element without an explicit "type" attribute | -| | | [react/default-props-match-prop-types](docs/rules/default-props-match-prop-types.md) | Enforce all defaultProps are defined and not "required" in propTypes. | -| | 🔧 | [react/destructuring-assignment](docs/rules/destructuring-assignment.md) | Enforce consistent usage of destructuring assignment of props, state, and context | -| ✔ | | [react/display-name](docs/rules/display-name.md) | Prevent missing displayName in a React component definition | -| | | [react/forbid-component-props](docs/rules/forbid-component-props.md) | Forbid certain props on components | -| | | [react/forbid-dom-props](docs/rules/forbid-dom-props.md) | Forbid certain props on DOM Nodes | -| | | [react/forbid-elements](docs/rules/forbid-elements.md) | Forbid certain elements | -| | | [react/forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md) | Forbid using another component's propTypes | -| | | [react/forbid-prop-types](docs/rules/forbid-prop-types.md) | Forbid certain propTypes | -| | 🔧 | [react/function-component-definition](docs/rules/function-component-definition.md) | Standardize the way function component get defined | -| | | [react/hook-use-state](docs/rules/hook-use-state.md) | Ensure symmetric naming of useState hook value and setter variables | -| | | [react/iframe-missing-sandbox](docs/rules/iframe-missing-sandbox.md) | Enforce sandbox attribute on iframe elements | -| | | [react/no-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md) | Reports when this.state is accessed within setState | -| | | [react/no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md) | Prevent adjacent inline elements not separated by whitespace. | -| | | [react/no-array-index-key](docs/rules/no-array-index-key.md) | Prevent usage of Array index in keys | -| | 🔧 | [react/no-arrow-function-lifecycle](docs/rules/no-arrow-function-lifecycle.md) | Lifecycle methods should be methods on the prototype, not class fields | -| ✔ | | [react/no-children-prop](docs/rules/no-children-prop.md) | Prevent passing of children as props. | -| | | [react/no-danger](docs/rules/no-danger.md) | Prevent usage of dangerous JSX props | -| ✔ | | [react/no-danger-with-children](docs/rules/no-danger-with-children.md) | Report when a DOM element is using both children and dangerouslySetInnerHTML | -| ✔ | | [react/no-deprecated](docs/rules/no-deprecated.md) | Prevent usage of deprecated methods | -| | | [react/no-did-mount-set-state](docs/rules/no-did-mount-set-state.md) | Prevent usage of setState in componentDidMount | -| | | [react/no-did-update-set-state](docs/rules/no-did-update-set-state.md) | Prevent usage of setState in componentDidUpdate | -| ✔ | | [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md) | Prevent direct mutation of this.state | -| ✔ | | [react/no-find-dom-node](docs/rules/no-find-dom-node.md) | Prevent usage of findDOMNode | -| | 🔧 | [react/no-invalid-html-attribute](docs/rules/no-invalid-html-attribute.md) | Forbid attribute with an invalid values` | -| ✔ | | [react/no-is-mounted](docs/rules/no-is-mounted.md) | Prevent usage of isMounted | -| | | [react/no-multi-comp](docs/rules/no-multi-comp.md) | Prevent multiple component definition per file | -| | | [react/no-namespace](docs/rules/no-namespace.md) | Enforce that namespaces are not used in React elements | -| | | [react/no-redundant-should-component-update](docs/rules/no-redundant-should-component-update.md) | Flag shouldComponentUpdate when extending PureComponent | -| ✔ | | [react/no-render-return-value](docs/rules/no-render-return-value.md) | Prevent usage of the return value of React.render | -| | | [react/no-set-state](docs/rules/no-set-state.md) | Prevent usage of setState | -| ✔ | | [react/no-string-refs](docs/rules/no-string-refs.md) | Prevent string definitions for references and prevent referencing this.refs | -| | | [react/no-this-in-sfc](docs/rules/no-this-in-sfc.md) | Report "this" being used in stateless components | -| | | [react/no-typos](docs/rules/no-typos.md) | Prevent common typos | -| ✔ | | [react/no-unescaped-entities](docs/rules/no-unescaped-entities.md) | Detect unescaped HTML entities, which might represent malformed tags | -| ✔ | 🔧 | [react/no-unknown-property](docs/rules/no-unknown-property.md) | Prevent usage of unknown DOM property | -| | | [react/no-unsafe](docs/rules/no-unsafe.md) | Prevent usage of unsafe lifecycle methods | -| | | [react/no-unstable-nested-components](docs/rules/no-unstable-nested-components.md) | Prevent creating unstable components inside components | -| | | [react/no-unused-class-component-methods](docs/rules/no-unused-class-component-methods.md) | Prevent declaring unused methods of component class | -| | | [react/no-unused-prop-types](docs/rules/no-unused-prop-types.md) | Prevent definitions of unused prop types | -| | | [react/no-unused-state](docs/rules/no-unused-state.md) | Prevent definition of unused state fields | -| | | [react/no-will-update-set-state](docs/rules/no-will-update-set-state.md) | Prevent usage of setState in componentWillUpdate | -| | | [react/prefer-es6-class](docs/rules/prefer-es6-class.md) | Enforce ES5 or ES6 class for React Components | -| | | [react/prefer-exact-props](docs/rules/prefer-exact-props.md) | Prefer exact proptype definitions | -| | 🔧 | [react/prefer-read-only-props](docs/rules/prefer-read-only-props.md) | Require read-only props. | -| | | [react/prefer-stateless-function](docs/rules/prefer-stateless-function.md) | Enforce stateless components to be written as a pure function | -| ✔ | | [react/prop-types](docs/rules/prop-types.md) | Prevent missing props validation in a React component definition | -| ✔ | | [react/react-in-jsx-scope](docs/rules/react-in-jsx-scope.md) | Prevent missing React when using JSX | -| | | [react/require-default-props](docs/rules/require-default-props.md) | Enforce a defaultProps definition for every prop that is not a required prop. | -| | | [react/require-optimization](docs/rules/require-optimization.md) | Enforce React components to have a shouldComponentUpdate method | -| ✔ | | [react/require-render-return](docs/rules/require-render-return.md) | Enforce ES5 or ES6 class for returning value in render function | -| | 🔧 | [react/self-closing-comp](docs/rules/self-closing-comp.md) | Prevent extra closing tags for components without children | -| | | [react/sort-comp](docs/rules/sort-comp.md) | Enforce component methods order | -| | | [react/sort-prop-types](docs/rules/sort-prop-types.md) | Enforce propTypes declarations alphabetical sorting | -| | | [react/state-in-constructor](docs/rules/state-in-constructor.md) | State initialization in an ES6 class component should be in a constructor | -| | | [react/static-property-placement](docs/rules/static-property-placement.md) | Defines where React component static properties should be positioned. | -| | | [react/style-prop-object](docs/rules/style-prop-object.md) | Enforce style prop value is an object | -| | | [react/void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md) | Prevent passing of children to void DOM elements (e.g. `
`). | +| ✔ | 🔧 | 💡 | Rule | Description | +| :---: | :---: | :---: | :--- | :--- | +| | | | [react/boolean-prop-naming](docs/rules/boolean-prop-naming.md) | Enforces consistent naming for boolean props | +| | | | [react/button-has-type](docs/rules/button-has-type.md) | Forbid "button" element without an explicit "type" attribute | +| | | | [react/default-props-match-prop-types](docs/rules/default-props-match-prop-types.md) | Enforce all defaultProps are defined and not "required" in propTypes. | +| | 🔧 | | [react/destructuring-assignment](docs/rules/destructuring-assignment.md) | Enforce consistent usage of destructuring assignment of props, state, and context | +| ✔ | | | [react/display-name](docs/rules/display-name.md) | Prevent missing displayName in a React component definition | +| | | | [react/forbid-component-props](docs/rules/forbid-component-props.md) | Forbid certain props on components | +| | | | [react/forbid-dom-props](docs/rules/forbid-dom-props.md) | Forbid certain props on DOM Nodes | +| | | | [react/forbid-elements](docs/rules/forbid-elements.md) | Forbid certain elements | +| | | | [react/forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md) | Forbid using another component's propTypes | +| | | | [react/forbid-prop-types](docs/rules/forbid-prop-types.md) | Forbid certain propTypes | +| | 🔧 | | [react/function-component-definition](docs/rules/function-component-definition.md) | Standardize the way function component get defined | +| | | 💡 | [react/hook-use-state](docs/rules/hook-use-state.md) | Ensure symmetric naming of useState hook value and setter variables | +| | | | [react/iframe-missing-sandbox](docs/rules/iframe-missing-sandbox.md) | Enforce sandbox attribute on iframe elements | +| | | | [react/no-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md) | Reports when this.state is accessed within setState | +| | | | [react/no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md) | Prevent adjacent inline elements not separated by whitespace. | +| | | | [react/no-array-index-key](docs/rules/no-array-index-key.md) | Prevent usage of Array index in keys | +| | 🔧 | | [react/no-arrow-function-lifecycle](docs/rules/no-arrow-function-lifecycle.md) | Lifecycle methods should be methods on the prototype, not class fields | +| ✔ | | | [react/no-children-prop](docs/rules/no-children-prop.md) | Prevent passing of children as props. | +| | | | [react/no-danger](docs/rules/no-danger.md) | Prevent usage of dangerous JSX props | +| ✔ | | | [react/no-danger-with-children](docs/rules/no-danger-with-children.md) | Report when a DOM element is using both children and dangerouslySetInnerHTML | +| ✔ | | | [react/no-deprecated](docs/rules/no-deprecated.md) | Prevent usage of deprecated methods | +| | | | [react/no-did-mount-set-state](docs/rules/no-did-mount-set-state.md) | Prevent usage of setState in componentDidMount | +| | | | [react/no-did-update-set-state](docs/rules/no-did-update-set-state.md) | Prevent usage of setState in componentDidUpdate | +| ✔ | | | [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md) | Prevent direct mutation of this.state | +| ✔ | | | [react/no-find-dom-node](docs/rules/no-find-dom-node.md) | Prevent usage of findDOMNode | +| | 🔧 | | [react/no-invalid-html-attribute](docs/rules/no-invalid-html-attribute.md) | Forbid attribute with an invalid values` | +| ✔ | | | [react/no-is-mounted](docs/rules/no-is-mounted.md) | Prevent usage of isMounted | +| | | | [react/no-multi-comp](docs/rules/no-multi-comp.md) | Prevent multiple component definition per file | +| | | | [react/no-namespace](docs/rules/no-namespace.md) | Enforce that namespaces are not used in React elements | +| | | | [react/no-redundant-should-component-update](docs/rules/no-redundant-should-component-update.md) | Flag shouldComponentUpdate when extending PureComponent | +| ✔ | | | [react/no-render-return-value](docs/rules/no-render-return-value.md) | Prevent usage of the return value of React.render | +| | | | [react/no-set-state](docs/rules/no-set-state.md) | Prevent usage of setState | +| ✔ | | | [react/no-string-refs](docs/rules/no-string-refs.md) | Prevent string definitions for references and prevent referencing this.refs | +| | | | [react/no-this-in-sfc](docs/rules/no-this-in-sfc.md) | Report "this" being used in stateless components | +| | | | [react/no-typos](docs/rules/no-typos.md) | Prevent common typos | +| ✔ | | | [react/no-unescaped-entities](docs/rules/no-unescaped-entities.md) | Detect unescaped HTML entities, which might represent malformed tags | +| ✔ | 🔧 | | [react/no-unknown-property](docs/rules/no-unknown-property.md) | Prevent usage of unknown DOM property | +| | | | [react/no-unsafe](docs/rules/no-unsafe.md) | Prevent usage of unsafe lifecycle methods | +| | | | [react/no-unstable-nested-components](docs/rules/no-unstable-nested-components.md) | Prevent creating unstable components inside components | +| | | | [react/no-unused-class-component-methods](docs/rules/no-unused-class-component-methods.md) | Prevent declaring unused methods of component class | +| | | | [react/no-unused-prop-types](docs/rules/no-unused-prop-types.md) | Prevent definitions of unused prop types | +| | | | [react/no-unused-state](docs/rules/no-unused-state.md) | Prevent definition of unused state fields | +| | | | [react/no-will-update-set-state](docs/rules/no-will-update-set-state.md) | Prevent usage of setState in componentWillUpdate | +| | | | [react/prefer-es6-class](docs/rules/prefer-es6-class.md) | Enforce ES5 or ES6 class for React Components | +| | | | [react/prefer-exact-props](docs/rules/prefer-exact-props.md) | Prefer exact proptype definitions | +| | 🔧 | | [react/prefer-read-only-props](docs/rules/prefer-read-only-props.md) | Require read-only props. | +| | | | [react/prefer-stateless-function](docs/rules/prefer-stateless-function.md) | Enforce stateless components to be written as a pure function | +| ✔ | | | [react/prop-types](docs/rules/prop-types.md) | Prevent missing props validation in a React component definition | +| ✔ | | | [react/react-in-jsx-scope](docs/rules/react-in-jsx-scope.md) | Prevent missing React when using JSX | +| | | | [react/require-default-props](docs/rules/require-default-props.md) | Enforce a defaultProps definition for every prop that is not a required prop. | +| | | | [react/require-optimization](docs/rules/require-optimization.md) | Enforce React components to have a shouldComponentUpdate method | +| ✔ | | | [react/require-render-return](docs/rules/require-render-return.md) | Enforce ES5 or ES6 class for returning value in render function | +| | 🔧 | | [react/self-closing-comp](docs/rules/self-closing-comp.md) | Prevent extra closing tags for components without children | +| | | | [react/sort-comp](docs/rules/sort-comp.md) | Enforce component methods order | +| | | | [react/sort-prop-types](docs/rules/sort-prop-types.md) | Enforce propTypes declarations alphabetical sorting | +| | | | [react/state-in-constructor](docs/rules/state-in-constructor.md) | State initialization in an ES6 class component should be in a constructor | +| | | | [react/static-property-placement](docs/rules/static-property-placement.md) | Defines where React component static properties should be positioned. | +| | | | [react/style-prop-object](docs/rules/style-prop-object.md) | Enforce style prop value is an object | +| | | | [react/void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md) | Prevent passing of children to void DOM elements (e.g. `
`). | ## JSX-specific rules -| ✔ | 🔧 | Rule | Description | -| :---: | :---: | :--- | :--- | -| | 🔧 | [react/jsx-boolean-value](docs/rules/jsx-boolean-value.md) | Enforce boolean attributes notation in JSX | -| | | [react/jsx-child-element-spacing](docs/rules/jsx-child-element-spacing.md) | Ensures inline tags are not rendered without spaces between them | -| | 🔧 | [react/jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md) | Validate closing bracket location in JSX | -| | 🔧 | [react/jsx-closing-tag-location](docs/rules/jsx-closing-tag-location.md) | Validate closing tag location for multiline JSX | -| | 🔧 | [react/jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md) | Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes | -| | 🔧 | [react/jsx-curly-newline](docs/rules/jsx-curly-newline.md) | Enforce consistent line breaks inside jsx curly | -| | 🔧 | [react/jsx-curly-spacing](docs/rules/jsx-curly-spacing.md) | Enforce or disallow spaces inside of curly braces in JSX attributes | -| | 🔧 | [react/jsx-equals-spacing](docs/rules/jsx-equals-spacing.md) | Disallow or enforce spaces around equal signs in JSX attributes | -| | | [react/jsx-filename-extension](docs/rules/jsx-filename-extension.md) | Restrict file extensions that may contain JSX | -| | 🔧 | [react/jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md) | Ensure proper position of the first property in JSX | -| | 🔧 | [react/jsx-fragments](docs/rules/jsx-fragments.md) | Enforce shorthand or standard form for React fragments | -| | | [react/jsx-handler-names](docs/rules/jsx-handler-names.md) | Enforce event handler naming conventions in JSX | -| | 🔧 | [react/jsx-indent](docs/rules/jsx-indent.md) | Validate JSX indentation | -| | 🔧 | [react/jsx-indent-props](docs/rules/jsx-indent-props.md) | Validate props indentation in JSX | -| ✔ | | [react/jsx-key](docs/rules/jsx-key.md) | Report missing `key` props in iterators/collection literals | -| | | [react/jsx-max-depth](docs/rules/jsx-max-depth.md) | Validate JSX maximum depth | -| | 🔧 | [react/jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md) | Limit maximum of props on a single line in JSX | -| | 🔧 | [react/jsx-newline](docs/rules/jsx-newline.md) | Require or prevent a new line after jsx elements and expressions. | -| | | [react/jsx-no-bind](docs/rules/jsx-no-bind.md) | Prevents usage of Function.prototype.bind and arrow functions in React component props | -| ✔ | | [react/jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md) | Comments inside children section of tag should be placed inside braces | -| | | [react/jsx-no-constructed-context-values](docs/rules/jsx-no-constructed-context-values.md) | Prevents JSX context provider values from taking values that will cause needless rerenders. | -| ✔ | | [react/jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md) | Enforce no duplicate props | -| | 🔧 | [react/jsx-no-leaked-render](docs/rules/jsx-no-leaked-render.md) | Prevent problematic leaked values from being rendered | -| | | [react/jsx-no-literals](docs/rules/jsx-no-literals.md) | Prevent using string literals in React component definition | -| | | [react/jsx-no-script-url](docs/rules/jsx-no-script-url.md) | Forbid `javascript:` URLs | -| ✔ | 🔧 | [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md) | Forbid `target="_blank"` attribute without `rel="noreferrer"` | -| ✔ | | [react/jsx-no-undef](docs/rules/jsx-no-undef.md) | Disallow undeclared variables in JSX | -| | 🔧 | [react/jsx-no-useless-fragment](docs/rules/jsx-no-useless-fragment.md) | Disallow unnecessary fragments | -| | 🔧 | [react/jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md) | Limit to one expression per line in JSX | -| | | [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md) | Enforce PascalCase for user-defined JSX components | -| | 🔧 | [react/jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md) | Disallow multiple spaces between inline JSX props | -| | | [react/jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md) | Prevent JSX prop spreading | -| | | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce default props alphabetical sorting | -| | 🔧 | [react/jsx-sort-props](docs/rules/jsx-sort-props.md) | Enforce props alphabetical sorting | -| | 🔧 | [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md) | Validate spacing before closing bracket in JSX | -| | 🔧 | [react/jsx-tag-spacing](docs/rules/jsx-tag-spacing.md) | Validate whitespace in and around the JSX opening and closing brackets | -| ✔ | | [react/jsx-uses-react](docs/rules/jsx-uses-react.md) | Prevent React to be marked as unused | -| ✔ | | [react/jsx-uses-vars](docs/rules/jsx-uses-vars.md) | Prevent variables used in JSX to be marked as unused | -| | 🔧 | [react/jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md) | Prevent missing parentheses around multilines JSX | +| ✔ | 🔧 | 💡 | Rule | Description | +| :---: | :---: | :---: | :--- | :--- | +| | 🔧 | | [react/jsx-boolean-value](docs/rules/jsx-boolean-value.md) | Enforce boolean attributes notation in JSX | +| | | | [react/jsx-child-element-spacing](docs/rules/jsx-child-element-spacing.md) | Ensures inline tags are not rendered without spaces between them | +| | 🔧 | | [react/jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md) | Validate closing bracket location in JSX | +| | 🔧 | | [react/jsx-closing-tag-location](docs/rules/jsx-closing-tag-location.md) | Validate closing tag location for multiline JSX | +| | 🔧 | | [react/jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md) | Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes | +| | 🔧 | | [react/jsx-curly-newline](docs/rules/jsx-curly-newline.md) | Enforce consistent line breaks inside jsx curly | +| | 🔧 | | [react/jsx-curly-spacing](docs/rules/jsx-curly-spacing.md) | Enforce or disallow spaces inside of curly braces in JSX attributes | +| | 🔧 | | [react/jsx-equals-spacing](docs/rules/jsx-equals-spacing.md) | Disallow or enforce spaces around equal signs in JSX attributes | +| | | | [react/jsx-filename-extension](docs/rules/jsx-filename-extension.md) | Restrict file extensions that may contain JSX | +| | 🔧 | | [react/jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md) | Ensure proper position of the first property in JSX | +| | 🔧 | | [react/jsx-fragments](docs/rules/jsx-fragments.md) | Enforce shorthand or standard form for React fragments | +| | | | [react/jsx-handler-names](docs/rules/jsx-handler-names.md) | Enforce event handler naming conventions in JSX | +| | 🔧 | | [react/jsx-indent](docs/rules/jsx-indent.md) | Validate JSX indentation | +| | 🔧 | | [react/jsx-indent-props](docs/rules/jsx-indent-props.md) | Validate props indentation in JSX | +| ✔ | | | [react/jsx-key](docs/rules/jsx-key.md) | Report missing `key` props in iterators/collection literals | +| | | | [react/jsx-max-depth](docs/rules/jsx-max-depth.md) | Validate JSX maximum depth | +| | 🔧 | | [react/jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md) | Limit maximum of props on a single line in JSX | +| | 🔧 | | [react/jsx-newline](docs/rules/jsx-newline.md) | Require or prevent a new line after jsx elements and expressions. | +| | | | [react/jsx-no-bind](docs/rules/jsx-no-bind.md) | Prevents usage of Function.prototype.bind and arrow functions in React component props | +| ✔ | | | [react/jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md) | Comments inside children section of tag should be placed inside braces | +| | | | [react/jsx-no-constructed-context-values](docs/rules/jsx-no-constructed-context-values.md) | Prevents JSX context provider values from taking values that will cause needless rerenders. | +| ✔ | | | [react/jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md) | Enforce no duplicate props | +| | 🔧 | | [react/jsx-no-leaked-render](docs/rules/jsx-no-leaked-render.md) | Prevent problematic leaked values from being rendered | +| | | | [react/jsx-no-literals](docs/rules/jsx-no-literals.md) | Prevent using string literals in React component definition | +| | | | [react/jsx-no-script-url](docs/rules/jsx-no-script-url.md) | Forbid `javascript:` URLs | +| ✔ | 🔧 | | [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md) | Forbid `target="_blank"` attribute without `rel="noreferrer"` | +| ✔ | | | [react/jsx-no-undef](docs/rules/jsx-no-undef.md) | Disallow undeclared variables in JSX | +| | 🔧 | | [react/jsx-no-useless-fragment](docs/rules/jsx-no-useless-fragment.md) | Disallow unnecessary fragments | +| | 🔧 | | [react/jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md) | Limit to one expression per line in JSX | +| | | | [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md) | Enforce PascalCase for user-defined JSX components | +| | 🔧 | | [react/jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md) | Disallow multiple spaces between inline JSX props | +| | | | [react/jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md) | Prevent JSX prop spreading | +| | | | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce default props alphabetical sorting | +| | 🔧 | | [react/jsx-sort-props](docs/rules/jsx-sort-props.md) | Enforce props alphabetical sorting | +| | 🔧 | | [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md) | Validate spacing before closing bracket in JSX | +| | 🔧 | | [react/jsx-tag-spacing](docs/rules/jsx-tag-spacing.md) | Validate whitespace in and around the JSX opening and closing brackets | +| ✔ | | | [react/jsx-uses-react](docs/rules/jsx-uses-react.md) | Prevent React to be marked as unused | +| ✔ | | | [react/jsx-uses-vars](docs/rules/jsx-uses-vars.md) | Prevent variables used in JSX to be marked as unused | +| | 🔧 | | [react/jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md) | Prevent missing parentheses around multilines JSX | ## Other useful plugins diff --git a/docs/rules/destructuring-assignment.md b/docs/rules/destructuring-assignment.md index e930b31cbb..efbe0d9af6 100644 --- 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": [, 'always'] diff --git a/docs/rules/function-component-definition.md b/docs/rules/function-component-definition.md index 9c798d17e4..12ec29e9b9 100644 --- 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 index 0fb071762f..7f66bbddb4 100644 --- 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 index c6a7593335..649abcc29e 100644 --- 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 index 1b6adb4328..cf6295eb2e 100644 --- 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 index d4cc4623dd..ed5eef9621 100644 --- 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 index 9236c54f9f..3f6b2396ea 100644 --- 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"`: */ {' '} {' '} -{/* comment */ } // the comment makes the container necessary +{/* comment */ } // 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 index e7a0af665a..d4491f673f 100644 --- 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 index 9f428f5d81..a7b1b61d5c 100644 --- 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 index dccca8c0eb..2c9403f0fe 100644 --- 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 index d4e22c6322..c93349beff 100644 --- 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 index 8b5990a45d..b01ca5e81b 100644 --- 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 `...`, 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 index 572055fe10..2d743da042 100644 --- 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 index 2f0bb76ebe..4fbf629ac5 100644 --- 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 index 18bedeaf29..f97470ca68 100644 --- 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 index fa0b987a16..54ababfd32 100644 --- 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 index 597d41890a..18945cc6dc 100644 --- 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 && } {/* React: renders undesired 0 */} {/* React Native: crashes 💥 */} - + {'' && } {/* React: renders nothing */} {/* React Native: crashes 💥 */} - + {NaN && } {/* 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 index 8665145408..3c18f6f024 100644 --- 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 index 3712cbd1a9..76ef1a31ce 100644 --- 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 index 8156a9e48b..a1e534b23f 100644 --- 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 index 984e7f6119..e957641903 100644 --- 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 index acafa87b5e..8312420916 100644 --- 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 index 2fb059404c..c7148fed52 100644 --- 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 index 9282c5d891..c18a47e247 100644 --- 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 index 3d15ce03af..8e7ff61fdf 100644 --- 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 index 96d6b5b891..de6eea65ae 100644 --- 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 index 345bcd48bd..ee6b424f8c 100644 --- 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 index d67f00a089..c61389e259 100644 --- 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 index 6ba58ef196..5d117d7baa 100644 --- 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 index 5a6f406507..16652eed9e 100644 --- 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 index 974d6d14b9..54ab793205 100644 --- 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 index 2d23dd1931..b07d708d7e 100644 --- a/markdown.config.js +++ b/markdown.config.js @@ -8,18 +8,19 @@ const ruleTableRows = Object.keys(rules) .sort() .map((id) => { const { meta } = rules[id]; - const { fixable, docs } = meta; + const { fixable, docs, hasSuggestions } = meta; return [ docs.recommended ? '✔' : '', fixable ? '🔧' : '', + hasSuggestions ? '💡' : '', `[react/${id}](docs/rules/${id}.md)`, docs.description, ].join(' | '); }); const buildRulesTable = (rows) => { - const header = '✔ | 🔧 | Rule | Description'; - const separator = ':---: | :---: | :--- | :---'; + const header = '✔ | 🔧 | 💡 | Rule | Description'; + const separator = ':---: | :---: | :---: | :--- | :---'; return [header, separator, ...rows] .map((row) => `| ${row} |`) diff --git a/tests/index.js b/tests/index.js index c04936fa26..75355f1fa1 100644 --- a/tests/index.js +++ b/tests/index.js @@ -22,6 +22,47 @@ describe('all rule files should be exported by the plugin', () => { }); }); +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).', + }; + + ruleFiles.forEach((ruleName) => { + const rule = plugin.rules[ruleName]; + const documentPath = path.join('docs', 'rules', `${ruleName}.md`); + const documentContents = fs.readFileSync(documentPath, 'utf8'); + const documentLines = documentContents.split('\n'); + + // Decide which notices should be shown at the top of the doc. + const expectedNotices = []; + const unexpectedNotices = []; + if (rule.meta.fixable) { + expectedNotices.push('fixable'); + } else { + unexpectedNotices.push('fixable'); + } + if (rule.meta.hasSuggestions) { + expectedNotices.push('hasSuggestions'); + } else { + unexpectedNotices.push('hasSuggestions'); + } + + // Ensure that expected notices are present in the correct order. + let currentLineNumber = 1; + expectedNotices.forEach((expectedNotice) => { + assert.strictEqual(documentLines[currentLineNumber], '', `${ruleName} includes blank line ahead of ${expectedNotice} notice`); + assert.strictEqual(documentLines[currentLineNumber + 1], MESSAGES[expectedNotice], `${ruleName} includes ${expectedNotice} notice`); + currentLineNumber += 2; + }); + + // Ensure that unexpected notices are not present. + unexpectedNotices.forEach((unexpectedNotice) => { + assert.ok(!documentContents.includes(MESSAGES[unexpectedNotice]), `${ruleName} does not include unexpected ${unexpectedNotice} notice`); + }); + }); +}); + describe('deprecated rules', () => { it('marks all deprecated rules as deprecated', () => { ruleFiles.forEach((ruleName) => {