diff --git a/.eslintrc b/.eslintrc index 64cb87e423..653bc9f651 100644 --- a/.eslintrc +++ b/.eslintrc @@ -50,6 +50,7 @@ }], "eslint-plugin/consistent-output": 0, + "eslint-plugin/require-meta-docs-description": [2, { "pattern": "^(Enforce|Require|Disallow)" }], "eslint-plugin/require-meta-schema": 0, "eslint-plugin/require-meta-type": 0 }, diff --git a/CHANGELOG.md b/CHANGELOG.md index d0a14ddaf9..35631e0ecc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,7 +37,9 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange * [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) +* [Docs] Consistent rule descriptions and doc sections ([#3361][] @bmish) +[#3361]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3361 [#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 diff --git a/README.md b/README.md index d5045417c3..d7c10da979 100644 --- a/README.md +++ b/README.md @@ -119,64 +119,64 @@ Enable the rules that you would like to use. | βœ” | πŸ”§ | πŸ’‘ | 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/button-has-type](docs/rules/button-has-type.md) | Disallow usage of `button` elements without an explicit `type` attribute | +| | | | [react/default-props-match-prop-types](docs/rules/default-props-match-prop-types.md) | Enforce all defaultProps have a corresponding non-required PropType | | | πŸ”§ | | [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/display-name](docs/rules/display-name.md) | Disallow missing displayName in a React component definition | +| | | | [react/forbid-component-props](docs/rules/forbid-component-props.md) | Disallow certain props on components | +| | | | [react/forbid-dom-props](docs/rules/forbid-dom-props.md) | Disallow certain props on DOM Nodes | +| | | | [react/forbid-elements](docs/rules/forbid-elements.md) | Disallow certain elements | +| | | | [react/forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md) | Disallow using another component's propTypes | +| | | | [react/forbid-prop-types](docs/rules/forbid-prop-types.md) | Disallow certain propTypes | +| | πŸ”§ | | [react/function-component-definition](docs/rules/function-component-definition.md) | Enforce a specific function type for function components | +| | | πŸ’‘ | [react/hook-use-state](docs/rules/hook-use-state.md) | Ensure destructuring and 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-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md) | Disallow when this.state is accessed within setState | +| | | | [react/no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md) | Disallow adjacent inline elements not separated by whitespace. | +| | | | [react/no-array-index-key](docs/rules/no-array-index-key.md) | Disallow 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-children-prop](docs/rules/no-children-prop.md) | Disallow passing of children as props | +| | | | [react/no-danger](docs/rules/no-danger.md) | Disallow usage of dangerous JSX properties | +| βœ” | | | [react/no-danger-with-children](docs/rules/no-danger-with-children.md) | Disallow when a DOM element is using both children and dangerouslySetInnerHTML | +| βœ” | | | [react/no-deprecated](docs/rules/no-deprecated.md) | Disallow usage of deprecated methods | +| | | | [react/no-did-mount-set-state](docs/rules/no-did-mount-set-state.md) | Disallow usage of setState in componentDidMount | +| | | | [react/no-did-update-set-state](docs/rules/no-did-update-set-state.md) | Disallow usage of setState in componentDidUpdate | +| βœ” | | | [react/no-direct-mutation-state](docs/rules/no-direct-mutation-state.md) | Disallow direct mutation of this.state | +| βœ” | | | [react/no-find-dom-node](docs/rules/no-find-dom-node.md) | Disallow usage of findDOMNode | +| | πŸ”§ | | [react/no-invalid-html-attribute](docs/rules/no-invalid-html-attribute.md) | Disallow usage of invalid attributes | +| βœ” | | | [react/no-is-mounted](docs/rules/no-is-mounted.md) | Disallow usage of isMounted | +| | | | [react/no-multi-comp](docs/rules/no-multi-comp.md) | Disallow 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/no-redundant-should-component-update](docs/rules/no-redundant-should-component-update.md) | Disallow usage of shouldComponentUpdate when extending React.PureComponent | +| βœ” | | | [react/no-render-return-value](docs/rules/no-render-return-value.md) | Disallow usage of the return value of ReactDOM.render | +| | | | [react/no-set-state](docs/rules/no-set-state.md) | Disallow usage of setState | +| βœ” | | | [react/no-string-refs](docs/rules/no-string-refs.md) | Disallow using string references | +| | | | [react/no-this-in-sfc](docs/rules/no-this-in-sfc.md) | Disallow `this` from being used in stateless functional components | +| | | | [react/no-typos](docs/rules/no-typos.md) | Disallow common typos | +| βœ” | | | [react/no-unescaped-entities](docs/rules/no-unescaped-entities.md) | Disallow unescaped HTML entities from appearing in markup | +| βœ” | πŸ”§ | | [react/no-unknown-property](docs/rules/no-unknown-property.md) | Disallow usage of unknown DOM property | +| | | | [react/no-unsafe](docs/rules/no-unsafe.md) | Disallow usage of unsafe lifecycle methods | +| | | | [react/no-unstable-nested-components](docs/rules/no-unstable-nested-components.md) | Disallow creating unstable components inside components | +| | | | [react/no-unused-class-component-methods](docs/rules/no-unused-class-component-methods.md) | Disallow declaring unused methods of component class | +| | | | [react/no-unused-prop-types](docs/rules/no-unused-prop-types.md) | Disallow definitions of unused propTypes | +| | | | [react/no-unused-state](docs/rules/no-unused-state.md) | Disallow definitions of unused state | +| | | | [react/no-will-update-set-state](docs/rules/no-will-update-set-state.md) | Disallow 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-read-only-props](docs/rules/prefer-read-only-props.md) | Enforce that props are read-only | | | | | [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/prop-types](docs/rules/prop-types.md) | Disallow missing props validation in a React component definition | +| βœ” | | | [react/react-in-jsx-scope](docs/rules/react-in-jsx-scope.md) | Disallow 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/self-closing-comp](docs/rules/self-closing-comp.md) | Disallow 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/state-in-constructor](docs/rules/state-in-constructor.md) | Enforce class component state initialization style | +| | | | [react/static-property-placement](docs/rules/static-property-placement.md) | Enforces 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. `
`). | +| | | | [react/void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md) | Disallow void DOM elements (e.g. ``, `
`) from receiving children | ## JSX-specific rules @@ -185,44 +185,44 @@ Enable the rules that you would like to use. | βœ” | πŸ”§ | πŸ’‘ | 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-child-element-spacing](docs/rules/jsx-child-element-spacing.md) | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | +| | πŸ”§ | | [react/jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md) | Enforce closing bracket location in JSX | +| | πŸ”§ | | [react/jsx-closing-tag-location](docs/rules/jsx-closing-tag-location.md) | Enforce 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 enforce JSX expressions on literals in JSX children or attributes | +| | πŸ”§ | | [react/jsx-curly-newline](docs/rules/jsx-curly-newline.md) | Enforce consistent linebreaks in curly braces in JSX attributes and expressions | +| | πŸ”§ | | [react/jsx-curly-spacing](docs/rules/jsx-curly-spacing.md) | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | +| | πŸ”§ | | [react/jsx-equals-spacing](docs/rules/jsx-equals-spacing.md) | Enforce or disallow spaces around equal signs in JSX attributes | +| | | | [react/jsx-filename-extension](docs/rules/jsx-filename-extension.md) | Disallow file extensions that may contain JSX | +| | πŸ”§ | | [react/jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md) | Enforce 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-indent](docs/rules/jsx-indent.md) | Enforce JSX indentation | +| | πŸ”§ | | [react/jsx-indent-props](docs/rules/jsx-indent-props.md) | Enforce props indentation in JSX | +| βœ” | | | [react/jsx-key](docs/rules/jsx-key.md) | Disallow missing `key` props in iterators/collection literals | +| | | | [react/jsx-max-depth](docs/rules/jsx-max-depth.md) | Enforce JSX maximum depth | +| | πŸ”§ | | [react/jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md) | Enforce 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-bind](docs/rules/jsx-no-bind.md) | Disallow `.bind()` or arrow functions in JSX props | +| βœ” | | | [react/jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md) | Disallow comments from being inserted as text nodes | +| | | | [react/jsx-no-constructed-context-values](docs/rules/jsx-no-constructed-context-values.md) | Disallows JSX context provider values from taking values that will cause needless rerenders | +| βœ” | | | [react/jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md) | Disallow duplicate properties in JSX | +| | πŸ”§ | | [react/jsx-no-leaked-render](docs/rules/jsx-no-leaked-render.md) | Disallow problematic leaked values from being rendered | +| | | | [react/jsx-no-literals](docs/rules/jsx-no-literals.md) | Disallow usage of string literals in JSX | +| | | | [react/jsx-no-script-url](docs/rules/jsx-no-script-url.md) | Disallow usage of `javascript:` URLs | +| βœ” | πŸ”§ | | [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md) | Disallow `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-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md) | Require one JSX element per line | | | | | [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-props-no-spreading](docs/rules/jsx-props-no-spreading.md) | Disallow JSX prop spreading | +| | | | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce defaultProps declarations 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 | +| | πŸ”§ | | [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md) | Enforce spacing before closing bracket in JSX | +| | πŸ”§ | | [react/jsx-tag-spacing](docs/rules/jsx-tag-spacing.md) | Enforce whitespace in and around the JSX opening and closing brackets | +| βœ” | | | [react/jsx-uses-react](docs/rules/jsx-uses-react.md) | Disallow React to be incorrectly marked as unused | +| βœ” | | | [react/jsx-uses-vars](docs/rules/jsx-uses-vars.md) | Disallow variables used in JSX to be incorrectly marked as unused | +| | πŸ”§ | | [react/jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md) | Disallow missing parentheses around multiline JSX | ## Other useful plugins diff --git a/docs/rules/button-has-type.md b/docs/rules/button-has-type.md index d18af5afd4..13d0115b58 100644 --- a/docs/rules/button-has-type.md +++ b/docs/rules/button-has-type.md @@ -1,4 +1,4 @@ -# Prevent usage of `button` elements without an explicit `type` attribute (react/button-has-type) +# Disallow usage of `button` elements without an explicit `type` attribute (react/button-has-type) The default value of `type` attribute for `button` HTML element is `"submit"` which is often not the desired behavior and may lead to unexpected page reloads. This rules enforces an explicit `type` attribute for all the `button` elements and checks that its value is valid per spec (i.e., is one of `"button"`, `"submit"`, and `"reset"`). diff --git a/docs/rules/display-name.md b/docs/rules/display-name.md index cc895ffd7e..97aa68bdeb 100644 --- a/docs/rules/display-name.md +++ b/docs/rules/display-name.md @@ -1,4 +1,4 @@ -# Prevent missing displayName in a React component definition (react/display-name) +# Disallow missing displayName in a React component definition (react/display-name) DisplayName allows you to name your component. This name is used by React in debugging messages. diff --git a/docs/rules/forbid-component-props.md b/docs/rules/forbid-component-props.md index bd9a8741f3..6c4c2cc327 100644 --- a/docs/rules/forbid-component-props.md +++ b/docs/rules/forbid-component-props.md @@ -1,4 +1,4 @@ -# Forbid certain props on Components (react/forbid-component-props) +# Disallow certain props on components (react/forbid-component-props) By default this rule prevents passing of [props that add lots of complexity](https://medium.com/brigade-engineering/don-t-pass-css-classes-between-components-e9f7ab192785) (`className`, `style`) to Components. This rule only applies to Components (e.g. ``) and not DOM nodes (e.g. `
`). The list of forbidden props can be customized with the `forbid` option. diff --git a/docs/rules/forbid-dom-props.md b/docs/rules/forbid-dom-props.md index 15a1229324..f37e376682 100644 --- a/docs/rules/forbid-dom-props.md +++ b/docs/rules/forbid-dom-props.md @@ -1,4 +1,4 @@ -# Forbid certain props on DOM Nodes (react/forbid-dom-props) +# Disallow certain props on DOM Nodes (react/forbid-dom-props) This rule prevents passing of props to elements. This rule only applies to DOM Nodes (e.g. `
`) and not Components (e.g. ``). The list of forbidden props can be customized with the `forbid` option. diff --git a/docs/rules/forbid-elements.md b/docs/rules/forbid-elements.md index 5ec57d0abc..99448effa1 100644 --- a/docs/rules/forbid-elements.md +++ b/docs/rules/forbid-elements.md @@ -1,4 +1,4 @@ -# Forbid certain elements (react/forbid-elements) +# Disallow certain elements (react/forbid-elements) You may want to forbid usage of certain elements in favor of others, (e.g. forbid all `
` and use `` instead). This rule allows you to configure a list of forbidden elements and to specify their desired replacements. diff --git a/docs/rules/forbid-foreign-prop-types.md b/docs/rules/forbid-foreign-prop-types.md index 64b99f8fc5..51ea8a909a 100644 --- a/docs/rules/forbid-foreign-prop-types.md +++ b/docs/rules/forbid-foreign-prop-types.md @@ -1,4 +1,4 @@ -# Forbid foreign propTypes (react/forbid-foreign-prop-types) +# Disallow using another component's propTypes (react/forbid-foreign-prop-types) This rule forbids using another component's prop types unless they are explicitly imported/exported. This allows people who want to use [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) to remove propTypes from their components in production builds, to do so safely. diff --git a/docs/rules/forbid-prop-types.md b/docs/rules/forbid-prop-types.md index d577f4906f..01898c21ae 100644 --- a/docs/rules/forbid-prop-types.md +++ b/docs/rules/forbid-prop-types.md @@ -1,4 +1,4 @@ -# Forbid certain propTypes (react/forbid-prop-types) +# Disallow certain propTypes (react/forbid-prop-types) By default this rule prevents vague prop types with more specific alternatives available (`any`, `array`, `object`), but any prop type can be disabled if desired. The defaults are chosen because they have obvious replacements. `any` should be replaced with, well, anything. `array` and `object` can be replaced with `arrayOf` and `shape`, respectively. diff --git a/docs/rules/jsx-boolean-value.md b/docs/rules/jsx-boolean-value.md index 649abcc29e..ddcbc44215 100644 --- a/docs/rules/jsx-boolean-value.md +++ b/docs/rules/jsx-boolean-value.md @@ -2,10 +2,14 @@ πŸ”§ 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 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. +[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. ## Rule Details +This rule will enforce one or the other to keep consistency in your code. + +## Rule Options + This rule takes two arguments. If the first argument is `"always"` then it warns whenever an attribute is missing its value. If `"never"` then it warns if an attribute has a `true` value. The default value of this option is `"never"`. The second argument is optional: if provided, it must be an object with a `"never"` property (if the first argument is `"always"`), or an `"always"` property (if the first argument is `"never"`). This property’s value must be an array of strings representing prop names. diff --git a/docs/rules/jsx-child-element-spacing.md b/docs/rules/jsx-child-element-spacing.md index 3deb7dc041..c53aacf23c 100644 --- a/docs/rules/jsx-child-element-spacing.md +++ b/docs/rules/jsx-child-element-spacing.md @@ -1,4 +1,4 @@ -# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions. (react/jsx-child-element-spacing) +# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (react/jsx-child-element-spacing) ## Rule Details diff --git a/docs/rules/jsx-closing-bracket-location.md b/docs/rules/jsx-closing-bracket-location.md index cf6295eb2e..988640e3f5 100644 --- a/docs/rules/jsx-closing-bracket-location.md +++ b/docs/rules/jsx-closing-bracket-location.md @@ -1,4 +1,4 @@ -# Validate closing bracket location in JSX (react/jsx-closing-bracket-location) +# Enforce closing bracket location in JSX (react/jsx-closing-bracket-location) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. diff --git a/docs/rules/jsx-closing-tag-location.md b/docs/rules/jsx-closing-tag-location.md index ed5eef9621..d86e97b58a 100644 --- a/docs/rules/jsx-closing-tag-location.md +++ b/docs/rules/jsx-closing-tag-location.md @@ -1,4 +1,4 @@ -# Validate closing tag location in JSX (react/jsx-closing-tag-location) +# Enforce closing tag location for multiline JSX (react/jsx-closing-tag-location) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. diff --git a/docs/rules/jsx-curly-brace-presence.md b/docs/rules/jsx-curly-brace-presence.md index 3f6b2396ea..b4d7bff0aa 100644 --- a/docs/rules/jsx-curly-brace-presence.md +++ b/docs/rules/jsx-curly-brace-presence.md @@ -1,4 +1,4 @@ -# Enforce curly braces or disallow unnecessary curly braces in JSX props and/or children. (react/jsx-curly-brace-presence) +# Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes (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. diff --git a/docs/rules/jsx-curly-newline.md b/docs/rules/jsx-curly-newline.md index d4491f673f..7243fabe05 100644 --- a/docs/rules/jsx-curly-newline.md +++ b/docs/rules/jsx-curly-newline.md @@ -1,4 +1,4 @@ -# Enforce linebreaks in curly braces in JSX attributes and expressions. (react/jsx-curly-newline) +# Enforce consistent linebreaks in curly braces in JSX attributes and expressions (react/jsx-curly-newline) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. diff --git a/docs/rules/jsx-curly-spacing.md b/docs/rules/jsx-curly-spacing.md index a7b1b61d5c..2508886c40 100644 --- a/docs/rules/jsx-curly-spacing.md +++ b/docs/rules/jsx-curly-spacing.md @@ -1,4 +1,4 @@ -# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions. (react/jsx-curly-spacing) +# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (react/jsx-curly-spacing) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. diff --git a/docs/rules/jsx-equals-spacing.md b/docs/rules/jsx-equals-spacing.md index 2c9403f0fe..2dd2af0c38 100644 --- a/docs/rules/jsx-equals-spacing.md +++ b/docs/rules/jsx-equals-spacing.md @@ -1,4 +1,4 @@ -# Enforce or disallow spaces around equal signs in JSX attributes. (react/jsx-equals-spacing) +# Enforce or disallow spaces around equal signs in JSX attributes (react/jsx-equals-spacing) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. @@ -8,7 +8,7 @@ Some style guides require or disallow spaces around equal signs. This rule will enforce consistency of spacing around equal signs in JSX attributes, by requiring or disallowing one or more spaces before and after `=`. -### Options +## Rule Options There are two options for the rule: @@ -21,7 +21,7 @@ Depending on your coding conventions, you can choose either option by specifying "react/jsx-equals-spacing": [2, "always"] ``` -#### never +### never Examples of **incorrect** code for this rule, when configured with `"never"`: @@ -39,7 +39,7 @@ Examples of **correct** code for this rule, when configured with `"never"`: ; ``` -#### always +### always Examples of **incorrect** code for this rule, when configured with `"always"`: diff --git a/docs/rules/jsx-filename-extension.md b/docs/rules/jsx-filename-extension.md index 2dda499f23..0260c2db2c 100644 --- a/docs/rules/jsx-filename-extension.md +++ b/docs/rules/jsx-filename-extension.md @@ -1,4 +1,4 @@ -# Restrict file extensions that may contain JSX (react/jsx-filename-extension) +# Disallow file extensions that may contain JSX (react/jsx-filename-extension) ## Rule Details diff --git a/docs/rules/jsx-first-prop-new-line.md b/docs/rules/jsx-first-prop-new-line.md index c93349beff..be6314e8e4 100644 --- a/docs/rules/jsx-first-prop-new-line.md +++ b/docs/rules/jsx-first-prop-new-line.md @@ -1,4 +1,4 @@ -# Configure the position of the first property (react/jsx-first-prop-new-line) +# Enforce proper position of the first property in JSX (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. diff --git a/docs/rules/jsx-fragments.md b/docs/rules/jsx-fragments.md index b01ca5e81b..12b96eab6e 100644 --- a/docs/rules/jsx-fragments.md +++ b/docs/rules/jsx-fragments.md @@ -2,7 +2,11 @@ πŸ”§ 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. +In JSX, a React fragment is created either with `...`, or, using the shorthand syntax, `<>...`. + +## Rule Details + +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]. diff --git a/docs/rules/jsx-indent-props.md b/docs/rules/jsx-indent-props.md index 2d743da042..fa5e32f5da 100644 --- a/docs/rules/jsx-indent-props.md +++ b/docs/rules/jsx-indent-props.md @@ -1,4 +1,4 @@ -# Validate props indentation in JSX (react/jsx-indent-props) +# Enforce props indentation in JSX (react/jsx-indent-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. diff --git a/docs/rules/jsx-indent.md b/docs/rules/jsx-indent.md index 4fbf629ac5..d177073de8 100644 --- a/docs/rules/jsx-indent.md +++ b/docs/rules/jsx-indent.md @@ -1,4 +1,4 @@ -# Validate JSX indentation (react/jsx-indent) +# Enforce 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. diff --git a/docs/rules/jsx-key.md b/docs/rules/jsx-key.md index b64307b419..17c71c433d 100644 --- a/docs/rules/jsx-key.md +++ b/docs/rules/jsx-key.md @@ -1,4 +1,4 @@ -# Detect missing `key` prop (react/jsx-key) +# Disallow missing `key` props in iterators/collection literals (react/jsx-key) 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-max-depth.md b/docs/rules/jsx-max-depth.md index 919a57820b..1ddeaec24a 100644 --- a/docs/rules/jsx-max-depth.md +++ b/docs/rules/jsx-max-depth.md @@ -1,4 +1,4 @@ -# Validate JSX maximum depth (react/jsx-max-depth) +# Enforce JSX maximum depth (react/jsx-max-depth) This option validates a specific depth for JSX. diff --git a/docs/rules/jsx-max-props-per-line.md b/docs/rules/jsx-max-props-per-line.md index f97470ca68..a4e5d75956 100644 --- a/docs/rules/jsx-max-props-per-line.md +++ b/docs/rules/jsx-max-props-per-line.md @@ -1,4 +1,4 @@ -# Limit maximum of props on a single line in JSX (react/jsx-max-props-per-line) +# Enforce 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. diff --git a/docs/rules/jsx-no-bind.md b/docs/rules/jsx-no-bind.md index b07c5a9368..a3cd813b20 100644 --- a/docs/rules/jsx-no-bind.md +++ b/docs/rules/jsx-no-bind.md @@ -1,4 +1,4 @@ -# No `.bind()` or Arrow Functions in JSX Props (react/jsx-no-bind) +# Disallow `.bind()` or arrow functions in JSX props (react/jsx-no-bind) A `bind` call or [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in a JSX prop will create a brand new function on every single render. This is bad for performance, as it may cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update. diff --git a/docs/rules/jsx-no-comment-textnodes.md b/docs/rules/jsx-no-comment-textnodes.md index 7e849520c9..4a1f1ff310 100644 --- a/docs/rules/jsx-no-comment-textnodes.md +++ b/docs/rules/jsx-no-comment-textnodes.md @@ -1,4 +1,4 @@ -# Prevent comments from being inserted as text nodes (react/jsx-no-comment-textnodes) +# Disallow comments from being inserted as text nodes (react/jsx-no-comment-textnodes) 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-constructed-context-values.md b/docs/rules/jsx-no-constructed-context-values.md index 6816b98b59..93832c7779 100644 --- a/docs/rules/jsx-no-constructed-context-values.md +++ b/docs/rules/jsx-no-constructed-context-values.md @@ -1,4 +1,4 @@ -# Prevent react contexts from taking non-stable values (react/jsx-no-constructed-context-values) +# Disallows JSX context provider values from taking values that will cause needless rerenders (react/jsx-no-constructed-context-values) This rule prevents non-stable values (i.e. object identities) from being used as a value for `Context.Provider`. diff --git a/docs/rules/jsx-no-duplicate-props.md b/docs/rules/jsx-no-duplicate-props.md index cee7984873..22c462fefd 100644 --- a/docs/rules/jsx-no-duplicate-props.md +++ b/docs/rules/jsx-no-duplicate-props.md @@ -1,4 +1,4 @@ -# Prevent duplicate properties in JSX (react/jsx-no-duplicate-props) +# Disallow duplicate properties in JSX (react/jsx-no-duplicate-props) Creating JSX elements with duplicate props can cause unexpected behavior in your application. diff --git a/docs/rules/jsx-no-leaked-render.md b/docs/rules/jsx-no-leaked-render.md index 18945cc6dc..e1db041e3e 100644 --- a/docs/rules/jsx-no-leaked-render.md +++ b/docs/rules/jsx-no-leaked-render.md @@ -1,4 +1,4 @@ -# Prevent problematic leaked values from being rendered (react/jsx-no-leaked-render) +# Disallow 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. @@ -139,7 +139,7 @@ const Component = ({ elements }) => { } ``` -### Options +## Rule Options The supported options are: diff --git a/docs/rules/jsx-no-literals.md b/docs/rules/jsx-no-literals.md index b41355fb11..0450143711 100644 --- a/docs/rules/jsx-no-literals.md +++ b/docs/rules/jsx-no-literals.md @@ -1,4 +1,4 @@ -# Prevent usage of string literals in JSX (react/jsx-no-literals) +# Disallow usage of string literals in JSX (react/jsx-no-literals) There are a few scenarios where you want to avoid string literals in JSX. You may want to enforce consistency, reduce syntax highlighting issues, or ensure that strings are part of a translation system. diff --git a/docs/rules/jsx-no-script-url.md b/docs/rules/jsx-no-script-url.md index a3b4fa0180..958d2d38f2 100644 --- a/docs/rules/jsx-no-script-url.md +++ b/docs/rules/jsx-no-script-url.md @@ -1,4 +1,4 @@ -# Prevent usage of `javascript:` URLs (react/jsx-no-script-url) +# Disallow usage of `javascript:` URLs (react/jsx-no-script-url) **In React 16.9** any URLs starting with `javascript:` [scheme](https://wiki.whatwg.org/wiki/URL_schemes#javascript:_URLs) log a warning. React considers the pattern as a dangerous attack surface, see [details](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-javascript-urls). diff --git a/docs/rules/jsx-no-target-blank.md b/docs/rules/jsx-no-target-blank.md index 3c18f6f024..0caa0a8024 100644 --- a/docs/rules/jsx-no-target-blank.md +++ b/docs/rules/jsx-no-target-blank.md @@ -1,4 +1,4 @@ -# Prevent usage of unsafe `target='_blank'` (react/jsx-no-target-blank) +# Disallow `target="_blank"` attribute without `rel="noreferrer"` (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. diff --git a/docs/rules/jsx-one-expression-per-line.md b/docs/rules/jsx-one-expression-per-line.md index a1e534b23f..f922f03383 100644 --- a/docs/rules/jsx-one-expression-per-line.md +++ b/docs/rules/jsx-one-expression-per-line.md @@ -1,4 +1,4 @@ -# One JSX Element Per Line (react/jsx-one-expression-per-line) +# Require 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. diff --git a/docs/rules/jsx-props-no-spreading.md b/docs/rules/jsx-props-no-spreading.md index ec7715ab21..33ac1c3cd3 100644 --- a/docs/rules/jsx-props-no-spreading.md +++ b/docs/rules/jsx-props-no-spreading.md @@ -1,4 +1,4 @@ -# Disallow JSX props spreading (react/jsx-props-no-spreading) +# Disallow JSX prop spreading (react/jsx-props-no-spreading) Enforces that there is no spreading for any JSX attribute. This enhances readability of code by being more explicit about what props are received by the component. It is also good for maintainability by avoiding passing unintentional extra props and allowing react to emit warnings when invalid HTML props are passed to HTML elements. diff --git a/docs/rules/jsx-space-before-closing.md b/docs/rules/jsx-space-before-closing.md index c7148fed52..7e192a2b7b 100644 --- a/docs/rules/jsx-space-before-closing.md +++ b/docs/rules/jsx-space-before-closing.md @@ -1,4 +1,4 @@ -# Validate spacing before closing bracket in JSX (react/jsx-space-before-closing) +# 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. @@ -10,6 +10,8 @@ Enforce or forbid spaces before the closing bracket of self-closing JSX elements This rule checks if there is one or more spaces before the closing bracket of self-closing JSX elements. +## Rule Options + This rule takes one argument. If it is `"always"` then it warns whenever a space is missing before the closing bracket. If `"never"` then it warns if a space is present before the closing bracket. The default value of this option is `"always"`. Examples of **incorrect** code for this rule, when configured with `"always"`: diff --git a/docs/rules/jsx-tag-spacing.md b/docs/rules/jsx-tag-spacing.md index c18a47e247..2f74294d91 100644 --- a/docs/rules/jsx-tag-spacing.md +++ b/docs/rules/jsx-tag-spacing.md @@ -1,4 +1,4 @@ -# Validate whitespace in and around the JSX opening and closing brackets (react/jsx-tag-spacing) +# Enforce whitespace in and around the JSX opening and closing brackets (react/jsx-tag-spacing) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. @@ -8,6 +8,8 @@ Enforce or forbid spaces after the opening bracket, before the closing bracket, This rule checks the whitespace inside and surrounding the JSX syntactic elements. +## Rule Options + This rule takes one argument, an object with 4 possible keys: `closingSlash`, `beforeSelfClosing`, `afterOpening`, and `beforeClosing`. Each key can receive the value `"allow"` to disable that specific check. The default values are: diff --git a/docs/rules/jsx-uses-react.md b/docs/rules/jsx-uses-react.md index 9fc281d707..df88fc3337 100644 --- a/docs/rules/jsx-uses-react.md +++ b/docs/rules/jsx-uses-react.md @@ -1,4 +1,4 @@ -# Prevent React to be incorrectly marked as unused (react/jsx-uses-react) +# Disallow React to be incorrectly marked as unused (react/jsx-uses-react) JSX expands to a call to `React.createElement`, a file which includes `React` but only uses JSX should consider the `React` variable as used. @@ -45,4 +45,4 @@ var Hello =
Hello {this.props.name}
; If you are not using JSX, if React is declared as global variable, or if you do not use the `no-unused-vars` rule. -If you are using the [new JSX transform from React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports), you should disable this rule by extending [`react/jsx-runtime`](https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/index.js#L163-L176) in your eslint config (add `"plugin:react/jsx-runtime"` to `"extends"`). \ No newline at end of file +If you are using the [new JSX transform from React 17](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports), you should disable this rule by extending [`react/jsx-runtime`](https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/index.js#L163-L176) in your eslint config (add `"plugin:react/jsx-runtime"` to `"extends"`). diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md index 4a5e5f1766..b5acbf8c2e 100644 --- a/docs/rules/jsx-uses-vars.md +++ b/docs/rules/jsx-uses-vars.md @@ -1,4 +1,4 @@ -# Prevent variables used in JSX to be incorrectly marked as unused (react/jsx-uses-vars) +# Disallow variables used in JSX to be incorrectly marked as unused (react/jsx-uses-vars) 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. diff --git a/docs/rules/jsx-wrap-multilines.md b/docs/rules/jsx-wrap-multilines.md index 8e7ff61fdf..f099321d6e 100644 --- a/docs/rules/jsx-wrap-multilines.md +++ b/docs/rules/jsx-wrap-multilines.md @@ -1,4 +1,4 @@ -# Prevent missing parentheses around multiline JSX (react/jsx-wrap-multilines) +# Disallow missing parentheses around multiline JSX (react/jsx-wrap-multilines) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. @@ -22,6 +22,8 @@ This rule optionally takes a second parameter in the form of an object, containi Note: conditions are checked by default in declarations or assignments. +## Rule Options + Examples of **incorrect** code for this rule, when configured with `parens` or `parens-new-line`: ```jsx diff --git a/docs/rules/no-access-state-in-setstate.md b/docs/rules/no-access-state-in-setstate.md index 98c38f8886..e65f7f4bce 100644 --- a/docs/rules/no-access-state-in-setstate.md +++ b/docs/rules/no-access-state-in-setstate.md @@ -1,9 +1,14 @@ -# Prevent using this.state within a this.setState (react/no-access-state-in-setstate) +# Disallow when this.state is accessed within setState (react/no-access-state-in-setstate) + +Usage of `this.state` inside `setState` calls might result in errors when two state calls are called in batch and thus referencing old state and not the current state. + +## Rule Details This rule should prevent usage of `this.state` inside `setState` calls. -Such usage of `this.state` might result in errors when two state calls are -called in batch and thus referencing old state and not the current -state. An example can be an increment function: + +## Examples + +An example can be an increment function: ```javascript function increment() { diff --git a/docs/rules/no-adjacent-inline-elements.md b/docs/rules/no-adjacent-inline-elements.md index 5fc6ee3590..ef14fdfc5b 100644 --- a/docs/rules/no-adjacent-inline-elements.md +++ b/docs/rules/no-adjacent-inline-elements.md @@ -1,4 +1,4 @@ -# Prevent adjacent inline elements not separated by whitespace. (react/no-adjacent-inline-elements) +# Disallow adjacent inline elements not separated by whitespace. (react/no-adjacent-inline-elements) Adjacent inline elements not separated by whitespace will bump up against each other when viewed in an unstyled manner, which usually isn't desirable. diff --git a/docs/rules/no-array-index-key.md b/docs/rules/no-array-index-key.md index 91f8643d23..7181bfda00 100644 --- a/docs/rules/no-array-index-key.md +++ b/docs/rules/no-array-index-key.md @@ -1,4 +1,4 @@ -# Prevent usage of Array index in keys (react/no-array-index-key) +# Disallow usage of Array index in keys (react/no-array-index-key) Warn if an element uses an Array index in its `key`. diff --git a/docs/rules/no-children-prop.md b/docs/rules/no-children-prop.md index d8fcfec2e7..cca47f152a 100644 --- a/docs/rules/no-children-prop.md +++ b/docs/rules/no-children-prop.md @@ -1,4 +1,4 @@ -# Prevent passing of children as props (react/no-children-prop) +# Disallow passing of children as props (react/no-children-prop) Children should always be actual children, not passed in as a prop. diff --git a/docs/rules/no-danger-with-children.md b/docs/rules/no-danger-with-children.md index 6e36abbb00..ec661df979 100644 --- a/docs/rules/no-danger-with-children.md +++ b/docs/rules/no-danger-with-children.md @@ -1,4 +1,4 @@ -# Prevent problem with children and props.dangerouslySetInnerHTML (react/no-danger-with-children) +# Disallow when a DOM element is using both children and dangerouslySetInnerHTML (react/no-danger-with-children) 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-danger.md b/docs/rules/no-danger.md index e5504c3a46..169f572a56 100644 --- a/docs/rules/no-danger.md +++ b/docs/rules/no-danger.md @@ -1,4 +1,4 @@ -# Prevent usage of dangerous JSX properties (react/no-danger) +# Disallow usage of dangerous JSX properties (react/no-danger) Dangerous properties in React are those whose behavior is known to be a common source of application vulnerabilities. The properties names clearly indicate they are dangerous and should be avoided unless great care is taken. diff --git a/docs/rules/no-deprecated.md b/docs/rules/no-deprecated.md index 165efdb71e..078d27b796 100644 --- a/docs/rules/no-deprecated.md +++ b/docs/rules/no-deprecated.md @@ -1,4 +1,4 @@ -# Prevent usage of deprecated methods (react/no-deprecated) +# Disallow usage of deprecated methods (react/no-deprecated) 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. diff --git a/docs/rules/no-did-mount-set-state.md b/docs/rules/no-did-mount-set-state.md index c2a5c21e70..edee2669c2 100644 --- a/docs/rules/no-did-mount-set-state.md +++ b/docs/rules/no-did-mount-set-state.md @@ -1,4 +1,4 @@ -# Prevent usage of setState in componentDidMount (react/no-did-mount-set-state) +# Disallow usage of setState in componentDidMount (react/no-did-mount-set-state) Updating the state after a component mount will trigger a second `render()` call and can lead to property/layout thrashing. diff --git a/docs/rules/no-did-update-set-state.md b/docs/rules/no-did-update-set-state.md index 24cc5521ee..56ea075cdb 100644 --- a/docs/rules/no-did-update-set-state.md +++ b/docs/rules/no-did-update-set-state.md @@ -1,4 +1,4 @@ -# Prevent usage of setState in componentDidUpdate (react/no-did-update-set-state) +# Disallow usage of setState in componentDidUpdate (react/no-did-update-set-state) Updating the state after a component update will trigger a second `render()` call and can lead to property/layout thrashing. diff --git a/docs/rules/no-direct-mutation-state.md b/docs/rules/no-direct-mutation-state.md index cc0221544f..f1862b39e2 100644 --- a/docs/rules/no-direct-mutation-state.md +++ b/docs/rules/no-direct-mutation-state.md @@ -1,4 +1,4 @@ -# Prevent direct mutation of this.state (react/no-direct-mutation-state) +# Disallow direct mutation of this.state (react/no-direct-mutation-state) NEVER mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable. diff --git a/docs/rules/no-find-dom-node.md b/docs/rules/no-find-dom-node.md index 7ba2417ec6..f95bbec7a7 100644 --- a/docs/rules/no-find-dom-node.md +++ b/docs/rules/no-find-dom-node.md @@ -1,4 +1,4 @@ -# Prevent usage of findDOMNode (react/no-find-dom-node) +# Disallow usage of findDOMNode (react/no-find-dom-node) Facebook will eventually deprecate `findDOMNode` as it blocks certain improvements in React in the future. diff --git a/docs/rules/no-invalid-html-attribute.md b/docs/rules/no-invalid-html-attribute.md index ee6b424f8c..6cbb05e6c0 100644 --- a/docs/rules/no-invalid-html-attribute.md +++ b/docs/rules/no-invalid-html-attribute.md @@ -1,4 +1,4 @@ -# Prevent usage of invalid attributes (react/no-invalid-html-attribute) +# Disallow 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. diff --git a/docs/rules/no-is-mounted.md b/docs/rules/no-is-mounted.md index 3fc68f04da..cbf7d7b69d 100644 --- a/docs/rules/no-is-mounted.md +++ b/docs/rules/no-is-mounted.md @@ -1,4 +1,4 @@ -# Prevent usage of isMounted (react/no-is-mounted) +# Disallow usage of isMounted (react/no-is-mounted) [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and it is on its way to being officially deprecated. diff --git a/docs/rules/no-multi-comp.md b/docs/rules/no-multi-comp.md index 27e0ff610a..e32e1d3fa4 100644 --- a/docs/rules/no-multi-comp.md +++ b/docs/rules/no-multi-comp.md @@ -1,4 +1,4 @@ -# Prevent multiple component definition per file (react/no-multi-comp) +# Disallow multiple component definition per file (react/no-multi-comp) Declaring only one component per file improves readability and reusability of components. diff --git a/docs/rules/no-redundant-should-component-update.md b/docs/rules/no-redundant-should-component-update.md index 9c13ea10ab..c629bd6869 100644 --- a/docs/rules/no-redundant-should-component-update.md +++ b/docs/rules/no-redundant-should-component-update.md @@ -1,4 +1,4 @@ -# Prevent usage of shouldComponentUpdate when extending React.PureComponent (react/no-redundant-should-component-update) +# Disallow usage of shouldComponentUpdate when extending React.PureComponent (react/no-redundant-should-component-update) Warns if you have `shouldComponentUpdate` defined when defining a component that extends React.PureComponent. While having `shouldComponentUpdate` will still work, it becomes pointless to extend PureComponent. diff --git a/docs/rules/no-render-return-value.md b/docs/rules/no-render-return-value.md index 319bfd142b..904d901c8a 100644 --- a/docs/rules/no-render-return-value.md +++ b/docs/rules/no-render-return-value.md @@ -1,4 +1,4 @@ -# Prevent usage of the return value of ReactDOM.render (react/no-render-return-value) +# Disallow usage of the return value of ReactDOM.render (react/no-render-return-value) > `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. diff --git a/docs/rules/no-set-state.md b/docs/rules/no-set-state.md index d6d8404ffd..9eeace3a1c 100644 --- a/docs/rules/no-set-state.md +++ b/docs/rules/no-set-state.md @@ -1,4 +1,4 @@ -# Prevent usage of setState (react/no-set-state) +# Disallow usage of setState (react/no-set-state) When using an architecture that separates your application state from your UI components (e.g. Flux), it may be desirable to forbid the use of local component state. This rule is especially helpful in read-only applications (that don't use forms), since local component state should rarely be necessary in such cases. diff --git a/docs/rules/no-string-refs.md b/docs/rules/no-string-refs.md index 72c799e9ac..a50fb4efb8 100644 --- a/docs/rules/no-string-refs.md +++ b/docs/rules/no-string-refs.md @@ -1,4 +1,4 @@ -# Prevent using string references (react/no-string-refs) +# Disallow using string references (react/no-string-refs) 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. diff --git a/docs/rules/no-this-in-sfc.md b/docs/rules/no-this-in-sfc.md index d322d6fb67..328914369f 100644 --- a/docs/rules/no-this-in-sfc.md +++ b/docs/rules/no-this-in-sfc.md @@ -1,4 +1,4 @@ -# Prevent `this` from being used in stateless functional components (react/no-this-in-sfc) +# Disallow `this` from being used in stateless functional components (react/no-this-in-sfc) In React, there are two styles of component. One is a class component: `class Foo extends React.Component {...}`, which accesses its props, context, and state as properties of `this`: `this.props.foo`, etc. The other are stateless functional components (SFCs): `function Foo(props, context) {...}`. As you can see, there's no `state` (hence the name - hooks do not change this), and the props and context are provided as its two functional arguments. In an SFC, state is usually best implements with a [React hook](https://reactjs.org/docs/hooks-overview.html) such as `React.useState()`. diff --git a/docs/rules/no-typos.md b/docs/rules/no-typos.md index 31f3019da3..6856c953aa 100644 --- a/docs/rules/no-typos.md +++ b/docs/rules/no-typos.md @@ -1,4 +1,4 @@ -# Prevents common typos (react/no-typos) +# Disallow common typos (react/no-typos) Ensure no casing typos were made declaring static class properties and lifecycle methods. Checks that declared `propTypes`, `contextTypes` and `childContextTypes` is supported by [react-props](https://github.com/facebook/prop-types) diff --git a/docs/rules/no-unescaped-entities.md b/docs/rules/no-unescaped-entities.md index 5d8c7aad72..d722b5942d 100644 --- a/docs/rules/no-unescaped-entities.md +++ b/docs/rules/no-unescaped-entities.md @@ -1,4 +1,4 @@ -# Prevent invalid characters from appearing in markup (react/no-unescaped-entities) +# Disallow unescaped HTML entities from appearing in markup (react/no-unescaped-entities) 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 c61389e259..1b1cd43f95 100644 --- a/docs/rules/no-unknown-property.md +++ b/docs/rules/no-unknown-property.md @@ -1,4 +1,4 @@ -# Prevent usage of unknown DOM property (react/no-unknown-property) +# Disallow usage of unknown DOM property (react/no-unknown-property) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. diff --git a/docs/rules/no-unsafe.md b/docs/rules/no-unsafe.md index e9fe9bc975..6e60dfb919 100644 --- a/docs/rules/no-unsafe.md +++ b/docs/rules/no-unsafe.md @@ -1,4 +1,4 @@ -# Prevent usage of unsafe lifecycle methods (react/no-unsafe) +# Disallow usage of unsafe lifecycle methods (react/no-unsafe) Certain legacy lifecycle methods are [unsafe for use in async React applications][async_rendering] and cause warnings in [_strict mode_][strict_mode]. These also happen to be the lifecycles that cause the most [confusion within the React community][component_lifecycle_changes]. diff --git a/docs/rules/no-unstable-nested-components.md b/docs/rules/no-unstable-nested-components.md index 507d83d56e..d6fea98003 100644 --- a/docs/rules/no-unstable-nested-components.md +++ b/docs/rules/no-unstable-nested-components.md @@ -1,4 +1,4 @@ -# Prevent creating unstable components inside components (react/no-unstable-nested-components) +# Disallow creating unstable components inside components (react/no-unstable-nested-components) Creating components inside components without memoization leads to unstable components. The nested component and all its children are recreated during each re-render. Given stateful children of the nested component will lose their state on each re-render. diff --git a/docs/rules/no-unused-class-component-methods.md b/docs/rules/no-unused-class-component-methods.md index 62873e6a53..abe2f8ae21 100644 --- a/docs/rules/no-unused-class-component-methods.md +++ b/docs/rules/no-unused-class-component-methods.md @@ -1,4 +1,4 @@ -# Prevent declaring unused methods of component class (react/no-unused-class-component-methods) +# Disallow declaring unused methods of component class (react/no-unused-class-component-methods) Warns you if you have defined a method or property but it is never being used anywhere. diff --git a/docs/rules/no-unused-prop-types.md b/docs/rules/no-unused-prop-types.md index 2641ddfda1..20a33f195f 100644 --- a/docs/rules/no-unused-prop-types.md +++ b/docs/rules/no-unused-prop-types.md @@ -1,4 +1,4 @@ -# Prevent definitions of unused propTypes (react/no-unused-prop-types) +# Disallow definitions of unused propTypes (react/no-unused-prop-types) Warns if a prop with a defined type isn't being used. diff --git a/docs/rules/no-unused-state.md b/docs/rules/no-unused-state.md index 91afb3ae81..0cf052fe24 100644 --- a/docs/rules/no-unused-state.md +++ b/docs/rules/no-unused-state.md @@ -1,4 +1,4 @@ -# Prevent definitions of unused state (react/no-unused-state) +# Disallow definitions of unused state (react/no-unused-state) Warns you if you have defined a property on the state, but it is not being used anywhere. diff --git a/docs/rules/no-will-update-set-state.md b/docs/rules/no-will-update-set-state.md index c1c033cad1..bdcb07a38b 100644 --- a/docs/rules/no-will-update-set-state.md +++ b/docs/rules/no-will-update-set-state.md @@ -1,4 +1,4 @@ -# Prevent usage of setState in componentWillUpdate (react/no-will-update-set-state) +# Disallow usage of setState in componentWillUpdate (react/no-will-update-set-state) Updating the state during the componentWillUpdate step can lead to indeterminate component state and is not allowed. diff --git a/docs/rules/prefer-es6-class.md b/docs/rules/prefer-es6-class.md index 295930d231..93871536d6 100644 --- a/docs/rules/prefer-es6-class.md +++ b/docs/rules/prefer-es6-class.md @@ -1,6 +1,10 @@ # Enforce ES5 or ES6 class for React Components (react/prefer-es6-class) -React offers you two ways to create traditional components: using the ES5 `create-react-class` module or the new ES6 class system. This rule allows you to enforce one way or another. +React offers you two ways to create traditional components: using the ES5 `create-react-class` module or the new ES6 class system. + +## Rule Details + +This rule allows you to enforce one way or another. ## Rule Options diff --git a/docs/rules/prefer-stateless-function.md b/docs/rules/prefer-stateless-function.md index 54f65a97f0..75b237466e 100644 --- a/docs/rules/prefer-stateless-function.md +++ b/docs/rules/prefer-stateless-function.md @@ -1,4 +1,4 @@ -# Enforce stateless React Components to be written as a pure function (react/prefer-stateless-function) +# Enforce stateless components to be written as a pure function (react/prefer-stateless-function) Stateless functional components are simpler than class based components and will benefit from future React performance optimizations specific to these components. diff --git a/docs/rules/prop-types.md b/docs/rules/prop-types.md index d0c19da791..2afde21e8c 100644 --- a/docs/rules/prop-types.md +++ b/docs/rules/prop-types.md @@ -1,4 +1,4 @@ -# Prevent missing props validation in a React component definition (react/prop-types) +# Disallow missing props validation in a React component definition (react/prop-types) 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 67075a02f2..6af904b2c0 100644 --- a/docs/rules/react-in-jsx-scope.md +++ b/docs/rules/react-in-jsx-scope.md @@ -1,4 +1,4 @@ -# Prevent missing React when using JSX (react/react-in-jsx-scope) +# Disallow missing React when using JSX (react/react-in-jsx-scope) When using JSX, `` expands to `React.createElement("a")`. Therefore the `React` variable must be in scope. diff --git a/docs/rules/self-closing-comp.md b/docs/rules/self-closing-comp.md index 16652eed9e..0dd0b2de51 100644 --- a/docs/rules/self-closing-comp.md +++ b/docs/rules/self-closing-comp.md @@ -1,4 +1,4 @@ -# Prevent extra closing tags for components without children (react/self-closing-comp) +# Disallow extra closing tags for components without children (react/self-closing-comp) πŸ”§ This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. diff --git a/docs/rules/state-in-constructor.md b/docs/rules/state-in-constructor.md index c1f77abb1c..28a2084945 100644 --- a/docs/rules/state-in-constructor.md +++ b/docs/rules/state-in-constructor.md @@ -1,4 +1,6 @@ -# Enforce state initialization style (react/state-in-constructor) +# Enforce class component state initialization style (react/state-in-constructor) + +## Rule Details This rule will enforce the state initialization style to be either in a constructor or with a class property. diff --git a/docs/rules/static-property-placement.md b/docs/rules/static-property-placement.md index b3cd26c52c..e40a594035 100644 --- a/docs/rules/static-property-placement.md +++ b/docs/rules/static-property-placement.md @@ -124,7 +124,7 @@ MyComponent.defaultProps = { /*...*/ }; MyComponent.propTypes = { /*...*/ }; ``` -### Options +## Rule Options ``` ... diff --git a/docs/rules/style-prop-object.md b/docs/rules/style-prop-object.md index b9b6585fd7..175c11d2b1 100644 --- a/docs/rules/style-prop-object.md +++ b/docs/rules/style-prop-object.md @@ -1,4 +1,4 @@ -# Enforce style prop value being an object (react/style-prop-object) +# Enforce style prop value is an object (react/style-prop-object) Require that the value of the prop `style` be an object or a variable that is an object. diff --git a/docs/rules/void-dom-elements-no-children.md b/docs/rules/void-dom-elements-no-children.md index 361b2af3a8..07bcc99688 100644 --- a/docs/rules/void-dom-elements-no-children.md +++ b/docs/rules/void-dom-elements-no-children.md @@ -1,4 +1,4 @@ -# Prevent void DOM elements (e.g. ``, `
`) from receiving children (react/void-dom-elements-no-children) +# Disallow void DOM elements (e.g. ``, `
`) from receiving children (react/void-dom-elements-no-children) There are some HTML elements that are only self-closing (e.g. `img`, `br`, `hr`). These are collectively known as void DOM elements. If you try to give these children, React will give you a warning like: diff --git a/lib/rules/button-has-type.js b/lib/rules/button-has-type.js index 277f6c2a31..204a33c43e 100644 --- a/lib/rules/button-has-type.js +++ b/lib/rules/button-has-type.js @@ -31,7 +31,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Forbid "button" element without an explicit "type" attribute', + description: 'Disallow usage of `button` elements without an explicit `type` attribute', category: 'Possible Errors', recommended: false, url: docsUrl('button-has-type'), diff --git a/lib/rules/default-props-match-prop-types.js b/lib/rules/default-props-match-prop-types.js index 81b5ebb392..85e1632d62 100644 --- a/lib/rules/default-props-match-prop-types.js +++ b/lib/rules/default-props-match-prop-types.js @@ -22,7 +22,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Enforce all defaultProps are defined and not "required" in propTypes.', + description: 'Enforce all defaultProps have a corresponding non-required PropType', category: 'Best Practices', url: docsUrl('default-props-match-prop-types'), }, diff --git a/lib/rules/display-name.js b/lib/rules/display-name.js index c07f9255b4..b25dbb0142 100644 --- a/lib/rules/display-name.js +++ b/lib/rules/display-name.js @@ -26,7 +26,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent missing displayName in a React component definition', + description: 'Disallow missing displayName in a React component definition', category: 'Best Practices', recommended: true, url: docsUrl('display-name'), diff --git a/lib/rules/forbid-component-props.js b/lib/rules/forbid-component-props.js index 5b09323a9d..a155cf1806 100644 --- a/lib/rules/forbid-component-props.js +++ b/lib/rules/forbid-component-props.js @@ -25,7 +25,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Forbid certain props on components', + description: 'Disallow certain props on components', category: 'Best Practices', recommended: false, url: docsUrl('forbid-component-props'), diff --git a/lib/rules/forbid-dom-props.js b/lib/rules/forbid-dom-props.js index 3b48098e3f..3788018614 100644 --- a/lib/rules/forbid-dom-props.js +++ b/lib/rules/forbid-dom-props.js @@ -40,7 +40,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Forbid certain props on DOM Nodes', + description: 'Disallow certain props on DOM Nodes', category: 'Best Practices', recommended: false, url: docsUrl('forbid-dom-props'), diff --git a/lib/rules/forbid-elements.js b/lib/rules/forbid-elements.js index a88ccea8fb..7da8f89f42 100644 --- a/lib/rules/forbid-elements.js +++ b/lib/rules/forbid-elements.js @@ -22,7 +22,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Forbid certain elements', + description: 'Disallow certain elements', category: 'Best Practices', recommended: false, url: docsUrl('forbid-elements'), diff --git a/lib/rules/forbid-foreign-prop-types.js b/lib/rules/forbid-foreign-prop-types.js index 2346e107f6..5d91bf07e3 100644 --- a/lib/rules/forbid-foreign-prop-types.js +++ b/lib/rules/forbid-foreign-prop-types.js @@ -16,7 +16,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Forbid using another component\'s propTypes', + description: 'Disallow using another component\'s propTypes', category: 'Best Practices', recommended: false, url: docsUrl('forbid-foreign-prop-types'), diff --git a/lib/rules/forbid-prop-types.js b/lib/rules/forbid-prop-types.js index f733b9ed0b..92f0f0f51f 100644 --- a/lib/rules/forbid-prop-types.js +++ b/lib/rules/forbid-prop-types.js @@ -28,7 +28,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Forbid certain propTypes', + description: 'Disallow certain propTypes', category: 'Best Practices', recommended: false, url: docsUrl('forbid-prop-types'), diff --git a/lib/rules/function-component-definition.js b/lib/rules/function-component-definition.js index 3e3fc2cab1..8e6103ae8a 100644 --- a/lib/rules/function-component-definition.js +++ b/lib/rules/function-component-definition.js @@ -118,7 +118,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Standardize the way function component get defined', + description: 'Enforce a specific function type for function components', category: 'Stylistic Issues', recommended: false, url: docsUrl('function-component-definition'), diff --git a/lib/rules/hook-use-state.js b/lib/rules/hook-use-state.js index f0826ac64b..2549972121 100644 --- a/lib/rules/hook-use-state.js +++ b/lib/rules/hook-use-state.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Ensure symmetric naming of useState hook value and setter variables', + description: 'Ensure destructuring and symmetric naming of useState hook value and setter variables', category: 'Best Practices', recommended: false, url: docsUrl('hook-use-state'), diff --git a/lib/rules/jsx-child-element-spacing.js b/lib/rules/jsx-child-element-spacing.js index 2f8b41a574..d8d2af67ab 100644 --- a/lib/rules/jsx-child-element-spacing.js +++ b/lib/rules/jsx-child-element-spacing.js @@ -47,7 +47,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Ensures inline tags are not rendered without spaces between them', + description: 'Enforce or disallow spaces inside of curly braces in JSX attributes and expressions', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-child-element-spacing'), @@ -56,14 +56,7 @@ module.exports = { messages, - schema: [ - { - type: 'object', - properties: {}, - default: {}, - additionalProperties: false, - }, - ], + schema: [], }, create(context) { const TEXT_FOLLOWING_ELEMENT_PATTERN = /^\s*\n\s*\S/; diff --git a/lib/rules/jsx-closing-bracket-location.js b/lib/rules/jsx-closing-bracket-location.js index b9e4bab2ad..7e578051d3 100644 --- a/lib/rules/jsx-closing-bracket-location.js +++ b/lib/rules/jsx-closing-bracket-location.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Validate closing bracket location in JSX', + description: 'Enforce closing bracket location in JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-closing-bracket-location'), diff --git a/lib/rules/jsx-closing-tag-location.js b/lib/rules/jsx-closing-tag-location.js index 6299994186..ef68285513 100644 --- a/lib/rules/jsx-closing-tag-location.js +++ b/lib/rules/jsx-closing-tag-location.js @@ -21,7 +21,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Validate closing tag location for multiline JSX', + description: 'Enforce closing tag location for multiline JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-closing-tag-location'), diff --git a/lib/rules/jsx-curly-brace-presence.js b/lib/rules/jsx-curly-brace-presence.js index 485aa0c8ca..efe95e89d6 100755 --- a/lib/rules/jsx-curly-brace-presence.js +++ b/lib/rules/jsx-curly-brace-presence.js @@ -39,7 +39,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes', + description: 'Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-curly-brace-presence'), diff --git a/lib/rules/jsx-curly-newline.js b/lib/rules/jsx-curly-newline.js index f9c7c4a961..d9208e10cd 100644 --- a/lib/rules/jsx-curly-newline.js +++ b/lib/rules/jsx-curly-newline.js @@ -46,7 +46,7 @@ module.exports = { type: 'layout', docs: { - description: 'Enforce consistent line breaks inside jsx curly', + description: 'Enforce consistent linebreaks in curly braces in JSX attributes and expressions', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-curly-newline'), diff --git a/lib/rules/jsx-curly-spacing.js b/lib/rules/jsx-curly-spacing.js index db6a80cbcc..e888b10833 100644 --- a/lib/rules/jsx-curly-spacing.js +++ b/lib/rules/jsx-curly-spacing.js @@ -37,7 +37,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Enforce or disallow spaces inside of curly braces in JSX attributes', + description: 'Enforce or disallow spaces inside of curly braces in JSX attributes and expressions', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-curly-spacing'), diff --git a/lib/rules/jsx-equals-spacing.js b/lib/rules/jsx-equals-spacing.js index 41d123152e..e5eefd2bb5 100644 --- a/lib/rules/jsx-equals-spacing.js +++ b/lib/rules/jsx-equals-spacing.js @@ -22,7 +22,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Disallow or enforce spaces around equal signs in JSX attributes', + description: 'Enforce or disallow spaces around equal signs in JSX attributes', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-equals-spacing'), diff --git a/lib/rules/jsx-filename-extension.js b/lib/rules/jsx-filename-extension.js index fee466f152..ff6f7a7e88 100644 --- a/lib/rules/jsx-filename-extension.js +++ b/lib/rules/jsx-filename-extension.js @@ -30,7 +30,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Restrict file extensions that may contain JSX', + description: 'Disallow file extensions that may contain JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-filename-extension'), diff --git a/lib/rules/jsx-first-prop-new-line.js b/lib/rules/jsx-first-prop-new-line.js index 7d944fc0b7..d301a5f3aa 100644 --- a/lib/rules/jsx-first-prop-new-line.js +++ b/lib/rules/jsx-first-prop-new-line.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Ensure proper position of the first property in JSX', + description: 'Enforce proper position of the first property in JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-first-prop-new-line'), diff --git a/lib/rules/jsx-indent-props.js b/lib/rules/jsx-indent-props.js index c1f52c7957..4b40247da4 100644 --- a/lib/rules/jsx-indent-props.js +++ b/lib/rules/jsx-indent-props.js @@ -45,7 +45,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Validate props indentation in JSX', + description: 'Enforce props indentation in JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-indent-props'), diff --git a/lib/rules/jsx-indent.js b/lib/rules/jsx-indent.js index 6946e35f6b..d66ac50690 100644 --- a/lib/rules/jsx-indent.js +++ b/lib/rules/jsx-indent.js @@ -48,7 +48,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Validate JSX indentation', + description: 'Enforce JSX indentation', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-indent'), diff --git a/lib/rules/jsx-key.js b/lib/rules/jsx-key.js index e3731945a8..385ac6facb 100644 --- a/lib/rules/jsx-key.js +++ b/lib/rules/jsx-key.js @@ -34,7 +34,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Report missing `key` props in iterators/collection literals', + description: 'Disallow missing `key` props in iterators/collection literals', category: 'Possible Errors', recommended: true, url: docsUrl('jsx-key'), diff --git a/lib/rules/jsx-max-depth.js b/lib/rules/jsx-max-depth.js index 417c64188a..f5c72dcc94 100644 --- a/lib/rules/jsx-max-depth.js +++ b/lib/rules/jsx-max-depth.js @@ -23,7 +23,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Validate JSX maximum depth', + description: 'Enforce JSX maximum depth', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-max-depth'), diff --git a/lib/rules/jsx-max-props-per-line.js b/lib/rules/jsx-max-props-per-line.js index 9ae1f6f00d..89e8748521 100644 --- a/lib/rules/jsx-max-props-per-line.js +++ b/lib/rules/jsx-max-props-per-line.js @@ -26,7 +26,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Limit maximum of props on a single line in JSX', + description: 'Enforce maximum of props on a single line in JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-max-props-per-line'), diff --git a/lib/rules/jsx-no-bind.js b/lib/rules/jsx-no-bind.js index 96dfa78dc4..0a4c38e61a 100644 --- a/lib/rules/jsx-no-bind.js +++ b/lib/rules/jsx-no-bind.js @@ -26,7 +26,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevents usage of Function.prototype.bind and arrow functions in React component props', + description: 'Disallow `.bind()` or arrow functions in JSX props', category: 'Best Practices', recommended: false, url: docsUrl('jsx-no-bind'), diff --git a/lib/rules/jsx-no-comment-textnodes.js b/lib/rules/jsx-no-comment-textnodes.js index fbc6d151e6..b33cea0cce 100644 --- a/lib/rules/jsx-no-comment-textnodes.js +++ b/lib/rules/jsx-no-comment-textnodes.js @@ -36,7 +36,7 @@ function checkText(node, context) { module.exports = { meta: { docs: { - description: 'Comments inside children section of tag should be placed inside braces', + description: 'Disallow comments from being inserted as text nodes', category: 'Possible Errors', recommended: true, url: docsUrl('jsx-no-comment-textnodes'), @@ -44,11 +44,7 @@ module.exports = { messages, - schema: [{ - type: 'object', - properties: {}, - additionalProperties: false, - }], + schema: [], }, create(context) { diff --git a/lib/rules/jsx-no-constructed-context-values.js b/lib/rules/jsx-no-constructed-context-values.js index da0409791a..af7c9575df 100644 --- a/lib/rules/jsx-no-constructed-context-values.js +++ b/lib/rules/jsx-no-constructed-context-values.js @@ -131,7 +131,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevents JSX context provider values from taking values that will cause needless rerenders.', + description: 'Disallows JSX context provider values from taking values that will cause needless rerenders', category: 'Best Practices', recommended: false, url: docsUrl('jsx-no-constructed-context-values'), diff --git a/lib/rules/jsx-no-duplicate-props.js b/lib/rules/jsx-no-duplicate-props.js index 109a8c736c..41e17828e2 100644 --- a/lib/rules/jsx-no-duplicate-props.js +++ b/lib/rules/jsx-no-duplicate-props.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Enforce no duplicate props', + description: 'Disallow duplicate properties in JSX', category: 'Possible Errors', recommended: true, url: docsUrl('jsx-no-duplicate-props'), diff --git a/lib/rules/jsx-no-leaked-render.js b/lib/rules/jsx-no-leaked-render.js index 95822060e6..ce4bf91c10 100644 --- a/lib/rules/jsx-no-leaked-render.js +++ b/lib/rules/jsx-no-leaked-render.js @@ -83,7 +83,7 @@ function ruleFixer(context, fixStrategy, fixer, reportedNode, leftNode, rightNod module.exports = { meta: { docs: { - description: 'Prevent problematic leaked values from being rendered', + description: 'Disallow problematic leaked values from being rendered', category: 'Possible Errors', recommended: false, url: docsUrl('jsx-no-leaked-render'), diff --git a/lib/rules/jsx-no-literals.js b/lib/rules/jsx-no-literals.js index 914b253ef7..4349b0829f 100644 --- a/lib/rules/jsx-no-literals.js +++ b/lib/rules/jsx-no-literals.js @@ -27,7 +27,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent using string literals in React component definition', + description: 'Disallow usage of string literals in JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-no-literals'), diff --git a/lib/rules/jsx-no-script-url.js b/lib/rules/jsx-no-script-url.js index 4dfd642dad..425741cf1d 100644 --- a/lib/rules/jsx-no-script-url.js +++ b/lib/rules/jsx-no-script-url.js @@ -50,7 +50,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Forbid `javascript:` URLs', + description: 'Disallow usage of `javascript:` URLs', category: 'Best Practices', recommended: false, url: docsUrl('jsx-no-script-url'), diff --git a/lib/rules/jsx-no-target-blank.js b/lib/rules/jsx-no-target-blank.js index 01dedf7207..ca1eb7c7cb 100644 --- a/lib/rules/jsx-no-target-blank.js +++ b/lib/rules/jsx-no-target-blank.js @@ -113,7 +113,7 @@ module.exports = { meta: { fixable: 'code', docs: { - description: 'Forbid `target="_blank"` attribute without `rel="noreferrer"`', + description: 'Disallow `target="_blank"` attribute without `rel="noreferrer"`', category: 'Best Practices', recommended: true, url: docsUrl('jsx-no-target-blank'), diff --git a/lib/rules/jsx-one-expression-per-line.js b/lib/rules/jsx-one-expression-per-line.js index 3ef929394c..6d0d1575d9 100644 --- a/lib/rules/jsx-one-expression-per-line.js +++ b/lib/rules/jsx-one-expression-per-line.js @@ -24,7 +24,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Limit to one expression per line in JSX', + description: 'Require one JSX element per line', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-one-expression-per-line'), diff --git a/lib/rules/jsx-props-no-spreading.js b/lib/rules/jsx-props-no-spreading.js index 99f7cc5bfa..acbdea797a 100644 --- a/lib/rules/jsx-props-no-spreading.js +++ b/lib/rules/jsx-props-no-spreading.js @@ -41,7 +41,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent JSX prop spreading', + description: 'Disallow JSX prop spreading', category: 'Best Practices', recommended: false, url: docsUrl('jsx-props-no-spreading'), diff --git a/lib/rules/jsx-sort-default-props.js b/lib/rules/jsx-sort-default-props.js index d291066d45..f7062b81c5 100644 --- a/lib/rules/jsx-sort-default-props.js +++ b/lib/rules/jsx-sort-default-props.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Enforce default props alphabetical sorting', + description: 'Enforce defaultProps declarations alphabetical sorting', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-sort-default-props'), diff --git a/lib/rules/jsx-space-before-closing.js b/lib/rules/jsx-space-before-closing.js index c053d84393..5bb8da622b 100644 --- a/lib/rules/jsx-space-before-closing.js +++ b/lib/rules/jsx-space-before-closing.js @@ -26,7 +26,7 @@ module.exports = { meta: { deprecated: true, docs: { - description: 'Validate spacing before closing bracket in JSX', + description: 'Enforce spacing before closing bracket in JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-space-before-closing'), diff --git a/lib/rules/jsx-tag-spacing.js b/lib/rules/jsx-tag-spacing.js index 421fb7fbc2..e7c632b479 100644 --- a/lib/rules/jsx-tag-spacing.js +++ b/lib/rules/jsx-tag-spacing.js @@ -258,7 +258,7 @@ const optionDefaults = { module.exports = { meta: { docs: { - description: 'Validate whitespace in and around the JSX opening and closing brackets', + description: 'Enforce whitespace in and around the JSX opening and closing brackets', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-tag-spacing'), diff --git a/lib/rules/jsx-uses-react.js b/lib/rules/jsx-uses-react.js index 0ca7694f99..2bc2963d9e 100644 --- a/lib/rules/jsx-uses-react.js +++ b/lib/rules/jsx-uses-react.js @@ -16,7 +16,7 @@ module.exports = { // eslint-disable-next-line eslint-plugin/prefer-message-ids -- https://github.com/not-an-aardvark/eslint-plugin-eslint-plugin/issues/292 meta: { docs: { - description: 'Prevent React to be marked as unused', + description: 'Disallow React to be incorrectly marked as unused', category: 'Best Practices', recommended: true, url: docsUrl('jsx-uses-react'), diff --git a/lib/rules/jsx-uses-vars.js b/lib/rules/jsx-uses-vars.js index be90ad54a9..a178d50565 100644 --- a/lib/rules/jsx-uses-vars.js +++ b/lib/rules/jsx-uses-vars.js @@ -18,7 +18,7 @@ module.exports = { // eslint-disable-next-line eslint-plugin/prefer-message-ids -- https://github.com/not-an-aardvark/eslint-plugin-eslint-plugin/issues/292 meta: { docs: { - description: 'Prevent variables used in JSX to be marked as unused', + description: 'Disallow variables used in JSX to be incorrectly marked as unused', category: 'Best Practices', recommended: true, url: docsUrl('jsx-uses-vars'), diff --git a/lib/rules/jsx-wrap-multilines.js b/lib/rules/jsx-wrap-multilines.js index f865cb970a..5f0a5ec183 100644 --- a/lib/rules/jsx-wrap-multilines.js +++ b/lib/rules/jsx-wrap-multilines.js @@ -37,7 +37,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent missing parentheses around multilines JSX', + description: 'Disallow missing parentheses around multiline JSX', category: 'Stylistic Issues', recommended: false, url: docsUrl('jsx-wrap-multilines'), diff --git a/lib/rules/no-access-state-in-setstate.js b/lib/rules/no-access-state-in-setstate.js index 2577301851..4ff5a840bf 100644 --- a/lib/rules/no-access-state-in-setstate.js +++ b/lib/rules/no-access-state-in-setstate.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Reports when this.state is accessed within setState', + description: 'Disallow when this.state is accessed within setState', category: 'Possible Errors', recommended: false, url: docsUrl('no-access-state-in-setstate'), diff --git a/lib/rules/no-adjacent-inline-elements.js b/lib/rules/no-adjacent-inline-elements.js index 7c622f2eb2..60e404ba22 100644 --- a/lib/rules/no-adjacent-inline-elements.js +++ b/lib/rules/no-adjacent-inline-elements.js @@ -79,7 +79,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent adjacent inline elements not separated by whitespace.', + description: 'Disallow adjacent inline elements not separated by whitespace.', category: 'Best Practices', recommended: false, url: docsUrl('no-adjacent-inline-elements'), diff --git a/lib/rules/no-array-index-key.js b/lib/rules/no-array-index-key.js index fa18924d38..0e641b58fb 100644 --- a/lib/rules/no-array-index-key.js +++ b/lib/rules/no-array-index-key.js @@ -44,7 +44,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of Array index in keys', + description: 'Disallow usage of Array index in keys', category: 'Best Practices', recommended: false, url: docsUrl('no-array-index-key'), diff --git a/lib/rules/no-children-prop.js b/lib/rules/no-children-prop.js index 5bd114a464..440e61e945 100644 --- a/lib/rules/no-children-prop.js +++ b/lib/rules/no-children-prop.js @@ -40,7 +40,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent passing of children as props.', + description: 'Disallow passing of children as props', category: 'Best Practices', recommended: true, url: docsUrl('no-children-prop'), diff --git a/lib/rules/no-danger-with-children.js b/lib/rules/no-danger-with-children.js index 399d202313..17d55930ff 100644 --- a/lib/rules/no-danger-with-children.js +++ b/lib/rules/no-danger-with-children.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Report when a DOM element is using both children and dangerouslySetInnerHTML', + description: 'Disallow when a DOM element is using both children and dangerouslySetInnerHTML', category: 'Possible Errors', recommended: true, url: docsUrl('no-danger-with-children'), diff --git a/lib/rules/no-danger.js b/lib/rules/no-danger.js index 2fb3ddc999..3b54427cd9 100644 --- a/lib/rules/no-danger.js +++ b/lib/rules/no-danger.js @@ -46,7 +46,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of dangerous JSX props', + description: 'Disallow usage of dangerous JSX properties', category: 'Best Practices', recommended: false, url: docsUrl('no-danger'), diff --git a/lib/rules/no-deprecated.js b/lib/rules/no-deprecated.js index b8d42272c7..ac7beb1804 100644 --- a/lib/rules/no-deprecated.js +++ b/lib/rules/no-deprecated.js @@ -92,7 +92,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of deprecated methods', + description: 'Disallow usage of deprecated methods', category: 'Best Practices', recommended: true, url: docsUrl('no-deprecated'), diff --git a/lib/rules/no-direct-mutation-state.js b/lib/rules/no-direct-mutation-state.js index 573ff1bc1a..116f2e4bb9 100644 --- a/lib/rules/no-direct-mutation-state.js +++ b/lib/rules/no-direct-mutation-state.js @@ -22,7 +22,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent direct mutation of this.state', + description: 'Disallow direct mutation of this.state', category: 'Possible Errors', recommended: true, url: docsUrl('no-direct-mutation-state'), diff --git a/lib/rules/no-find-dom-node.js b/lib/rules/no-find-dom-node.js index 510a79efc8..0dae59da43 100644 --- a/lib/rules/no-find-dom-node.js +++ b/lib/rules/no-find-dom-node.js @@ -19,7 +19,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of findDOMNode', + description: 'Disallow usage of findDOMNode', category: 'Best Practices', recommended: true, url: docsUrl('no-find-dom-node'), diff --git a/lib/rules/no-invalid-html-attribute.js b/lib/rules/no-invalid-html-attribute.js index 274f2586da..9ba7bfa163 100644 --- a/lib/rules/no-invalid-html-attribute.js +++ b/lib/rules/no-invalid-html-attribute.js @@ -533,7 +533,7 @@ module.exports = { meta: { fixable: 'code', docs: { - description: 'Forbid attribute with an invalid values`', + description: 'Disallow usage of invalid attributes', category: 'Possible Errors', url: docsUrl('no-invalid-html-attribute'), }, diff --git a/lib/rules/no-is-mounted.js b/lib/rules/no-is-mounted.js index dc9db24f28..c15b6e81a4 100644 --- a/lib/rules/no-is-mounted.js +++ b/lib/rules/no-is-mounted.js @@ -19,7 +19,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of isMounted', + description: 'Disallow usage of isMounted', category: 'Best Practices', recommended: true, url: docsUrl('no-is-mounted'), diff --git a/lib/rules/no-multi-comp.js b/lib/rules/no-multi-comp.js index 4900063f1f..1e5aa66c8b 100644 --- a/lib/rules/no-multi-comp.js +++ b/lib/rules/no-multi-comp.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent multiple component definition per file', + description: 'Disallow multiple component definition per file', category: 'Stylistic Issues', recommended: false, url: docsUrl('no-multi-comp'), diff --git a/lib/rules/no-namespace.js b/lib/rules/no-namespace.js index 929fb2bf88..64bbc8d521 100644 --- a/lib/rules/no-namespace.js +++ b/lib/rules/no-namespace.js @@ -29,10 +29,7 @@ module.exports = { messages, - schema: [{ - type: 'object', - additionalProperties: false, - }], + schema: [], }, create(context) { diff --git a/lib/rules/no-redundant-should-component-update.js b/lib/rules/no-redundant-should-component-update.js index b4a7c5d068..bf7601a2c4 100644 --- a/lib/rules/no-redundant-should-component-update.js +++ b/lib/rules/no-redundant-should-component-update.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Flag shouldComponentUpdate when extending PureComponent', + description: 'Disallow usage of shouldComponentUpdate when extending React.PureComponent', category: 'Possible Errors', recommended: false, url: docsUrl('no-redundant-should-component-update'), diff --git a/lib/rules/no-render-return-value.js b/lib/rules/no-render-return-value.js index c243f30759..61818a92aa 100644 --- a/lib/rules/no-render-return-value.js +++ b/lib/rules/no-render-return-value.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of the return value of React.render', + description: 'Disallow usage of the return value of ReactDOM.render', category: 'Best Practices', recommended: true, url: docsUrl('no-render-return-value'), diff --git a/lib/rules/no-set-state.js b/lib/rules/no-set-state.js index 444840d5e6..b91d10814f 100644 --- a/lib/rules/no-set-state.js +++ b/lib/rules/no-set-state.js @@ -20,7 +20,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of setState', + description: 'Disallow usage of setState', category: 'Stylistic Issues', recommended: false, url: docsUrl('no-set-state'), diff --git a/lib/rules/no-string-refs.js b/lib/rules/no-string-refs.js index 40ee15505a..2decbbe6bb 100644 --- a/lib/rules/no-string-refs.js +++ b/lib/rules/no-string-refs.js @@ -21,7 +21,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent string definitions for references and prevent referencing this.refs', + description: 'Disallow using string references', category: 'Best Practices', recommended: true, url: docsUrl('no-string-refs'), diff --git a/lib/rules/no-this-in-sfc.js b/lib/rules/no-this-in-sfc.js index e5af824064..9c1535ef0b 100644 --- a/lib/rules/no-this-in-sfc.js +++ b/lib/rules/no-this-in-sfc.js @@ -19,7 +19,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Report "this" being used in stateless components', + description: 'Disallow `this` from being used in stateless functional components', category: 'Possible Errors', recommended: false, url: docsUrl('no-this-in-sfc'), diff --git a/lib/rules/no-typos.js b/lib/rules/no-typos.js index be64da58b9..f1f727f029 100644 --- a/lib/rules/no-typos.js +++ b/lib/rules/no-typos.js @@ -31,7 +31,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent common typos', + description: 'Disallow common typos', category: 'Stylistic Issues', recommended: false, url: docsUrl('no-typos'), diff --git a/lib/rules/no-unescaped-entities.js b/lib/rules/no-unescaped-entities.js index e5a16da9a8..6560a461f0 100644 --- a/lib/rules/no-unescaped-entities.js +++ b/lib/rules/no-unescaped-entities.js @@ -38,7 +38,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Detect unescaped HTML entities, which might represent malformed tags', + description: 'Disallow unescaped HTML entities from appearing in markup', category: 'Possible Errors', recommended: true, url: docsUrl('no-unescaped-entities'), diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js index 7e5099347f..09cf54818c 100644 --- a/lib/rules/no-unknown-property.js +++ b/lib/rules/no-unknown-property.js @@ -221,7 +221,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of unknown DOM property', + description: 'Disallow usage of unknown DOM property', category: 'Possible Errors', recommended: true, url: docsUrl('no-unknown-property'), diff --git a/lib/rules/no-unsafe.js b/lib/rules/no-unsafe.js index 48fa0ec7fa..6910d5e327 100644 --- a/lib/rules/no-unsafe.js +++ b/lib/rules/no-unsafe.js @@ -22,7 +22,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent usage of unsafe lifecycle methods', + description: 'Disallow usage of unsafe lifecycle methods', category: 'Best Practices', recommended: false, url: docsUrl('no-unsafe'), diff --git a/lib/rules/no-unstable-nested-components.js b/lib/rules/no-unstable-nested-components.js index 51559ce9e1..af6d697f14 100644 --- a/lib/rules/no-unstable-nested-components.js +++ b/lib/rules/no-unstable-nested-components.js @@ -268,7 +268,7 @@ function resolveComponentName(node) { module.exports = { meta: { docs: { - description: 'Prevent creating unstable components inside components', + description: 'Disallow creating unstable components inside components', category: 'Possible Errors', recommended: false, url: docsUrl('no-unstable-nested-components'), diff --git a/lib/rules/no-unused-class-component-methods.js b/lib/rules/no-unused-class-component-methods.js index 9d15618bd2..3531177d2d 100644 --- a/lib/rules/no-unused-class-component-methods.js +++ b/lib/rules/no-unused-class-component-methods.js @@ -101,18 +101,13 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent declaring unused methods of component class', + description: 'Disallow declaring unused methods of component class', category: 'Best Practices', recommended: false, url: docsUrl('no-unused-class-component-methods'), }, messages, - schema: [ - { - type: 'object', - additionalProperties: false, - }, - ], + schema: [], }, create: ((context) => { diff --git a/lib/rules/no-unused-prop-types.js b/lib/rules/no-unused-prop-types.js index eae9c5d700..9259462a45 100644 --- a/lib/rules/no-unused-prop-types.js +++ b/lib/rules/no-unused-prop-types.js @@ -23,7 +23,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent definitions of unused prop types', + description: 'Disallow definitions of unused propTypes', category: 'Best Practices', recommended: false, url: docsUrl('no-unused-prop-types'), diff --git a/lib/rules/no-unused-state.js b/lib/rules/no-unused-state.js index 2c89f16b95..97a8eeeb2a 100644 --- a/lib/rules/no-unused-state.js +++ b/lib/rules/no-unused-state.js @@ -80,7 +80,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent definition of unused state fields', + description: 'Disallow definitions of unused state', category: 'Best Practices', recommended: false, url: docsUrl('no-unused-state'), diff --git a/lib/rules/prefer-read-only-props.js b/lib/rules/prefer-read-only-props.js index f1eb3c3d7c..a851051989 100644 --- a/lib/rules/prefer-read-only-props.js +++ b/lib/rules/prefer-read-only-props.js @@ -35,7 +35,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Require read-only props.', + description: 'Enforce that props are read-only', category: 'Stylistic Issues', recommended: false, url: docsUrl('prefer-read-only-props'), diff --git a/lib/rules/prop-types.js b/lib/rules/prop-types.js index 735308a6f3..2be4feced9 100644 --- a/lib/rules/prop-types.js +++ b/lib/rules/prop-types.js @@ -23,7 +23,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent missing props validation in a React component definition', + description: 'Disallow missing props validation in a React component definition', category: 'Best Practices', recommended: true, url: docsUrl('prop-types'), diff --git a/lib/rules/react-in-jsx-scope.js b/lib/rules/react-in-jsx-scope.js index 4c277ce140..e1ee1b6d8c 100644 --- a/lib/rules/react-in-jsx-scope.js +++ b/lib/rules/react-in-jsx-scope.js @@ -21,7 +21,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent missing React when using JSX', + description: 'Disallow missing React when using JSX', category: 'Possible Errors', recommended: true, url: docsUrl('react-in-jsx-scope'), diff --git a/lib/rules/require-default-props.js b/lib/rules/require-default-props.js index b5de236c5f..3976e9d833 100644 --- a/lib/rules/require-default-props.js +++ b/lib/rules/require-default-props.js @@ -27,7 +27,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Enforce a defaultProps definition for every prop that is not a required prop.', + description: 'Enforce a defaultProps definition for every prop that is not a required prop', category: 'Best Practices', url: docsUrl('require-default-props'), }, diff --git a/lib/rules/self-closing-comp.js b/lib/rules/self-closing-comp.js index 94672ecac8..2144db599e 100644 --- a/lib/rules/self-closing-comp.js +++ b/lib/rules/self-closing-comp.js @@ -22,7 +22,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Prevent extra closing tags for components without children', + description: 'Disallow extra closing tags for components without children', category: 'Stylistic Issues', recommended: false, url: docsUrl('self-closing-comp'), diff --git a/lib/rules/state-in-constructor.js b/lib/rules/state-in-constructor.js index 8f52fb0f02..e6cc87b283 100644 --- a/lib/rules/state-in-constructor.js +++ b/lib/rules/state-in-constructor.js @@ -22,7 +22,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'State initialization in an ES6 class component should be in a constructor', + description: 'Enforce class component state initialization style', category: 'Stylistic Issues', recommended: false, url: docsUrl('state-in-constructor'), diff --git a/lib/rules/static-property-placement.js b/lib/rules/static-property-placement.js index 3be4df5ef8..27805b8ba7 100644 --- a/lib/rules/static-property-placement.js +++ b/lib/rules/static-property-placement.js @@ -58,7 +58,7 @@ const messages = { module.exports = { meta: { docs: { - description: 'Defines where React component static properties should be positioned.', + description: 'Enforces where React component static properties should be positioned.', category: 'Stylistic Issues', recommended: false, url: docsUrl('static-property-placement'), diff --git a/lib/rules/void-dom-elements-no-children.js b/lib/rules/void-dom-elements-no-children.js index df791aee68..721ffae872 100644 --- a/lib/rules/void-dom-elements-no-children.js +++ b/lib/rules/void-dom-elements-no-children.js @@ -50,7 +50,7 @@ const noChildrenInVoidEl = 'Void DOM element <{{element}} /> cannot receive chil module.exports = { meta: { docs: { - description: 'Prevent passing of children to void DOM elements (e.g. `
`).', + description: 'Disallow void DOM elements (e.g. ``, `
`) from receiving children', category: 'Best Practices', recommended: false, url: docsUrl('void-dom-elements-no-children'), diff --git a/lib/util/makeNoMethodSetStateRule.js b/lib/util/makeNoMethodSetStateRule.js index 23346a9a6b..20049cb484 100644 --- a/lib/util/makeNoMethodSetStateRule.js +++ b/lib/util/makeNoMethodSetStateRule.js @@ -45,7 +45,7 @@ module.exports = function makeNoMethodSetStateRule(methodName, shouldCheckUnsafe return { meta: { docs: { - description: `Prevent usage of setState in ${methodName}`, + description: `Disallow usage of setState in ${methodName}`, category: 'Best Practices', recommended: false, url: docsUrl(mapTitle(methodName)), diff --git a/tests/index.js b/tests/index.js index 75355f1fa1..06e992abda 100644 --- a/tests/index.js +++ b/tests/index.js @@ -29,36 +29,57 @@ describe('rule documentation files have the correct content', () => { }; 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; - }); + it(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'); + + // Check title. + const expectedTitle = `# ${rule.meta.docs.description} (react/${ruleName})`; + assert.strictEqual(documentLines[0], expectedTitle, 'includes the rule description and name in title'); + + // 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 unexpected notices are not present. - unexpectedNotices.forEach((unexpectedNotice) => { - assert.ok(!documentContents.includes(MESSAGES[unexpectedNotice]), `${ruleName} does not include unexpected ${unexpectedNotice} notice`); + // Ensure that expected notices are present in the correct order. + let currentLineNumber = 1; + expectedNotices.forEach((expectedNotice) => { + assert.strictEqual(documentLines[currentLineNumber], '', `includes blank line ahead of ${expectedNotice} notice`); + assert.strictEqual(documentLines[currentLineNumber + 1], MESSAGES[expectedNotice], `includes ${expectedNotice} notice`); + currentLineNumber += 2; + }); + + // Ensure that unexpected notices are not present. + unexpectedNotices.forEach((unexpectedNotice) => { + assert.ok(!documentContents.includes(MESSAGES[unexpectedNotice]), `does not include unexpected ${unexpectedNotice} notice`); + }); + + // Check for Rule Details section. + assert.ok(documentContents.includes('## Rule Details'), 'should have a "## Rule Details" section'); + + // Check if the rule has configuration options. + if ( + (Array.isArray(rule.meta.schema) && rule.meta.schema.length > 0) + || (typeof rule.meta.schema === 'object' && Object.keys(rule.meta.schema).length > 0) + ) { + // Should have an options section header: + assert.ok(documentContents.includes('## Rule Options'), 'should have a "## Rule Options" section'); + } else { + // Should NOT have any options section header: + assert.ok(!documentContents.includes('## Rule Options'), 'should not have a "## Rule Options" section'); + } }); }); });