Proposal: Nested Destructuring

The purpose of this proposal is to introduce an option to warn about nested destructuring, which can be hard to read and understand. This is in line with the original proposal in https://github.com/eslint/eslint/issues/6053.

What rule do you want to change?

prefer-destructuring

Does this change cause the rule to produce more or fewer warnings?

It will produce more warnings.

How will the change be implemented? (New option, new default behavior, etc.)?

In the current state the rule can only be configured to emit warnings if a destructuring is possible and it doesn’t care if the destructuring is nested. It is however not possible to do the opposite and warn if destructuring is used, and it is also not possible to warn only when nested destructuring is used.

I would like to propose to deprecate the true/false settings of array/object in the rule options and replace them with always/flat/never.

• always should warn when destructuring is possible
• flat should warn when nested destructuring is used, or flat destructuring is possible
• never should warn when destructuring is used

I would personally prefer it if the default was changed to flat for both array and object, but that would be a breaking change, so likely not a good idea. An alternativ however is introducing this as a new destructuring rule, and deprecate the prefer-destructuring rule completely.

Please provide some example code that this change will affect:

   const { inject: { service }, Mixin, assert, isPresent } = Ember;

   let { a: [{foo: f}] } = obj

What does the rule currently do for this code?

Nothing, as the rule is currently not warning about destructuring.

What will the rule do after it’s changed?

// Do not use nested destructuring (at 1:17)
   const { inject: { service }, Mixin, assert, isPresent } = Ember;
// ----------------^

// Do not use nested destructuring (at 3:10)
   let { a: [{foo: f}] } = obj
// ---------^

---

no-nested-destructuring proposal

Please describe what the rule should do:

The rule should warn about the use of nested destructuring.

What category of rule is this? (place an “X” next to just one item)

[x] Enforces code style [ ] Warns about a potential error [x] Suggests an alternate way of doing something [ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

// Do not use nested destructuring (at 1:17)
   const { inject: { service }, Mixin, assert, isPresent } = Ember;
// ----------------^

// Do not use nested destructuring (at 3:10)
   let { a: [{foo: f}] } = obj
// ---------^

First draft implementation is available at https://astexplorer.net/#/vTZ1hYHzaZ

Why should this rule be included in ESLint (instead of a plugin)?

Using nested destructuring can often lead to code that is harder to read and comprehend compared to basic variable assignments or using multiple non-nested destructurings in a row. I think this is a rule that should be included in ESLint itself to increase awareness of the problem and help everyone write easier to understand code. This could obviously be implemented in a plugin but ultimately I think this is something that the majority of JS/ES6 developers would use.

[joncursi]

Or perhaps, a setting that allows you to specify when object destructuring should kick in, such as after this.

// OK
const something = process.env.variable;

// NOT OK
const something = this.props.something;

[joncursi]

yep, I think having it configurable by number of destructuring levels makes sense

Agreed 100%. I want to use destructuring, but I also don’t want my code to turn into a soup of curly braces. Having a configurable option for depth would give some much-needed flexibility.

// Would be nice if this were allowed
const {
  one,
  two,
  three,
} = this.props;

// However ESLint wants you to destructure this further, which is hard to read IMO:
const {
  props: {
    one,
    two,
    three,
  },
} = this;