diff --git a/README.md b/README.md index 9c67ff12b5..b68767f0f0 100644 --- a/README.md +++ b/README.md @@ -291,108 +291,109 @@ module.exports = [ πŸ’‘ 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 | | | | | | +| 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 | | | | | | +| [checked-requires-onchange-or-readonly](docs/rules/checked-requires-onchange-or-readonly.md) | Enforce using `onChange` or `readonly` attribute when `checked` is used | | | | | | +| [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 | | | | | | diff --git a/docs/rules/checked-requires-onchange-or-readonly.md b/docs/rules/checked-requires-onchange-or-readonly.md new file mode 100644 index 0000000000..13ec64dd0e --- /dev/null +++ b/docs/rules/checked-requires-onchange-or-readonly.md @@ -0,0 +1,44 @@ +# Enforce using `onChange` or `readonly` attribute when `checked` is used (`react/checked-requires-onchange-or-readonly`) + + + +This rule enforces `onChange` or `readonly` attribute for `checked` property of input elements. + +It also warns when `checked` and `defaultChecked` properties are used together. + +## Rule Details + +Example of **incorrect** code for this rule: + +```jsx + + + + +React.createElement('input', { checked: false }); +React.createElement('input', { type: 'checkbox', checked: true }); +React.createElement('input', { type: 'checkbox', checked: true, defaultChecked: true }); +``` + +Example of **correct** code for this rule: + +```jsx + {}} /> + + + + +React.createElement('input', { type: 'checkbox', checked: true, onChange() {} }); +React.createElement('input', { type: 'checkbox', checked: true, readOnly: true }); +React.createElement('input', { type: 'checkbox', checked: true, onChange() {}, readOnly: true }); +React.createElement('input', { type: 'checkbox', defaultChecked: true }); +``` + +## Rule Options + +```js +"react/checked-requires-onchange-or-readonly": [, { + "ignoreMissingProperties": , + "ignoreExclusiveCheckedAttribute": +}] +``` diff --git a/lib/rules/checked-requires-onchange-or-readonly.js b/lib/rules/checked-requires-onchange-or-readonly.js new file mode 100644 index 0000000000..079023fb05 --- /dev/null +++ b/lib/rules/checked-requires-onchange-or-readonly.js @@ -0,0 +1,140 @@ +/** + * @fileoverview Enforce the use of the 'onChange' or 'readonly' attribute when 'checked' is used' + * @author Jaesoekjjang + */ + +'use strict'; + +const ASTUtils = require('jsx-ast-utils'); +const flatMap = require('array.prototype.flatmap'); +const isCreateElement = require('../util/isCreateElement'); +const report = require('../util/report'); +const docsUrl = require('../util/docsUrl'); + +const messages = { + missingProperty: '`checked` should be used with either `onChange` or `readOnly`.', + exclusiveCheckedAttribute: 'Use either `checked` or `defaultChecked`, but not both.', +}; + +const targetPropSet = new Set(['checked', 'onChange', 'readOnly', 'defaultChecked']); + +const defaultOptions = { + ignoreMissingProperties: true, + ignoreExclusiveCheckedAttribute: true, +}; + +/** + * @param {string[]} properties + * @param {string} keyName + * @returns {Set} + */ +function extractTargetProps(properties, keyName) { + return new Set( + flatMap( + properties, + (prop) => ( + prop[keyName] && targetPropSet.has(prop[keyName].name) + ? [prop[keyName].name] + : [] + ) + ) + ); +} + +module.exports = { + meta: { + docs: { + description: 'Enforce using `onChange` or `readonly` attribute when `checked` is used', + category: 'Best Practices', + recommended: false, + url: docsUrl('checked-requires-onchange-or-readonly'), + }, + messages, + schema: [{ + additionalProperties: false, + properties: { + ignoreMissingProperties: { + type: 'boolean', + }, + ignoreExclusiveCheckedAttribute: { + type: 'boolean', + }, + }, + }], + }, + create(context) { + const options = Object.assign({}, defaultOptions, context.options[0]); + + function reportMissingProperty(node) { + report( + context, + messages.missingProperty, + 'missingProperty', + { node } + ); + } + + function reportExclusiveCheckedAttribute(node) { + report( + context, + messages.exclusiveCheckedAttribute, + 'exclusiveCheckedAttribute', + { node } + ); + } + + /** + * @param {ASTNode} node + * @param {Set} propSet + * @returns {void} + */ + const checkAttributesAndReport = (node, propSet) => { + if (!propSet.has('checked')) { + return; + } + + if (options.ignoreExclusiveCheckedAttribute && propSet.has('defaultChecked')) { + reportExclusiveCheckedAttribute(node); + } + + if ( + options.ignoreMissingProperties + && !(propSet.has('onChange') || propSet.has('readOnly')) + ) { + reportMissingProperty(node); + } + }; + + return { + JSXOpeningElement(node) { + if (ASTUtils.elementType(node) !== 'input') { + return; + } + + const propSet = extractTargetProps(node.attributes, 'name'); + checkAttributesAndReport(node, propSet); + }, + CallExpression(node) { + if (!isCreateElement(node, context)) { + return; + } + + const [firstArg, secondArg] = node.arguments; + if ( + !firstArg + || firstArg.type !== 'Literal' + || firstArg.value !== 'input' + ) { + return; + } + + if (!secondArg || secondArg.type !== 'ObjectExpression') { + return; + } + + const propSet = extractTargetProps(secondArg.properties, 'key'); + checkAttributesAndReport(node, propSet); + }, + }; + }, +}; diff --git a/lib/rules/index.js b/lib/rules/index.js index d7142ed9b4..0c14f0795e 100644 --- a/lib/rules/index.js +++ b/lib/rules/index.js @@ -5,6 +5,7 @@ module.exports = { 'boolean-prop-naming': require('./boolean-prop-naming'), 'button-has-type': require('./button-has-type'), + 'checked-requires-onchange-or-readonly': require('./checked-requires-onchange-or-readonly'), 'default-props-match-prop-types': require('./default-props-match-prop-types'), 'destructuring-assignment': require('./destructuring-assignment'), 'display-name': require('./display-name'), diff --git a/tests/lib/rules/checked-requires-onchange-or-readonly.js b/tests/lib/rules/checked-requires-onchange-or-readonly.js new file mode 100644 index 0000000000..7f9a14cac4 --- /dev/null +++ b/tests/lib/rules/checked-requires-onchange-or-readonly.js @@ -0,0 +1,111 @@ +/** + * @fileoverview Enforce the use of the 'onChange' or 'readonly' attribute when 'checked' is used' + * @author Jaesoekjjang + */ + +'use strict'; + +const RuleTester = require('eslint').RuleTester; +const rule = require('../../../lib/rules/checked-requires-onchange-or-readonly'); + +const parsers = require('../../helpers/parsers'); + +const ruleTester = new RuleTester({ + parserOptions: { + ecmaVersion: 2018, + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, +}); + +ruleTester.run('checked-requires-onchange-or-readonly', rule, { + valid: parsers.all([ + '', + '', + '', + '', + '', + '', + '', + '', + '', + '', + "React.createElement('input')", + "React.createElement('input', { checked: true, onChange: noop })", + "React.createElement('input', { checked: false, onChange: noop })", + "React.createElement('input', { checked: true, readOnly: true })", + "React.createElement('input', { checked: true, onChange: noop, readOnly: true })", + "React.createElement('input', { checked: foo, onChange: noop, readOnly: true })", + { + code: '', + options: [{ ignoreMissingProperties: false }], + }, + { + code: '', + options: [{ ignoreMissingProperties: false }], + }, + { + code: '', + options: [{ ignoreExclusiveCheckedAttribute: false }], + }, + { + code: '', + options: [{ ignoreExclusiveCheckedAttribute: false }], + }, + '', + "React.createElement('span')", + '(()=>{})()', + ]), + invalid: parsers.all([ + { + code: '', + errors: [{ messageId: 'missingProperty' }], + }, + { + code: '', + errors: [{ messageId: 'missingProperty' }], + }, + { + code: '', + errors: [{ messageId: 'missingProperty' }], + }, + { + code: '', + errors: [{ messageId: 'missingProperty' }], + }, + { + code: '', + errors: [{ messageId: 'missingProperty' }], + }, + { + code: '', + errors: [ + { messageId: 'exclusiveCheckedAttribute' }, + { messageId: 'missingProperty' }, + ], + }, + { + code: 'React.createElement("input", { checked: false })', + errors: [{ messageId: 'missingProperty' }], + }, + { + code: 'React.createElement("input", { checked: true, defaultChecked: true })', + errors: [ + { messageId: 'exclusiveCheckedAttribute' }, + { messageId: 'missingProperty' }, + ], + }, + { + code: '', + options: [{ ignoreMissingProperties: false }], + errors: [{ messageId: 'exclusiveCheckedAttribute' }], + }, + { + code: '', + options: [{ ignoreExclusiveCheckedAttribute: false }], + errors: [{ messageId: 'missingProperty' }], + }, + ]), +});