From 15c0f53429b66c52ba5104c0c64b934e904f9c6f Mon Sep 17 00:00:00 2001 From: Bryan Mishkin <698306+bmish@users.noreply.github.com> Date: Thu, 20 Oct 2022 13:43:13 -0400 Subject: [PATCH] docs: automate docs with eslint-doc-generator --- .github/workflows/readme.yml | 17 -- README.md | 227 +++++++++--------- docs/rules/boolean-prop-naming.md | 4 +- docs/rules/button-has-type.md | 4 +- docs/rules/default-props-match-prop-types.md | 4 +- docs/rules/destructuring-assignment.md | 6 +- docs/rules/display-name.md | 6 +- docs/rules/forbid-component-props.md | 4 +- docs/rules/forbid-dom-props.md | 4 +- docs/rules/forbid-elements.md | 4 +- docs/rules/forbid-foreign-prop-types.md | 4 +- docs/rules/forbid-prop-types.md | 4 +- docs/rules/function-component-definition.md | 6 +- docs/rules/hook-use-state.md | 6 +- docs/rules/iframe-missing-sandbox.md | 4 +- docs/rules/jsx-boolean-value.md | 6 +- docs/rules/jsx-child-element-spacing.md | 4 +- docs/rules/jsx-closing-bracket-location.md | 6 +- docs/rules/jsx-closing-tag-location.md | 6 +- docs/rules/jsx-curly-brace-presence.md | 6 +- docs/rules/jsx-curly-newline.md | 6 +- docs/rules/jsx-curly-spacing.md | 6 +- docs/rules/jsx-equals-spacing.md | 6 +- docs/rules/jsx-filename-extension.md | 4 +- docs/rules/jsx-first-prop-new-line.md | 6 +- docs/rules/jsx-fragments.md | 6 +- docs/rules/jsx-handler-names.md | 4 +- docs/rules/jsx-indent-props.md | 6 +- docs/rules/jsx-indent.md | 6 +- docs/rules/jsx-key.md | 6 +- docs/rules/jsx-max-depth.md | 4 +- docs/rules/jsx-max-props-per-line.md | 6 +- docs/rules/jsx-newline.md | 6 +- docs/rules/jsx-no-bind.md | 4 +- docs/rules/jsx-no-comment-textnodes.md | 6 +- .../jsx-no-constructed-context-values.md | 4 +- docs/rules/jsx-no-duplicate-props.md | 6 +- docs/rules/jsx-no-leaked-render.md | 6 +- docs/rules/jsx-no-literals.md | 4 +- docs/rules/jsx-no-script-url.md | 4 +- docs/rules/jsx-no-target-blank.md | 8 +- docs/rules/jsx-no-undef.md | 6 +- docs/rules/jsx-no-useless-fragment.md | 6 +- docs/rules/jsx-one-expression-per-line.md | 6 +- docs/rules/jsx-pascal-case.md | 4 +- docs/rules/jsx-props-no-multi-spaces.md | 6 +- docs/rules/jsx-props-no-spreading.md | 4 +- docs/rules/jsx-sort-default-props.md | 6 +- docs/rules/jsx-sort-props.md | 6 +- docs/rules/jsx-space-before-closing.md | 10 +- docs/rules/jsx-tag-spacing.md | 6 +- docs/rules/jsx-uses-react.md | 6 +- docs/rules/jsx-uses-vars.md | 6 +- docs/rules/jsx-wrap-multilines.md | 6 +- docs/rules/no-access-state-in-setstate.md | 4 +- docs/rules/no-adjacent-inline-elements.md | 4 +- docs/rules/no-array-index-key.md | 4 +- docs/rules/no-arrow-function-lifecycle.md | 6 +- docs/rules/no-children-prop.md | 6 +- docs/rules/no-danger-with-children.md | 6 +- docs/rules/no-danger.md | 4 +- docs/rules/no-deprecated.md | 6 +- docs/rules/no-did-mount-set-state.md | 4 +- docs/rules/no-did-update-set-state.md | 4 +- docs/rules/no-direct-mutation-state.md | 6 +- docs/rules/no-find-dom-node.md | 6 +- docs/rules/no-invalid-html-attribute.md | 6 +- docs/rules/no-is-mounted.md | 6 +- docs/rules/no-multi-comp.md | 4 +- docs/rules/no-namespace.md | 4 +- docs/rules/no-object-type-as-default-prop.md | 4 +- .../no-redundant-should-component-update.md | 4 +- docs/rules/no-render-return-value.md | 6 +- docs/rules/no-set-state.md | 4 +- docs/rules/no-string-refs.md | 6 +- docs/rules/no-this-in-sfc.md | 4 +- docs/rules/no-typos.md | 4 +- docs/rules/no-unescaped-entities.md | 6 +- docs/rules/no-unknown-property.md | 8 +- docs/rules/no-unsafe.md | 4 +- docs/rules/no-unstable-nested-components.md | 4 +- .../no-unused-class-component-methods.md | 4 +- docs/rules/no-unused-prop-types.md | 4 +- docs/rules/no-unused-state.md | 4 +- docs/rules/no-will-update-set-state.md | 4 +- docs/rules/prefer-es6-class.md | 4 +- docs/rules/prefer-exact-props.md | 4 +- docs/rules/prefer-read-only-props.md | 6 +- docs/rules/prefer-stateless-function.md | 4 +- docs/rules/prop-types.md | 6 +- docs/rules/react-in-jsx-scope.md | 6 +- docs/rules/require-default-props.md | 4 +- docs/rules/require-optimization.md | 4 +- docs/rules/require-render-return.md | 6 +- docs/rules/self-closing-comp.md | 6 +- docs/rules/sort-comp.md | 4 +- docs/rules/sort-default-props.md | 4 +- docs/rules/sort-prop-types.md | 6 +- docs/rules/state-in-constructor.md | 4 +- docs/rules/static-property-placement.md | 4 +- docs/rules/style-prop-object.md | 4 +- docs/rules/void-dom-elements-no-children.md | 4 +- lib/rules/jsx-sort-default-props.js | 1 + lib/rules/jsx-space-before-closing.js | 1 + lib/rules/no-unstable-nested-components.js | 6 - markdown.config.js | 41 ---- package.json | 8 +- tests/index.js | 111 --------- 108 files changed, 398 insertions(+), 524 deletions(-) delete mode 100644 .github/workflows/readme.yml delete mode 100644 markdown.config.js diff --git a/.github/workflows/readme.yml b/.github/workflows/readme.yml deleted file mode 100644 index 3b2903532e..0000000000 --- a/.github/workflows/readme.yml +++ /dev/null @@ -1,17 +0,0 @@ -name: 'Tests: readme' - -on: [pull_request, push] - -jobs: - readme: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v2 - - uses: ljharb/actions/node/install@main - name: 'nvm install lts/* && npm install' - with: - node-version: 'lts/*' - env: - NPM_CONFIG_LEGACY_PEER_DEPS: true - - run: npm run generate-list-of-rules:check diff --git a/README.md b/README.md index 0c0d278704..4d9b0ad2e4 100644 --- a/README.md +++ b/README.md @@ -279,121 +279,118 @@ module.exports = [ ## List of supported rules -✔: Enabled in the [`recommended`](#recommended) configuration.\ -🔧: Fixable with [`eslint --fix`](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems).\ -💡: Provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions). - - -| ✔ | 🔧 | 💡 | Rule | Description | -| :---: | :---: | :---: | :--- | :--- | -| | | | [react/boolean-prop-naming](docs/rules/boolean-prop-naming.md) | Enforces consistent naming for boolean props | -| | | | [react/button-has-type](docs/rules/button-has-type.md) | 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) | 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) | 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) | 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-object-type-as-default-prop](docs/rules/no-object-type-as-default-prop.md) | Disallow usage of referential-type variables as default param in functional component | -| | | | [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) | 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) | 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) | Disallow extra closing tags for components without children | -| | | | [react/sort-comp](docs/rules/sort-comp.md) | Enforce component methods order | -| | | | [react/sort-default-props](docs/rules/sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting | -| | 🔧 | | [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) | 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) | Disallow void DOM elements (e.g. ``, `
`) from receiving children | - - -### JSX-specific rules - - -| ✔ | 🔧 | 💡 | Rule | Description | -| :---: | :---: | :---: | :--- | :--- | -| | 🔧 | | [react/jsx-boolean-value](docs/rules/jsx-boolean-value.md) | Enforce boolean attributes notation in JSX | -| | | | [react/jsx-child-element-spacing](docs/rules/jsx-child-element-spacing.md) | 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) | 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) | 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) | 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) | Disallow JSX prop spreading | -| | | | [react/jsx-sort-default-props](docs/rules/jsx-sort-default-props.md) | Enforce defaultProps declarations alphabetical sorting. ❌ This rule is deprecated. | -| | 🔧 | | [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) | Enforce spacing before closing bracket in JSX. ❌ This rule is deprecated. | -| | 🔧 | | [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 | - + + +💼 [Configurations](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs) enabled in.\ +✅ Enabled in the `recommended` [configuration](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs).\ +🔧 Automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix).\ +💡 Manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).\ +❌ Deprecated. + +Name                                |Description|💼|🔧|💡|❌| +:--|:--|:--|:--|:--|:--| +[boolean-prop-naming](docs/rules/boolean-prop-naming.md)|Enforces consistent naming for boolean props||||| +[button-has-type](docs/rules/button-has-type.md)|Disallow usage of `button` elements without an explicit `type` attribute||||| +[default-props-match-prop-types](docs/rules/default-props-match-prop-types.md)|Enforce all defaultProps have a corresponding non-required PropType||||| +[destructuring-assignment](docs/rules/destructuring-assignment.md)|Enforce consistent usage of destructuring assignment of props, state, and context||🔧||| +[display-name](docs/rules/display-name.md)|Disallow missing displayName in a React component definition|✅|||| +[forbid-component-props](docs/rules/forbid-component-props.md)|Disallow certain props on components||||| +[forbid-dom-props](docs/rules/forbid-dom-props.md)|Disallow certain props on DOM Nodes||||| +[forbid-elements](docs/rules/forbid-elements.md)|Disallow certain elements||||| +[forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md)|Disallow using another component's propTypes||||| +[forbid-prop-types](docs/rules/forbid-prop-types.md)|Disallow certain propTypes||||| +[function-component-definition](docs/rules/function-component-definition.md)|Enforce a specific function type for function components||🔧||| +[hook-use-state](docs/rules/hook-use-state.md)|Ensure destructuring and symmetric naming of useState hook value and setter variables|||💡|| +[iframe-missing-sandbox](docs/rules/iframe-missing-sandbox.md)|Enforce sandbox attribute on iframe elements||||| +[jsx-boolean-value](docs/rules/jsx-boolean-value.md)|Enforce boolean attributes notation in JSX||🔧||| +[jsx-child-element-spacing](docs/rules/jsx-child-element-spacing.md)|Enforce or disallow spaces inside of curly braces in JSX attributes and expressions||||| +[jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md)|Enforce closing bracket location in JSX||🔧||| +[jsx-closing-tag-location](docs/rules/jsx-closing-tag-location.md)|Enforce closing tag location for multiline JSX||🔧||| +[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||🔧||| +[jsx-curly-newline](docs/rules/jsx-curly-newline.md)|Enforce consistent linebreaks in curly braces in JSX attributes and expressions||🔧||| +[jsx-curly-spacing](docs/rules/jsx-curly-spacing.md)|Enforce or disallow spaces inside of curly braces in JSX attributes and expressions||🔧||| +[jsx-equals-spacing](docs/rules/jsx-equals-spacing.md)|Enforce or disallow spaces around equal signs in JSX attributes||🔧||| +[jsx-filename-extension](docs/rules/jsx-filename-extension.md)|Disallow file extensions that may contain JSX||||| +[jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md)|Enforce proper position of the first property in JSX||🔧||| +[jsx-fragments](docs/rules/jsx-fragments.md)|Enforce shorthand or standard form for React fragments||🔧||| +[jsx-handler-names](docs/rules/jsx-handler-names.md)|Enforce event handler naming conventions in JSX||||| +[jsx-indent](docs/rules/jsx-indent.md)|Enforce JSX indentation||🔧||| +[jsx-indent-props](docs/rules/jsx-indent-props.md)|Enforce props indentation in JSX||🔧||| +[jsx-key](docs/rules/jsx-key.md)|Disallow missing `key` props in iterators/collection literals|✅|||| +[jsx-max-depth](docs/rules/jsx-max-depth.md)|Enforce JSX maximum depth||||| +[jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md)|Enforce maximum of props on a single line in JSX||🔧||| +[jsx-newline](docs/rules/jsx-newline.md)|Require or prevent a new line after jsx elements and expressions.||🔧||| +[jsx-no-bind](docs/rules/jsx-no-bind.md)|Disallow `.bind()` or arrow functions in JSX props||||| +[jsx-no-comment-textnodes](docs/rules/jsx-no-comment-textnodes.md)|Disallow comments from being inserted as text nodes|✅|||| +[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||||| +[jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md)|Disallow duplicate properties in JSX|✅|||| +[jsx-no-leaked-render](docs/rules/jsx-no-leaked-render.md)|Disallow problematic leaked values from being rendered||🔧||| +[jsx-no-literals](docs/rules/jsx-no-literals.md)|Disallow usage of string literals in JSX||||| +[jsx-no-script-url](docs/rules/jsx-no-script-url.md)|Disallow usage of `javascript:` URLs||||| +[jsx-no-target-blank](docs/rules/jsx-no-target-blank.md)|Disallow `target="_blank"` attribute without `rel="noreferrer"`|✅|🔧||| +[jsx-no-undef](docs/rules/jsx-no-undef.md)|Disallow undeclared variables in JSX|✅|||| +[jsx-no-useless-fragment](docs/rules/jsx-no-useless-fragment.md)|Disallow unnecessary fragments||🔧||| +[jsx-one-expression-per-line](docs/rules/jsx-one-expression-per-line.md)|Require one JSX element per line||🔧||| +[jsx-pascal-case](docs/rules/jsx-pascal-case.md)|Enforce PascalCase for user-defined JSX components||||| +[jsx-props-no-multi-spaces](docs/rules/jsx-props-no-multi-spaces.md)|Disallow multiple spaces between inline JSX props||🔧||| +[jsx-props-no-spreading](docs/rules/jsx-props-no-spreading.md)|Disallow JSX prop spreading||||| +[jsx-sort-default-props](docs/rules/jsx-sort-default-props.md)|Enforce defaultProps declarations alphabetical sorting||||❌| +[jsx-sort-props](docs/rules/jsx-sort-props.md)|Enforce props alphabetical sorting||🔧||| +[jsx-space-before-closing](docs/rules/jsx-space-before-closing.md)|Enforce spacing before closing bracket in JSX||🔧||❌| +[jsx-tag-spacing](docs/rules/jsx-tag-spacing.md)|Enforce whitespace in and around the JSX opening and closing brackets||🔧||| +[jsx-uses-react](docs/rules/jsx-uses-react.md)|Disallow React to be incorrectly marked as unused|✅|||| +[jsx-uses-vars](docs/rules/jsx-uses-vars.md)|Disallow variables used in JSX to be incorrectly marked as unused|✅|||| +[jsx-wrap-multilines](docs/rules/jsx-wrap-multilines.md)|Disallow missing parentheses around multiline JSX||🔧||| +[no-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md)|Disallow when this.state is accessed within setState||||| +[no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md)|Disallow adjacent inline elements not separated by whitespace.||||| +[no-array-index-key](docs/rules/no-array-index-key.md)|Disallow usage of Array index in keys||||| +[no-arrow-function-lifecycle](docs/rules/no-arrow-function-lifecycle.md)|Lifecycle methods should be methods on the prototype, not class fields||🔧||| +[no-children-prop](docs/rules/no-children-prop.md)|Disallow passing of children as props|✅|||| +[no-danger](docs/rules/no-danger.md)|Disallow usage of dangerous JSX properties||||| +[no-danger-with-children](docs/rules/no-danger-with-children.md)|Disallow when a DOM element is using both children and dangerouslySetInnerHTML|✅|||| +[no-deprecated](docs/rules/no-deprecated.md)|Disallow usage of deprecated methods|✅|||| +[no-did-mount-set-state](docs/rules/no-did-mount-set-state.md)|Disallow usage of setState in componentDidMount||||| +[no-did-update-set-state](docs/rules/no-did-update-set-state.md)|Disallow usage of setState in componentDidUpdate||||| +[no-direct-mutation-state](docs/rules/no-direct-mutation-state.md)|Disallow direct mutation of this.state|✅|||| +[no-find-dom-node](docs/rules/no-find-dom-node.md)|Disallow usage of findDOMNode|✅|||| +[no-invalid-html-attribute](docs/rules/no-invalid-html-attribute.md)|Disallow usage of invalid attributes||🔧||| +[no-is-mounted](docs/rules/no-is-mounted.md)|Disallow usage of isMounted|✅|||| +[no-multi-comp](docs/rules/no-multi-comp.md)|Disallow multiple component definition per file||||| +[no-namespace](docs/rules/no-namespace.md)|Enforce that namespaces are not used in React elements||||| +[no-object-type-as-default-prop](docs/rules/no-object-type-as-default-prop.md)|Disallow usage of referential-type variables as default param in functional component||||| +[no-redundant-should-component-update](docs/rules/no-redundant-should-component-update.md)|Disallow usage of shouldComponentUpdate when extending React.PureComponent||||| +[no-render-return-value](docs/rules/no-render-return-value.md)|Disallow usage of the return value of ReactDOM.render|✅|||| +[no-set-state](docs/rules/no-set-state.md)|Disallow usage of setState||||| +[no-string-refs](docs/rules/no-string-refs.md)|Disallow using string references|✅|||| +[no-this-in-sfc](docs/rules/no-this-in-sfc.md)|Disallow `this` from being used in stateless functional components||||| +[no-typos](docs/rules/no-typos.md)|Disallow common typos||||| +[no-unescaped-entities](docs/rules/no-unescaped-entities.md)|Disallow unescaped HTML entities from appearing in markup|✅|||| +[no-unknown-property](docs/rules/no-unknown-property.md)|Disallow usage of unknown DOM property|✅|🔧||| +[no-unsafe](docs/rules/no-unsafe.md)|Disallow usage of unsafe lifecycle methods||||| +[no-unstable-nested-components](docs/rules/no-unstable-nested-components.md)|Disallow creating unstable components inside components||||| +[no-unused-class-component-methods](docs/rules/no-unused-class-component-methods.md)|Disallow declaring unused methods of component class||||| +[no-unused-prop-types](docs/rules/no-unused-prop-types.md)|Disallow definitions of unused propTypes||||| +[no-unused-state](docs/rules/no-unused-state.md)|Disallow definitions of unused state||||| +[no-will-update-set-state](docs/rules/no-will-update-set-state.md)|Disallow usage of setState in componentWillUpdate||||| +[prefer-es6-class](docs/rules/prefer-es6-class.md)|Enforce ES5 or ES6 class for React Components||||| +[prefer-exact-props](docs/rules/prefer-exact-props.md)|Prefer exact proptype definitions||||| +[prefer-read-only-props](docs/rules/prefer-read-only-props.md)|Enforce that props are read-only||🔧||| +[prefer-stateless-function](docs/rules/prefer-stateless-function.md)|Enforce stateless components to be written as a pure function||||| +[prop-types](docs/rules/prop-types.md)|Disallow missing props validation in a React component definition|✅|||| +[react-in-jsx-scope](docs/rules/react-in-jsx-scope.md)|Disallow missing React when using JSX|✅|||| +[require-default-props](docs/rules/require-default-props.md)|Enforce a defaultProps definition for every prop that is not a required prop||||| +[require-optimization](docs/rules/require-optimization.md)|Enforce React components to have a shouldComponentUpdate method||||| +[require-render-return](docs/rules/require-render-return.md)|Enforce ES5 or ES6 class for returning value in render function|✅|||| +[self-closing-comp](docs/rules/self-closing-comp.md)|Disallow extra closing tags for components without children||🔧||| +[sort-comp](docs/rules/sort-comp.md)|Enforce component methods order||||| +[sort-default-props](docs/rules/sort-default-props.md)|Enforce defaultProps declarations alphabetical sorting||||| +[sort-prop-types](docs/rules/sort-prop-types.md)|Enforce propTypes declarations alphabetical sorting||🔧||| +[state-in-constructor](docs/rules/state-in-constructor.md)|Enforce class component state initialization style||||| +[static-property-placement](docs/rules/static-property-placement.md)|Enforces where React component static properties should be positioned.||||| +[style-prop-object](docs/rules/style-prop-object.md)|Enforce style prop value is an object||||| +[void-dom-elements-no-children](docs/rules/void-dom-elements-no-children.md)|Disallow void DOM elements (e.g. ``, `
`) from receiving children||||| + + ## Other useful plugins diff --git a/docs/rules/boolean-prop-naming.md b/docs/rules/boolean-prop-naming.md index 61a8fd3a03..3da8977248 100644 --- a/docs/rules/boolean-prop-naming.md +++ b/docs/rules/boolean-prop-naming.md @@ -1,6 +1,6 @@ -# Enforces consistent naming for boolean props (react/boolean-prop-naming) +# Enforces consistent naming for boolean props (`react/boolean-prop-naming`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Allows you to enforce a consistent naming pattern for props which expect a boolean value. diff --git a/docs/rules/button-has-type.md b/docs/rules/button-has-type.md index 88f988fc2c..d91297aab0 100644 --- a/docs/rules/button-has-type.md +++ b/docs/rules/button-has-type.md @@ -1,6 +1,6 @@ -# Disallow 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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/default-props-match-prop-types.md b/docs/rules/default-props-match-prop-types.md index a754cfb07c..998f245c00 100644 --- a/docs/rules/default-props-match-prop-types.md +++ b/docs/rules/default-props-match-prop-types.md @@ -1,6 +1,6 @@ -# Enforce all defaultProps have a corresponding non-required PropType (react/default-props-match-prop-types) +# Enforce all defaultProps have a corresponding non-required PropType (`react/default-props-match-prop-types`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + This rule aims to ensure that any prop in `defaultProps` has a non-required type definition. diff --git a/docs/rules/destructuring-assignment.md b/docs/rules/destructuring-assignment.md index 6592bb966a..487f227964 100644 --- a/docs/rules/destructuring-assignment.md +++ b/docs/rules/destructuring-assignment.md @@ -1,8 +1,8 @@ -# Enforce consistent usage of destructuring assignment of props, state, and context (react/destructuring-assignment) +# Enforce consistent usage of destructuring assignment of props, state, and context (`react/destructuring-assignment`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Rule can be set to either of `always` or `never`; diff --git a/docs/rules/display-name.md b/docs/rules/display-name.md index c37f42f763..62a8f188a6 100644 --- a/docs/rules/display-name.md +++ b/docs/rules/display-name.md @@ -1,6 +1,8 @@ -# Disallow missing displayName in a React component definition (react/display-name) +# Disallow missing displayName in a React component definition (`react/display-name`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 3cf2191fd0..d35b5bd8de 100644 --- a/docs/rules/forbid-component-props.md +++ b/docs/rules/forbid-component-props.md @@ -1,6 +1,6 @@ -# Disallow certain props on components (react/forbid-component-props) +# Disallow certain props on components (`react/forbid-component-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 e212e75d49..de2bb9cd5c 100644 --- a/docs/rules/forbid-dom-props.md +++ b/docs/rules/forbid-dom-props.md @@ -1,6 +1,6 @@ -# Disallow certain props on DOM Nodes (react/forbid-dom-props) +# Disallow certain props on DOM Nodes (`react/forbid-dom-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 9a2170c007..4b8ad7e544 100644 --- a/docs/rules/forbid-elements.md +++ b/docs/rules/forbid-elements.md @@ -1,6 +1,6 @@ -# Disallow certain elements (react/forbid-elements) +# Disallow certain elements (`react/forbid-elements`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 7e1b0dfe0a..a2c5bd170e 100644 --- a/docs/rules/forbid-foreign-prop-types.md +++ b/docs/rules/forbid-foreign-prop-types.md @@ -1,6 +1,6 @@ -# Disallow using another component's propTypes (react/forbid-foreign-prop-types) +# Disallow using another component's propTypes (`react/forbid-foreign-prop-types`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 abf754027f..846febb294 100644 --- a/docs/rules/forbid-prop-types.md +++ b/docs/rules/forbid-prop-types.md @@ -1,6 +1,6 @@ -# Disallow certain propTypes (react/forbid-prop-types) +# Disallow certain propTypes (`react/forbid-prop-types`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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/function-component-definition.md b/docs/rules/function-component-definition.md index 017f094762..708ec1830f 100644 --- a/docs/rules/function-component-definition.md +++ b/docs/rules/function-component-definition.md @@ -1,8 +1,8 @@ -# Enforce a specific function type for function components (react/function-component-definition) +# Enforce a specific function type for function components (`react/function-component-definition`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + This option enforces a specific function type for function components. diff --git a/docs/rules/hook-use-state.md b/docs/rules/hook-use-state.md index 43970de357..99fc0c8b77 100644 --- a/docs/rules/hook-use-state.md +++ b/docs/rules/hook-use-state.md @@ -1,6 +1,8 @@ -# Ensure destructuring and symmetric naming of useState hook value and setter variables (react/hook-use-state) +# Ensure destructuring and symmetric naming of useState hook value and setter variables (`react/hook-use-state`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions). + + 💡 This rule provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions). diff --git a/docs/rules/iframe-missing-sandbox.md b/docs/rules/iframe-missing-sandbox.md index b6574f6bcf..3784e54f92 100644 --- a/docs/rules/iframe-missing-sandbox.md +++ b/docs/rules/iframe-missing-sandbox.md @@ -1,6 +1,6 @@ -# Enforce sandbox attribute on iframe elements (react/iframe-missing-sandbox) +# Enforce sandbox attribute on iframe elements (`react/iframe-missing-sandbox`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + The sandbox attribute enables an extra set of restrictions for the content in the iframe. Using sandbox attribute is considered a good security practice. diff --git a/docs/rules/jsx-boolean-value.md b/docs/rules/jsx-boolean-value.md index 5ce5c00016..fd697a3b29 100644 --- a/docs/rules/jsx-boolean-value.md +++ b/docs/rules/jsx-boolean-value.md @@ -1,8 +1,8 @@ -# Enforce boolean attributes notation in JSX (react/jsx-boolean-value) +# Enforce boolean attributes notation in JSX (`react/jsx-boolean-value`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 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. diff --git a/docs/rules/jsx-child-element-spacing.md b/docs/rules/jsx-child-element-spacing.md index f940e133c5..1a0789103e 100644 --- a/docs/rules/jsx-child-element-spacing.md +++ b/docs/rules/jsx-child-element-spacing.md @@ -1,6 +1,6 @@ -# 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + ## Rule Details diff --git a/docs/rules/jsx-closing-bracket-location.md b/docs/rules/jsx-closing-bracket-location.md index d8bf2dc5a0..2f2d545132 100644 --- a/docs/rules/jsx-closing-bracket-location.md +++ b/docs/rules/jsx-closing-bracket-location.md @@ -1,8 +1,8 @@ -# Enforce closing bracket location in JSX (react/jsx-closing-bracket-location) +# Enforce closing bracket location in JSX (`react/jsx-closing-bracket-location`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Enforce the closing bracket location for JSX multiline elements. diff --git a/docs/rules/jsx-closing-tag-location.md b/docs/rules/jsx-closing-tag-location.md index ba7b4bd6b2..d1a0ccf7e3 100644 --- a/docs/rules/jsx-closing-tag-location.md +++ b/docs/rules/jsx-closing-tag-location.md @@ -1,8 +1,8 @@ -# Enforce closing tag location for multiline JSX (react/jsx-closing-tag-location) +# Enforce closing tag location for multiline JSX (`react/jsx-closing-tag-location`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Enforce the closing tag location for multiline JSX elements. diff --git a/docs/rules/jsx-curly-brace-presence.md b/docs/rules/jsx-curly-brace-presence.md index d1b17eb04d..ed220d815a 100644 --- a/docs/rules/jsx-curly-brace-presence.md +++ b/docs/rules/jsx-curly-brace-presence.md @@ -1,8 +1,8 @@ -# 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) +# 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 enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + This rule allows you to enforce curly braces or disallow unnecessary curly braces in JSX props and/or children. diff --git a/docs/rules/jsx-curly-newline.md b/docs/rules/jsx-curly-newline.md index b42eab3ba9..883e24c325 100644 --- a/docs/rules/jsx-curly-newline.md +++ b/docs/rules/jsx-curly-newline.md @@ -1,8 +1,8 @@ -# Enforce consistent 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 enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Many style guides require or disallow newlines inside of jsx curly expressions. diff --git a/docs/rules/jsx-curly-spacing.md b/docs/rules/jsx-curly-spacing.md index 16cfb109b0..bf5cab69ac 100644 --- a/docs/rules/jsx-curly-spacing.md +++ b/docs/rules/jsx-curly-spacing.md @@ -1,8 +1,8 @@ -# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (react/jsx-curly-spacing) +# Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (`react/jsx-curly-spacing`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces. diff --git a/docs/rules/jsx-equals-spacing.md b/docs/rules/jsx-equals-spacing.md index 5aa15ccfd6..6f8a19fff9 100644 --- a/docs/rules/jsx-equals-spacing.md +++ b/docs/rules/jsx-equals-spacing.md @@ -1,8 +1,8 @@ -# Enforce or disallow spaces around equal signs in JSX attributes (react/jsx-equals-spacing) +# Enforce or disallow spaces around equal signs in JSX attributes (`react/jsx-equals-spacing`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Some style guides require or disallow spaces around equal signs. diff --git a/docs/rules/jsx-filename-extension.md b/docs/rules/jsx-filename-extension.md index 7a2cbe919e..d9d3313652 100644 --- a/docs/rules/jsx-filename-extension.md +++ b/docs/rules/jsx-filename-extension.md @@ -1,6 +1,6 @@ -# Disallow file extensions that may contain JSX (react/jsx-filename-extension) +# Disallow file extensions that may contain JSX (`react/jsx-filename-extension`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + ## Rule Details diff --git a/docs/rules/jsx-first-prop-new-line.md b/docs/rules/jsx-first-prop-new-line.md index c00d421b45..64fed1868b 100644 --- a/docs/rules/jsx-first-prop-new-line.md +++ b/docs/rules/jsx-first-prop-new-line.md @@ -1,8 +1,8 @@ -# Enforce proper position of the first property in JSX (react/jsx-first-prop-new-line) +# Enforce proper position of the first property in JSX (`react/jsx-first-prop-new-line`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Ensure correct position of the first property. diff --git a/docs/rules/jsx-fragments.md b/docs/rules/jsx-fragments.md index cb62b748e4..212dfaca8e 100644 --- a/docs/rules/jsx-fragments.md +++ b/docs/rules/jsx-fragments.md @@ -1,8 +1,8 @@ -# Enforce shorthand or standard form for React fragments (react/jsx-fragments) +# Enforce shorthand or standard form for React fragments (`react/jsx-fragments`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 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, `<>...`. diff --git a/docs/rules/jsx-handler-names.md b/docs/rules/jsx-handler-names.md index 36c0b419f7..7c1a475e22 100644 --- a/docs/rules/jsx-handler-names.md +++ b/docs/rules/jsx-handler-names.md @@ -1,6 +1,6 @@ -# Enforce event handler naming conventions in JSX (react/jsx-handler-names) +# Enforce event handler naming conventions in JSX (`react/jsx-handler-names`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Ensures that any component or prop methods used to handle events are correctly prefixed. diff --git a/docs/rules/jsx-indent-props.md b/docs/rules/jsx-indent-props.md index 2723d653e7..632b45960d 100644 --- a/docs/rules/jsx-indent-props.md +++ b/docs/rules/jsx-indent-props.md @@ -1,8 +1,8 @@ -# Enforce props indentation in JSX (react/jsx-indent-props) +# Enforce props indentation in JSX (`react/jsx-indent-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + This option validates a specific indentation style for props. diff --git a/docs/rules/jsx-indent.md b/docs/rules/jsx-indent.md index 7e83775aa1..b9b56c3402 100644 --- a/docs/rules/jsx-indent.md +++ b/docs/rules/jsx-indent.md @@ -1,8 +1,8 @@ -# Enforce JSX indentation (react/jsx-indent) +# Enforce JSX indentation (`react/jsx-indent`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + This option validates a specific indentation style for JSX. diff --git a/docs/rules/jsx-key.md b/docs/rules/jsx-key.md index 98a8b6b11a..1eb1c220b2 100644 --- a/docs/rules/jsx-key.md +++ b/docs/rules/jsx-key.md @@ -1,6 +1,8 @@ -# Disallow missing `key` props in iterators/collection literals (react/jsx-key) +# Disallow missing `key` props in iterators/collection literals (`react/jsx-key`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 e8a1fa62ca..4349209c25 100644 --- a/docs/rules/jsx-max-depth.md +++ b/docs/rules/jsx-max-depth.md @@ -1,6 +1,6 @@ -# Enforce JSX maximum depth (react/jsx-max-depth) +# Enforce JSX maximum depth (`react/jsx-max-depth`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 2d96ab9779..d6ac9ba7bc 100644 --- a/docs/rules/jsx-max-props-per-line.md +++ b/docs/rules/jsx-max-props-per-line.md @@ -1,8 +1,8 @@ -# Enforce 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 enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Limiting the maximum of props on a single line can improve readability. diff --git a/docs/rules/jsx-newline.md b/docs/rules/jsx-newline.md index 9c6d4f2a0b..a4571f0c67 100644 --- a/docs/rules/jsx-newline.md +++ b/docs/rules/jsx-newline.md @@ -1,8 +1,8 @@ -# Require or prevent a new line after jsx elements and expressions. (react/jsx-newline) +# Require or prevent a new line after jsx elements and expressions (`react/jsx-newline`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + ## Rule Details diff --git a/docs/rules/jsx-no-bind.md b/docs/rules/jsx-no-bind.md index 04e5080200..7362e039cd 100644 --- a/docs/rules/jsx-no-bind.md +++ b/docs/rules/jsx-no-bind.md @@ -1,6 +1,6 @@ -# Disallow `.bind()` or arrow functions in JSX props (react/jsx-no-bind) +# Disallow `.bind()` or arrow functions in JSX props (`react/jsx-no-bind`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 773441dd71..cea8be4783 100644 --- a/docs/rules/jsx-no-comment-textnodes.md +++ b/docs/rules/jsx-no-comment-textnodes.md @@ -1,6 +1,8 @@ -# Disallow 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 is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 3cd0c6ca75..fdf4b7daa0 100644 --- a/docs/rules/jsx-no-constructed-context-values.md +++ b/docs/rules/jsx-no-constructed-context-values.md @@ -1,6 +1,6 @@ -# Disallows JSX context provider values from taking values that will cause needless rerenders (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 is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 f1459d6fad..a0c447644c 100644 --- a/docs/rules/jsx-no-duplicate-props.md +++ b/docs/rules/jsx-no-duplicate-props.md @@ -1,6 +1,8 @@ -# Disallow duplicate properties in JSX (react/jsx-no-duplicate-props) +# Disallow duplicate properties in JSX (`react/jsx-no-duplicate-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 639aaaadb4..1aef71ecc8 100644 --- a/docs/rules/jsx-no-leaked-render.md +++ b/docs/rules/jsx-no-leaked-render.md @@ -1,8 +1,8 @@ -# Disallow 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 enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Using the `&&` operator to render some element conditionally in JSX can cause unexpected values being rendered, or even crashing the rendering. diff --git a/docs/rules/jsx-no-literals.md b/docs/rules/jsx-no-literals.md index 949a6ad20b..7e07e49c64 100644 --- a/docs/rules/jsx-no-literals.md +++ b/docs/rules/jsx-no-literals.md @@ -1,6 +1,6 @@ -# Disallow usage of string literals in JSX (react/jsx-no-literals) +# Disallow usage of string literals in JSX (`react/jsx-no-literals`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 96fd642d70..afa79721eb 100644 --- a/docs/rules/jsx-no-script-url.md +++ b/docs/rules/jsx-no-script-url.md @@ -1,6 +1,6 @@ -# Disallow usage of `javascript:` URLs (react/jsx-no-script-url) +# Disallow usage of `javascript:` URLs (`react/jsx-no-script-url`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + **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 b802a407e5..7c0efdebbc 100644 --- a/docs/rules/jsx-no-target-blank.md +++ b/docs/rules/jsx-no-target-blank.md @@ -1,8 +1,10 @@ -# Disallow `target="_blank"` attribute without `rel="noreferrer"` (react/jsx-no-target-blank) +# Disallow `target="_blank"` attribute without `rel="noreferrer"` (`react/jsx-no-target-blank`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). + + When creating a JSX element that has an `a` tag, it is often desired to have the link open in a new tab using the `target='_blank'` attribute. Using this attribute unaccompanied by `rel='noreferrer'`, however, is a severe security vulnerability (see [noreferrer docs](https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer) and [noopener docs](https://html.spec.whatwg.org/multipage/links.html#link-type-noopener) for more details) This rules requires that you accompany `target='_blank'` attributes with `rel='noreferrer'`. diff --git a/docs/rules/jsx-no-undef.md b/docs/rules/jsx-no-undef.md index 9df4cce5bb..92869c9251 100644 --- a/docs/rules/jsx-no-undef.md +++ b/docs/rules/jsx-no-undef.md @@ -1,6 +1,8 @@ -# Disallow undeclared variables in JSX (react/jsx-no-undef) +# Disallow undeclared variables in JSX (`react/jsx-no-undef`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + This rule helps locate potential ReferenceErrors resulting from misspellings or missing components. diff --git a/docs/rules/jsx-no-useless-fragment.md b/docs/rules/jsx-no-useless-fragment.md index d709bde129..2f2a01960e 100644 --- a/docs/rules/jsx-no-useless-fragment.md +++ b/docs/rules/jsx-no-useless-fragment.md @@ -1,8 +1,8 @@ -# Disallow unnecessary fragments (react/jsx-no-useless-fragment) +# Disallow unnecessary fragments (`react/jsx-no-useless-fragment`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a [keyed fragment](https://reactjs.org/docs/fragments.html#keyed-fragments). diff --git a/docs/rules/jsx-one-expression-per-line.md b/docs/rules/jsx-one-expression-per-line.md index 892e5dca58..7ba4a65976 100644 --- a/docs/rules/jsx-one-expression-per-line.md +++ b/docs/rules/jsx-one-expression-per-line.md @@ -1,8 +1,8 @@ -# Require 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 enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + This option limits every line in JSX to one expression each. diff --git a/docs/rules/jsx-pascal-case.md b/docs/rules/jsx-pascal-case.md index e656ead77f..b434633e91 100644 --- a/docs/rules/jsx-pascal-case.md +++ b/docs/rules/jsx-pascal-case.md @@ -1,6 +1,6 @@ -# Enforce PascalCase for user-defined JSX components (react/jsx-pascal-case) +# Enforce PascalCase for user-defined JSX components (`react/jsx-pascal-case`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Enforces coding style that user-defined JSX components are defined and referenced in PascalCase. diff --git a/docs/rules/jsx-props-no-multi-spaces.md b/docs/rules/jsx-props-no-multi-spaces.md index a6e9e4a666..81717974b8 100644 --- a/docs/rules/jsx-props-no-multi-spaces.md +++ b/docs/rules/jsx-props-no-multi-spaces.md @@ -1,8 +1,8 @@ -# Disallow multiple spaces between inline JSX props (react/jsx-props-no-multi-spaces) +# Disallow multiple spaces between inline JSX props (`react/jsx-props-no-multi-spaces`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Enforces that there is exactly one space between all attributes and after tag name and the first attribute in the same line. diff --git a/docs/rules/jsx-props-no-spreading.md b/docs/rules/jsx-props-no-spreading.md index 0c65956034..3eeaf452ea 100644 --- a/docs/rules/jsx-props-no-spreading.md +++ b/docs/rules/jsx-props-no-spreading.md @@ -1,6 +1,6 @@ -# Disallow JSX prop spreading (react/jsx-props-no-spreading) +# Disallow JSX prop spreading (`react/jsx-props-no-spreading`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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-sort-default-props.md b/docs/rules/jsx-sort-default-props.md index db6331abde..41b6b6ef1d 100644 --- a/docs/rules/jsx-sort-default-props.md +++ b/docs/rules/jsx-sort-default-props.md @@ -1,6 +1,8 @@ -# Enforce defaultProps declarations alphabetical sorting (react/jsx-sort-default-props) +# Enforce defaultProps declarations alphabetical sorting (`react/jsx-sort-default-props`) -❌ This rule is deprecated. Please use the [`sort-default-props`](./sort-default-props.md) rule instead. +❌ This rule is deprecated. It was replaced by [sort-default-props](sort-default-props.md). + + Some developers prefer to sort `defaultProps` declarations alphabetically to be able to find necessary declarations easier at a later time. Others feel that it adds complexity and becomes a burden to maintain. diff --git a/docs/rules/jsx-sort-props.md b/docs/rules/jsx-sort-props.md index 0250a66007..b222e6b0c7 100644 --- a/docs/rules/jsx-sort-props.md +++ b/docs/rules/jsx-sort-props.md @@ -1,8 +1,8 @@ -# Enforce props alphabetical sorting (react/jsx-sort-props) +# Enforce props alphabetical sorting (`react/jsx-sort-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Some developers prefer to sort props names alphabetically to be able to find necessary props easier at the later time. Others feel that it adds complexity and becomes burden to maintain. diff --git a/docs/rules/jsx-space-before-closing.md b/docs/rules/jsx-space-before-closing.md index 8db909d912..e13f3f82d8 100644 --- a/docs/rules/jsx-space-before-closing.md +++ b/docs/rules/jsx-space-before-closing.md @@ -1,8 +1,12 @@ -# Enforce 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 deprecated. Please use the `"beforeSelfClosing"` option of the [jsx-tag-spacing](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) rule instead. +❌ This rule is deprecated. It was replaced by [jsx-tag-spacing](jsx-tag-spacing.md). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). + + + +Please use the `"beforeSelfClosing"` option of the [jsx-tag-spacing](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) rule instead. Enforce or forbid spaces before the closing bracket of self-closing JSX elements. diff --git a/docs/rules/jsx-tag-spacing.md b/docs/rules/jsx-tag-spacing.md index f9526c21bd..109941b3db 100644 --- a/docs/rules/jsx-tag-spacing.md +++ b/docs/rules/jsx-tag-spacing.md @@ -1,8 +1,8 @@ -# Enforce 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 enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Enforce or forbid spaces after the opening bracket, before the closing bracket, before the closing bracket of self-closing elements, and between the angle bracket and slash of JSX closing or self-closing elements. diff --git a/docs/rules/jsx-uses-react.md b/docs/rules/jsx-uses-react.md index 7fa6e29d7a..8ae6d1239b 100644 --- a/docs/rules/jsx-uses-react.md +++ b/docs/rules/jsx-uses-react.md @@ -1,6 +1,8 @@ -# Disallow React to be incorrectly marked as unused (react/jsx-uses-react) +# Disallow React to be incorrectly marked as unused (`react/jsx-uses-react`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. This rule is disabled in the following configs: `jsx-runtime`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + JSX expands to a call to `React.createElement`, a file which includes `React` but only uses JSX should consider the `React` variable as used. diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md index 8fe302249f..cf88cb9108 100644 --- a/docs/rules/jsx-uses-vars.md +++ b/docs/rules/jsx-uses-vars.md @@ -1,6 +1,8 @@ -# Disallow 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 2f5dee9497..7746943a28 100644 --- a/docs/rules/jsx-wrap-multilines.md +++ b/docs/rules/jsx-wrap-multilines.md @@ -1,8 +1,8 @@ -# Disallow missing parentheses around multiline JSX (react/jsx-wrap-multilines) +# Disallow missing parentheses around multiline JSX (`react/jsx-wrap-multilines`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Wrapping multiline JSX in parentheses can improve readability and/or convenience. diff --git a/docs/rules/no-access-state-in-setstate.md b/docs/rules/no-access-state-in-setstate.md index ebee8f1d3e..5d771479cd 100644 --- a/docs/rules/no-access-state-in-setstate.md +++ b/docs/rules/no-access-state-in-setstate.md @@ -1,6 +1,6 @@ -# Disallow when this.state is accessed within setState (react/no-access-state-in-setstate) +# Disallow when this.state is accessed within setState (`react/no-access-state-in-setstate`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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. diff --git a/docs/rules/no-adjacent-inline-elements.md b/docs/rules/no-adjacent-inline-elements.md index 4fe9576846..3b6ba21a99 100644 --- a/docs/rules/no-adjacent-inline-elements.md +++ b/docs/rules/no-adjacent-inline-elements.md @@ -1,6 +1,6 @@ -# Disallow 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 b9b9d1bfd0..b89c2de18a 100644 --- a/docs/rules/no-array-index-key.md +++ b/docs/rules/no-array-index-key.md @@ -1,6 +1,6 @@ -# Disallow usage of Array index in keys (react/no-array-index-key) +# Disallow usage of Array index in keys (`react/no-array-index-key`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Warn if an element uses an Array index in its `key`. diff --git a/docs/rules/no-arrow-function-lifecycle.md b/docs/rules/no-arrow-function-lifecycle.md index 8cf60e64fa..d47b742022 100644 --- a/docs/rules/no-arrow-function-lifecycle.md +++ b/docs/rules/no-arrow-function-lifecycle.md @@ -1,8 +1,8 @@ -# Lifecycle methods should be methods on the prototype, not class fields (react/no-arrow-function-lifecycle) +# Lifecycle methods should be methods on the prototype, not class fields (`react/no-arrow-function-lifecycle`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + It is not necessary to use arrow function for lifecycle methods. This makes things harder to test, conceptually less performant (although in practice, performance will not be affected, since most engines will optimize efficiently), and can break hot reloading patterns. diff --git a/docs/rules/no-children-prop.md b/docs/rules/no-children-prop.md index e4c9730a4d..f84d99ed20 100644 --- a/docs/rules/no-children-prop.md +++ b/docs/rules/no-children-prop.md @@ -1,6 +1,8 @@ -# Disallow passing of children as props (react/no-children-prop) +# Disallow passing of children as props (`react/no-children-prop`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 389d624840..7362293a37 100644 --- a/docs/rules/no-danger-with-children.md +++ b/docs/rules/no-danger-with-children.md @@ -1,6 +1,8 @@ -# Disallow when a DOM element is using both children and dangerouslySetInnerHTML (react/no-danger-with-children) +# Disallow when a DOM element is using both children and dangerouslySetInnerHTML (`react/no-danger-with-children`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 ba0973929a..601c4aa852 100644 --- a/docs/rules/no-danger.md +++ b/docs/rules/no-danger.md @@ -1,6 +1,6 @@ -# Disallow usage of dangerous JSX properties (react/no-danger) +# Disallow usage of dangerous JSX properties (`react/no-danger`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 ef70e2cbcf..4cae2491e2 100644 --- a/docs/rules/no-deprecated.md +++ b/docs/rules/no-deprecated.md @@ -1,6 +1,8 @@ -# Disallow usage of deprecated methods (react/no-deprecated) +# Disallow usage of deprecated methods (`react/no-deprecated`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 e9ad50da14..dfd5e54a31 100644 --- a/docs/rules/no-did-mount-set-state.md +++ b/docs/rules/no-did-mount-set-state.md @@ -1,6 +1,6 @@ -# Disallow usage of setState in componentDidMount (react/no-did-mount-set-state) +# Disallow usage of setState in componentDidMount (`react/no-did-mount-set-state`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 8ddb7cdb8a..9ebf48d7d5 100644 --- a/docs/rules/no-did-update-set-state.md +++ b/docs/rules/no-did-update-set-state.md @@ -1,6 +1,6 @@ -# Disallow usage of setState in componentDidUpdate (react/no-did-update-set-state) +# Disallow usage of setState in componentDidUpdate (`react/no-did-update-set-state`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 37ac2d751f..d31ade08a7 100644 --- a/docs/rules/no-direct-mutation-state.md +++ b/docs/rules/no-direct-mutation-state.md @@ -1,6 +1,8 @@ -# Disallow direct mutation of this.state (react/no-direct-mutation-state) +# Disallow direct mutation of this.state (`react/no-direct-mutation-state`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 f8332384e3..58660a1676 100644 --- a/docs/rules/no-find-dom-node.md +++ b/docs/rules/no-find-dom-node.md @@ -1,6 +1,8 @@ -# Disallow usage of findDOMNode (react/no-find-dom-node) +# Disallow usage of findDOMNode (`react/no-find-dom-node`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 22d18c5287..dff5bde3bd 100644 --- a/docs/rules/no-invalid-html-attribute.md +++ b/docs/rules/no-invalid-html-attribute.md @@ -1,8 +1,8 @@ -# Disallow usage of invalid attributes (react/no-invalid-html-attribute) +# Disallow usage of invalid attributes (`react/no-invalid-html-attribute`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Some HTML elements have a specific set of valid values for some attributes. For instance the elements: `a`, `area`, `link`, or `form` all have an attribute called `rel`. diff --git a/docs/rules/no-is-mounted.md b/docs/rules/no-is-mounted.md index 649121f9a2..4b49aa98e6 100644 --- a/docs/rules/no-is-mounted.md +++ b/docs/rules/no-is-mounted.md @@ -1,6 +1,8 @@ -# Disallow usage of isMounted (react/no-is-mounted) +# Disallow usage of isMounted (`react/no-is-mounted`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + [`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 a63eb16ae6..8734ad8646 100644 --- a/docs/rules/no-multi-comp.md +++ b/docs/rules/no-multi-comp.md @@ -1,6 +1,6 @@ -# Disallow multiple component definition per file (react/no-multi-comp) +# Disallow multiple component definition per file (`react/no-multi-comp`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Declaring only one component per file improves readability and reusability of components. diff --git a/docs/rules/no-namespace.md b/docs/rules/no-namespace.md index 4b309f61b9..3d56104158 100644 --- a/docs/rules/no-namespace.md +++ b/docs/rules/no-namespace.md @@ -1,6 +1,6 @@ -# Enforce that namespaces are not used in React elements (react/no-namespace) +# Enforce that namespaces are not used in React elements (`react/no-namespace`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Enforces the absence of a namespace in React elements, such as with `svg:circle`, as they are not supported in React. diff --git a/docs/rules/no-object-type-as-default-prop.md b/docs/rules/no-object-type-as-default-prop.md index a7bbed518a..d7c98dacff 100644 --- a/docs/rules/no-object-type-as-default-prop.md +++ b/docs/rules/no-object-type-as-default-prop.md @@ -1,6 +1,6 @@ -# Disallow usage of referential-type variables as default param in functional component (react/no-object-type-as-default-prop) +# Disallow usage of referential-type variables as default param in functional component (`react/no-object-type-as-default-prop`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Warns if in a functional component, an object type value (such as array/object literal/function/etc) is used as default prop, to prevent potential unnecessary rerenders, and performance regressions. diff --git a/docs/rules/no-redundant-should-component-update.md b/docs/rules/no-redundant-should-component-update.md index 93e99ba7a7..933d36a4e4 100644 --- a/docs/rules/no-redundant-should-component-update.md +++ b/docs/rules/no-redundant-should-component-update.md @@ -1,6 +1,6 @@ -# Disallow 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 75260df4d4..59749d6b38 100644 --- a/docs/rules/no-render-return-value.md +++ b/docs/rules/no-render-return-value.md @@ -1,6 +1,8 @@ -# Disallow 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + > `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 edf65d3bfb..6dc5cb890a 100644 --- a/docs/rules/no-set-state.md +++ b/docs/rules/no-set-state.md @@ -1,6 +1,6 @@ -# Disallow usage of setState (react/no-set-state) +# Disallow usage of setState (`react/no-set-state`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 e2caf9d4fe..d92b225446 100644 --- a/docs/rules/no-string-refs.md +++ b/docs/rules/no-string-refs.md @@ -1,6 +1,8 @@ -# Disallow using string references (react/no-string-refs) +# Disallow using string references (`react/no-string-refs`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 15b5f3bab4..1fc7d84034 100644 --- a/docs/rules/no-this-in-sfc.md +++ b/docs/rules/no-this-in-sfc.md @@ -1,6 +1,6 @@ -# Disallow `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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 b6314c6986..b1fa9fb337 100644 --- a/docs/rules/no-typos.md +++ b/docs/rules/no-typos.md @@ -1,6 +1,6 @@ -# Disallow common typos (react/no-typos) +# Disallow common typos (`react/no-typos`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 bafbeefd8d..89b733bb09 100644 --- a/docs/rules/no-unescaped-entities.md +++ b/docs/rules/no-unescaped-entities.md @@ -1,6 +1,8 @@ -# Disallow unescaped HTML entities from appearing in markup (react/no-unescaped-entities) +# Disallow unescaped HTML entities from appearing in markup (`react/no-unescaped-entities`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 e885474f20..87460c869c 100644 --- a/docs/rules/no-unknown-property.md +++ b/docs/rules/no-unknown-property.md @@ -1,8 +1,10 @@ -# Disallow usage of unknown DOM property (react/no-unknown-property) +# Disallow usage of unknown DOM property (`react/no-unknown-property`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). + + In JSX most DOM properties and attributes should be camelCased to be consistent with standard JavaScript style. This can be a possible source of error if you are used to writing plain HTML. Only `data-*` and `aria-*` attributes are usings hyphens and lowercase letters in JSX. diff --git a/docs/rules/no-unsafe.md b/docs/rules/no-unsafe.md index a0d15f8c10..dbb8c3cee0 100644 --- a/docs/rules/no-unsafe.md +++ b/docs/rules/no-unsafe.md @@ -1,6 +1,6 @@ -# Disallow usage of unsafe lifecycle methods (react/no-unsafe) +# Disallow usage of unsafe lifecycle methods (`react/no-unsafe`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. This rule is disabled in the following configs: `recommended`. + 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 01e280fd2f..c0ab4f9ece 100644 --- a/docs/rules/no-unstable-nested-components.md +++ b/docs/rules/no-unstable-nested-components.md @@ -1,6 +1,6 @@ -# Disallow creating unstable components inside components (react/no-unstable-nested-components) +# Disallow creating unstable components inside components (`react/no-unstable-nested-components`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Creating components inside components (nested components) will cause React to throw away the state of those nested components on each re-render of their parent. diff --git a/docs/rules/no-unused-class-component-methods.md b/docs/rules/no-unused-class-component-methods.md index e99b1dca92..d3dc36c856 100644 --- a/docs/rules/no-unused-class-component-methods.md +++ b/docs/rules/no-unused-class-component-methods.md @@ -1,6 +1,6 @@ -# Disallow 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 9dc056db9b..c7c4c011c4 100644 --- a/docs/rules/no-unused-prop-types.md +++ b/docs/rules/no-unused-prop-types.md @@ -1,6 +1,6 @@ -# Disallow definitions of unused propTypes (react/no-unused-prop-types) +# Disallow definitions of unused propTypes (`react/no-unused-prop-types`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 cd94d95473..e6ac5bb48f 100644 --- a/docs/rules/no-unused-state.md +++ b/docs/rules/no-unused-state.md @@ -1,6 +1,6 @@ -# Disallow definitions of unused state (react/no-unused-state) +# Disallow definitions of unused state (`react/no-unused-state`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 0d17701ec7..7b5f6311c2 100644 --- a/docs/rules/no-will-update-set-state.md +++ b/docs/rules/no-will-update-set-state.md @@ -1,6 +1,6 @@ -# Disallow usage of setState in componentWillUpdate (react/no-will-update-set-state) +# Disallow usage of setState in componentWillUpdate (`react/no-will-update-set-state`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 a238c9ecb3..b0b1281f6b 100644 --- a/docs/rules/prefer-es6-class.md +++ b/docs/rules/prefer-es6-class.md @@ -1,6 +1,6 @@ -# Enforce ES5 or ES6 class for React Components (react/prefer-es6-class) +# Enforce ES5 or ES6 class for React Components (`react/prefer-es6-class`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + React offers you two ways to create traditional components: using the ES5 `create-react-class` module or the new ES6 class system. diff --git a/docs/rules/prefer-exact-props.md b/docs/rules/prefer-exact-props.md index 44fede6421..ca49e74c18 100644 --- a/docs/rules/prefer-exact-props.md +++ b/docs/rules/prefer-exact-props.md @@ -1,6 +1,6 @@ -# Prefer exact proptype definitions (react/prefer-exact-props) +# Prefer exact proptype definitions (`react/prefer-exact-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Recommends options to ensure only exact prop definitions are used when writing components. This recommends solutions for PropTypes or for Flow types. diff --git a/docs/rules/prefer-read-only-props.md b/docs/rules/prefer-read-only-props.md index 703d1cd576..c47b28d604 100644 --- a/docs/rules/prefer-read-only-props.md +++ b/docs/rules/prefer-read-only-props.md @@ -1,8 +1,8 @@ -# Enforce that props are read-only (react/prefer-read-only-props) +# Enforce that props are read-only (`react/prefer-read-only-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Using Flow, one can define types for props. This rule enforces that prop types are read-only (covariant). diff --git a/docs/rules/prefer-stateless-function.md b/docs/rules/prefer-stateless-function.md index d4c5c9fcfe..10d605bb66 100644 --- a/docs/rules/prefer-stateless-function.md +++ b/docs/rules/prefer-stateless-function.md @@ -1,6 +1,6 @@ -# Enforce stateless 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 de701acf01..c84e93f6fd 100644 --- a/docs/rules/prop-types.md +++ b/docs/rules/prop-types.md @@ -1,6 +1,8 @@ -# Disallow missing props validation in a React component definition (react/prop-types) +# Disallow missing props validation in a React component definition (`react/prop-types`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + 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 7dac9043e9..13ec6478f2 100644 --- a/docs/rules/react-in-jsx-scope.md +++ b/docs/rules/react-in-jsx-scope.md @@ -1,6 +1,8 @@ -# Disallow missing React when using JSX (react/react-in-jsx-scope) +# Disallow missing React when using JSX (`react/react-in-jsx-scope`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. This rule is disabled in the following configs: `jsx-runtime`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + When using JSX, `` expands to `React.createElement("a")`. Therefore the `React` variable must be in scope. diff --git a/docs/rules/require-default-props.md b/docs/rules/require-default-props.md index eabad775c3..553710e655 100644 --- a/docs/rules/require-default-props.md +++ b/docs/rules/require-default-props.md @@ -1,6 +1,6 @@ -# Enforce a defaultProps definition for every prop that is not a required prop (react/require-default-props) +# Enforce a defaultProps definition for every prop that is not a required prop (`react/require-default-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + This rule aims to ensure that any non-required prop types of a component has a corresponding `defaultProps` value. diff --git a/docs/rules/require-optimization.md b/docs/rules/require-optimization.md index 46fceb1414..9e7f7443d1 100644 --- a/docs/rules/require-optimization.md +++ b/docs/rules/require-optimization.md @@ -1,6 +1,6 @@ -# Enforce React components to have a shouldComponentUpdate method (react/require-optimization) +# Enforce React components to have a shouldComponentUpdate method (`react/require-optimization`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + This rule prevents you from creating React components without declaring a `shouldComponentUpdate` method. diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md index 3619bc0d38..4f98284f6c 100644 --- a/docs/rules/require-render-return.md +++ b/docs/rules/require-render-return.md @@ -1,6 +1,8 @@ -# Enforce ES5 or ES6 class for returning value in render function (react/require-render-return) +# Enforce ES5 or ES6 class for returning value in render function (`react/require-render-return`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`, `recommended`. +✅ This rule is enabled in the `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs). + + When writing the `render` method in a component it is easy to forget to return the JSX content. This rule will warn if the `return` statement is missing. diff --git a/docs/rules/self-closing-comp.md b/docs/rules/self-closing-comp.md index d711effde3..bbd4d5e806 100644 --- a/docs/rules/self-closing-comp.md +++ b/docs/rules/self-closing-comp.md @@ -1,8 +1,8 @@ -# Disallow 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 enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Components without children can be self-closed to avoid unnecessary extra closing tag. diff --git a/docs/rules/sort-comp.md b/docs/rules/sort-comp.md index 5deae66658..0410011ce2 100644 --- a/docs/rules/sort-comp.md +++ b/docs/rules/sort-comp.md @@ -1,6 +1,6 @@ -# Enforce component methods order (react/sort-comp) +# Enforce component methods order (`react/sort-comp`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 🔧 This rule is automatically fixable using the [`sort-comp` transform](https://github.com/reactjs/react-codemod/blob/master/transforms/sort-comp.js) in [react-codemod](https://www.npmjs.com/package/react-codemod). diff --git a/docs/rules/sort-default-props.md b/docs/rules/sort-default-props.md index fd4bb07fe5..eab9c01161 100644 --- a/docs/rules/sort-default-props.md +++ b/docs/rules/sort-default-props.md @@ -1,6 +1,6 @@ -# Enforce defaultProps declarations alphabetical sorting (react/sort-default-props) +# Enforce defaultProps declarations alphabetical sorting (`react/sort-default-props`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + Some developers prefer to sort `defaultProps` declarations alphabetically to be able to find necessary declarations easier at a later time. Others feel that it adds complexity and becomes a burden to maintain. diff --git a/docs/rules/sort-prop-types.md b/docs/rules/sort-prop-types.md index a23d15c3fc..fc5f2964ff 100644 --- a/docs/rules/sort-prop-types.md +++ b/docs/rules/sort-prop-types.md @@ -1,8 +1,8 @@ -# Enforce propTypes declarations alphabetical sorting (react/sort-prop-types) +# Enforce propTypes declarations alphabetical sorting (`react/sort-prop-types`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. +🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix). -🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line. + Some developers prefer to sort prop type declarations alphabetically to be able to find necessary declaration easier at the later time. Others feel that it adds complexity and becomes burden to maintain. diff --git a/docs/rules/state-in-constructor.md b/docs/rules/state-in-constructor.md index 503aed6f0f..1e40d542a9 100644 --- a/docs/rules/state-in-constructor.md +++ b/docs/rules/state-in-constructor.md @@ -1,6 +1,6 @@ -# Enforce class component state initialization style (react/state-in-constructor) +# Enforce class component state initialization style (`react/state-in-constructor`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + ## Rule Details diff --git a/docs/rules/static-property-placement.md b/docs/rules/static-property-placement.md index 890c761fcc..f67d0925d9 100644 --- a/docs/rules/static-property-placement.md +++ b/docs/rules/static-property-placement.md @@ -1,6 +1,6 @@ -# Enforces where React component static properties should be positioned. (react/static-property-placement) +# Enforces where React component static properties should be positioned (`react/static-property-placement`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + This rule allows you to enforce where `childContextTypes`, `contextTypes`, `contextType`, `defaultProps`, `displayName`, and `propTypes` are declared in an ES6 class. diff --git a/docs/rules/style-prop-object.md b/docs/rules/style-prop-object.md index 27bc6c5350..2bd4313e2d 100644 --- a/docs/rules/style-prop-object.md +++ b/docs/rules/style-prop-object.md @@ -1,6 +1,6 @@ -# Enforce style prop value is an object (react/style-prop-object) +# Enforce style prop value is an object (`react/style-prop-object`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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 a56659a882..a5b3ceb4ca 100644 --- a/docs/rules/void-dom-elements-no-children.md +++ b/docs/rules/void-dom-elements-no-children.md @@ -1,6 +1,6 @@ -# Disallow 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`) -💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations): `all`. + 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/jsx-sort-default-props.js b/lib/rules/jsx-sort-default-props.js index a951976336..f35e40dc5f 100644 --- a/lib/rules/jsx-sort-default-props.js +++ b/lib/rules/jsx-sort-default-props.js @@ -24,6 +24,7 @@ const messages = { module.exports = { meta: { deprecated: true, + replacedBy: ['sort-default-props'], docs: { description: 'Enforce defaultProps declarations alphabetical sorting', category: 'Stylistic Issues', diff --git a/lib/rules/jsx-space-before-closing.js b/lib/rules/jsx-space-before-closing.js index 5bb8da622b..f1e1e61d96 100644 --- a/lib/rules/jsx-space-before-closing.js +++ b/lib/rules/jsx-space-before-closing.js @@ -25,6 +25,7 @@ const messages = { module.exports = { meta: { deprecated: true, + replacedBy: ['jsx-tag-spacing'], docs: { description: 'Enforce spacing before closing bracket in JSX', category: 'Stylistic Issues', diff --git a/lib/rules/no-unstable-nested-components.js b/lib/rules/no-unstable-nested-components.js index 9b60e496bf..adb97707b0 100644 --- a/lib/rules/no-unstable-nested-components.js +++ b/lib/rules/no-unstable-nested-components.js @@ -276,12 +276,6 @@ module.exports = { schema: [{ type: 'object', properties: { - customValidators: { - type: 'array', - items: { - type: 'string', - }, - }, allowAsProps: { type: 'boolean', }, diff --git a/markdown.config.js b/markdown.config.js deleted file mode 100644 index f1d51faeb1..0000000000 --- a/markdown.config.js +++ /dev/null @@ -1,41 +0,0 @@ -'use strict'; - -/* eslint-disable no-restricted-syntax */ - -const { rules } = require('./index'); - -const ruleTableRows = Object.keys(rules) - .sort() - .map((id) => { - const { meta } = rules[id]; - const { fixable, docs, hasSuggestions } = meta; - return [ - docs.recommended ? '✔' : '', - fixable ? '🔧' : '', - hasSuggestions ? '💡' : '', - `[react/${id}](docs/rules/${id}.md)`, - `${docs.description}${meta.deprecated ? '. ❌ This rule is deprecated.' : ''}`, - ].join(' | '); - }); - -const buildRulesTable = (rows) => { - const header = '✔ | 🔧 | 💡 | Rule | Description'; - const separator = ':---: | :---: | :---: | :--- | :---'; - - return [header, separator, ...rows] - .map((row) => `| ${row} |`) - .join('\n'); -}; - -const BASIC_RULES = () => buildRulesTable(ruleTableRows.filter((rule) => !rule.includes('react/jsx-'))); -const JSX_RULES = () => buildRulesTable(ruleTableRows.filter((rule) => rule.includes('react/jsx-'))); - -module.exports = { - transforms: { - BASIC_RULES, - JSX_RULES, - }, - callback: () => { - console.log('The auto-generating of rules finished!'); - }, -}; diff --git a/package.json b/package.json index b5037653b1..afc57c12e3 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,9 @@ "main": "index.js", "scripts": { "prepack": "npmignore --auto --commentLines=autogenerated", - "prelint": "npm run lint:docs", + "prelint": "npm run lint:docs && npm run lint:eslint-docs", "lint:docs": "markdownlint \"**/*.md\"", + "lint:eslint-docs": "npm run update:eslint-docs --check", "lint": "eslint .", "postlint": "npm run type-check", "pretest": "npm run lint", @@ -15,8 +16,7 @@ "posttest": "aud --production", "type-check": "tsc", "unit-test": "istanbul cover node_modules/mocha/bin/_mocha tests/lib/**/*.js tests/util/**/*.js tests/index.js", - "generate-list-of-rules": "md-magic --path README.md", - "generate-list-of-rules:check": "npm run generate-list-of-rules && git diff --exit-code README.md" + "update:eslint-docs": "eslint-doc-generator --ignore-config all --url-configs \"https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md#shareable-configs\"" }, "repository": { "type": "git", @@ -56,6 +56,7 @@ "babel-eslint": "^8 || ^9 || ^10.1.0", "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8", "eslint-config-airbnb-base": "^15.0.0", + "eslint-doc-generator": "^0.13.0", "eslint-plugin-eslint-plugin": "^2.3.0 || ^3.5.3 || ^4.0.1 || ^5.0.5", "eslint-plugin-import": "^2.26.0", "eslint-remote-tester": "^3.0.0", @@ -64,7 +65,6 @@ "espree": "^3.5.4", "istanbul": "^0.4.5", "ls-engines": "^0.7.0", - "markdown-magic": "^2.6.1", "markdownlint-cli": "^0.8.0 || ^0.32.2", "mocha": "^5.2.0", "npmignore": "^0.3.0", diff --git a/tests/index.js b/tests/index.js index 7068473986..c04936fa26 100644 --- a/tests/index.js +++ b/tests/index.js @@ -5,9 +5,6 @@ const assert = require('assert'); const fs = require('fs'); const path = require('path'); -const arrayIncludes = require('array-includes'); -const flatMap = require('array.prototype.flatmap'); -const toSorted = require('array.prototype.tosorted'); const plugin = require('..'); @@ -25,114 +22,6 @@ describe('all rule files should be exported by the plugin', () => { }); }); -describe('rule documentation files have the correct content', () => { - const MESSAGES = { - configs: '💼 This rule is enabled in the following [configs](https://github.com/jsx-eslint/eslint-plugin-react#shareable-configurations):', - configsOff: 'This rule is disabled in the following configs:', - deprecated: '❌ This rule is deprecated.', - fixable: '🔧 This rule is automatically fixable using the `--fix` [flag](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix) on the command line.', - hasSuggestions: '💡 This rule provides editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).', - }; - - function getConfigsForRule(ruleName, checkForEnabled) { - return toSorted( - flatMap( - Object.keys(plugin.configs), - (configName) => { - const value = plugin.configs[configName].rules[`react/${ruleName}`]; - const isOn = arrayIncludes([2, 'error'], value); - const isOff = arrayIncludes([0, 'off'], value); - if (value !== undefined && ((checkForEnabled && isOn) || (!checkForEnabled && isOff))) { - return configName; - } - return []; - } - ) - ); - } - - function configNamesToList(configNames) { - return `\`${configNames.join('`, `')}\``; - } - - ruleFiles.forEach((ruleName) => { - 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.deprecated) { - expectedNotices.push('deprecated'); - unexpectedNotices.push('configs'); - } else { - unexpectedNotices.push('deprecated'); - expectedNotices.push('configs'); - } - 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], '', `includes blank line ahead of ${expectedNotice} notice`); - if (expectedNotice === 'deprecated' && documentLines[currentLineNumber + 1] !== MESSAGES[expectedNotice] && documentLines[currentLineNumber + 1].startsWith(MESSAGES[expectedNotice])) { - // Allow additional rule-specific information at the end of the deprecation notice line. - assert.ok(true, `includes ${expectedNotice} notice`); - } else if (expectedNotice === 'configs') { - // Check that the rule specifies its configs. - const configsOn = getConfigsForRule(ruleName, true); - let expectedMessage = `${MESSAGES.configs} ${configNamesToList(configsOn)}.`; - const configsOff = getConfigsForRule(ruleName, false); - if (configsOff.length > 0) { - expectedMessage += ` ${MESSAGES.configsOff} ${configNamesToList(configsOff)}.`; - } - assert.strictEqual(documentLines[currentLineNumber + 1], expectedMessage, 'includes configs notice'); - } else { - // Otherwise, just check the whole line. - 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'); - } - }); - }); -}); - describe('deprecated rules', () => { it('marks all deprecated rules as deprecated', () => { ruleFiles.forEach((ruleName) => {