Merge pull request #1909 from alexandernanberg/fix/class-property-des…

…tructure-assignment Ignore class properties in destructuring-assignment
jsx-eslint · Aug 5, 2018 · a466a77 · a466a77
2 parents 9dbb834 + 4382aa5
commit a466a77
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/docs/rules/destructuring-assignment.md b/docs/rules/destructuring-assignment.md
@@ -85,3 +85,24 @@ const Foo = class extends React.PureComponent {
     return <div>{this.state.title}</div>;
   }
 };
+```
+
+## Rule Options
+
+```js
+...
+"react/destructuring-assignment": [<enabled>, "always", { "ignoreClassFields": <boolean> }]
+...
+```
+
+### `ignoreClassFields`
+
+When `true` the rule will ignore class field declarations.
+
+The following patterns are then considered okay and do not cause warnings:
+
+```jsx
+class Foo extends React.PureComponent {
+  bar = this.props.bar
+}
+```
diff --git a/lib/rules/destructuring-assignment.js b/lib/rules/destructuring-assignment.js
@@ -22,12 +22,20 @@ module.exports = {
         'always',
         'never'
       ]
+    }, {
+      type: 'object',
+      properties: {
+        ignoreClassFields: {
+          type: 'boolean'
+        }
+      },
+      additionalProperties: false
     }]
   },
 
   create: Components.detect((context, components, utils) => {
     const configuration = context.options[0] || DEFAULT_OPTION;
-
+    const ignoreClassFields = context.options[1] && context.options[1].ignoreClassFields === true || false;
 
     /**
     * Checks if a prop is being assigned a value props.bar = 'bar'
@@ -82,7 +90,10 @@ module.exports = {
         !isAssignmentToProp(node)
       );
 
-      if (isPropUsed && configuration === 'always') {
+      if (
+        isPropUsed && configuration === 'always' &&
+        !(ignoreClassFields && node.parent.type === 'ClassProperty')
+      ) {
         context.report({
           node: node,
           message: `Must use destructuring ${node.object.property.name} assignment`
@@ -128,7 +139,10 @@ module.exports = {
           });
         }
 
-        if (classComponent && destructuringClass && configuration === 'never') {
+        if (
+          classComponent && destructuringClass && configuration === 'never' &&
+          !(ignoreClassFields && node.parent.type === 'ClassProperty')
+        ) {
           context.report({
             node: node,
             message: `Must never use destructuring ${node.init.property.name} assignment`

diff --git a/tests/lib/rules/destructuring-assignment.js b/tests/lib/rules/destructuring-assignment.js
@@ -165,6 +165,14 @@ ruleTester.run('destructuring-assignment', rule, {
         }
       }
     `
+  }, {
+    code: `
+      class Foo extends React.Component {
+        bar = this.props.bar
+      }
+    `,
+    options: ['always', {ignoreClassFields: true}],
+    parser: 'babel-eslint'
   }],
 
   invalid: [{