[New] no-unused-prop-types: add ignore option

Author: Geraint White

CHANGELOG.md

@@ -7,6 +7,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ### Added
 * component detection: add componentWrapperFunctions setting ([#2713][] @@jzabala @LandonSchropp)
+* [`no-unused-prop-types`]: add ignore option ([#2972][] @grit96)
 
 ### Fixed
 * [`jsx-handler-names`]: properly substitute value into message ([#2975][] @G-Rath)
@@ -16,6 +17,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 [#2975]: https://github.com/yannickcr/eslint-plugin-react/pull/2975
 [#2974]: https://github.com/yannickcr/eslint-plugin-react/pull/2974
+[#2972]: https://github.com/yannickcr/eslint-plugin-react/pull/2972
 [#2713]: https://github.com/yannickcr/eslint-plugin-react/pull/2713
 
 ## [7.23.2] - 2021.04.08

docs/rules/no-unused-prop-types.md

@@ -75,11 +75,12 @@ This rule can take one argument to ignore some specific props during validation.
 
 ```js
 ...
-"react/no-unused-prop-types": [<enabled>, { customValidators: <customValidator>, skipShapeProps: <skipShapeProps> }]
+"react/no-unused-prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator>, skipShapeProps: <skipShapeProps> }]
 ...
 ```
 
 * `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
+* `ignore`: optional array of props name to ignore during validation.
 * `customValidators`: optional array of validators used for propTypes validation.
 * `skipShapeProps`: In some cases it is impossible to accurately detect whether or not a `PropTypes.shape`'s values are being used. Setting this option to `true` will skip validation of `PropTypes.shape` (`true` by default).
 

lib/rules/no-unused-prop-types.js

@@ -31,6 +31,13 @@ module.exports = {
     schema: [{
       type: 'object',
       properties: {
+        ignore: {
+          type: 'array',
+          items: {
+            type: 'string'
+          },
+          uniqueItems: true
+        },
         customValidators: {
           type: 'array',
           items: {
@@ -46,9 +53,18 @@ module.exports = {
   },
 
   create: Components.detect((context, components) => {
-    const defaults = {skipShapeProps: true, customValidators: []};
+    const defaults = {skipShapeProps: true, customValidators: [], ignore: []};
     const configuration = Object.assign({}, defaults, context.options[0] || {});
 
+    /**
+     * Checks if the prop is ignored
+     * @param {String} name Name of the prop to check.
+     * @returns {Boolean} True if the prop is ignored, false if not.
+     */
+    function isIgnored(name) {
+      return configuration.ignore.indexOf(name) !== -1;
+    }
+
     /**
      * Checks if the component must be validated
      * @param {Object} component The component to process
@@ -111,7 +127,7 @@ module.exports = {
           return;
         }
 
-        if (prop.node && !isPropUsed(component, prop)) {
+        if (prop.node && !isIgnored(prop.fullName) && !isPropUsed(component, prop)) {
           context.report({
             node: prop.node.key || prop.node,
             messageId: 'unusedPropType',

tests/lib/rules/no-unused-prop-types.js

@@ -3202,6 +3202,33 @@ ruleTester.run('no-unused-prop-types', rule, {
         }
       `,
       parser: parsers.BABEL_ESLINT
+    }, {
+      code: `
+        class Hello extends React.Component {
+          render() {
+            return <div>{this.props.used}</div>;
+          }
+        }
+        Hello.propTypes = {
+          used: PropTypes.string,
+          foo: PropTypes.string
+        };
+      `,
+      options: [{ignore: ['foo']}]
+    }, {
+      code: `
+        type Props = {
+          used: string,
+          foo: string,
+        }
+        class Hello extends React.Component<Props> {
+          render() {
+            return <div>{this.props.used}</div>;
+          }
+        }
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{ignore: ['foo']}]
     }, {
       code: `
         export default class Foo extends React.Component {
@@ -5488,6 +5515,41 @@ ruleTester.run('no-unused-prop-types', rule, {
       errors: [{
         message: '\'lastname\' PropType is defined but prop is never used'
       }]
+    }, {
+      code: `
+        class MyComponent extends React.Component {
+          render() {
+            return <div>Hello {this.props.firstname}</div>
+          }
+        }
+        MyComponent.propTypes = {
+          firstname: PropTypes.string,
+          lastname: PropTypes.string,
+          foo: PropTypes.string,
+        };
+      `,
+      options: [{ignore: ['foo']}],
+      errors: [{
+        message: '\'lastname\' PropType is defined but prop is never used'
+      }]
+    }, {
+      code: `
+        type Props = {
+          firstname: string,
+          lastname: string,
+          foo: string,
+        }
+        class MyComponent extends React.Component<Props> {
+          render() {
+            return <div>Hello {this.props.firstname}</div>
+          }
+        }
+      `,
+      parser: parsers.BABEL_ESLINT,
+      options: [{ignore: ['foo']}],
+      errors: [{
+        message: '\'lastname\' PropType is defined but prop is never used'
+      }]
     }, {
       code: `
         type Person = string;
@@ -6941,11 +7003,9 @@ ruleTester.run('no-unused-prop-types', rule, {
       errors: [{
         message: '\'prop1\' PropType is defined but prop is never used'
       }]
-    }])
-
-    /* , {
-      // Enable this when the following issue is fixed
-      // https://github.com/yannickcr/eslint-plugin-react/issues/296
+    }]),
+    // Issue: #296
+    {
       code: [
         'function Foo(props) {',
         '  const { bar: { nope } } = props;',
@@ -6963,6 +7023,6 @@ ruleTester.run('no-unused-prop-types', rule, {
       errors: [{
         message: '\'foo\' PropType is defined but prop is never used'
       }]
-    } */
+    }
   )
 });