question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ES2015 destructiring assignment with renaming causes key-spacing

See original GitHub issue

I’m seeing this key-spacing error for reassignment during destructuring, as done here :

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names

I accept that it might be considered appropriate to add a space after the colon, as in the case of a key/value pair, but the wording of the error is a little misleading since it isn’t a key/value pair. Is it worth rewording the error message, or at least adding such an example to the docs so people can see it is not a mistake?

Tell us about your environment

  • ESLint Version: v3.19.0
  • Node Version: v7.8.0
  • npm Version: 4.2.0

What parser (default, Babel-ESLint, etc.) are you using? ?

Please show your full configuration:

{
  "extends": ["eslint:recommended", "google"],
  "env": {
    "browser": true,
    "es6": true
  },
  "plugins": [
    "html"
  ],
  "rules": {
    "no-var": "off",
    "new-cap": ["error", { "capIsNewExceptions": ["Polymer", "PolymerRedux"] }],
    "no-console": ["error", { "allow": ["info", "warn", "error"] }]
  },
  "globals": {
    "Polymer": true
  },
  "parserOptions": {
    "ecmaVersion": 6
  }
}

What did you do? Please include the actual source code causing the issue.

let {b:c} = {a: 1};

What did you expect to happen? Nothing: ie is it acceptable for there to be no space after the ‘:’ when renaming during destructuring, or: A relevant, helpful error message, such as ‘Missing space before assigned variable in destructuring’ - I’m sure there is something better than that.

What actually happened? Please include the actual, raw output from ESLint.

  1:8  error  Missing space before value for key 'b'  key-spacing
  1:8  error  'c' is assigned a value but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

The current message is un-intuitive (imo) since it references a key-value pair, and this isn’t that.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assigning_to_new_variable_names

Tagging @btmills, as requested.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:4
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
chipit24commented, Sep 7, 2017

Any update on this? I would like to be able to enforce a structure like this:

const myObj = { id: '1234' };
const { id:ObjId } = myObj;

I think disallowing the space after the colon for the renamed variable makes it more clear that it’s a renamed variable and not a value in a key-value pair.

1reaction
btmillscommented, Sep 24, 2017

@davidmaxwaterman here’s a less contrived example:

// This:
const {
    location: {
        protocol
    }
} = window;

// Is equivalent to this:
const protocol = window.location.protocol;

Check out nested object destructuring on MDN.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rename & Destructure Variables in ES6 - Wes Bos
Last post we took a look at an intro to destructuring. Let's take a look at another use case which would be renaming...
Read more >
ES6 Destructuring and Variable Renaming Explained!
A work around for that is to rename the year variables as we destructure them. Renaming Variables while Destructuring. Let's take our example ......
Read more >
A Quick Guide to Renaming and Setting Default Values with ...
A Quick Guide to Renaming and Setting Default Values with ES6 Destructuring. By David Wosk / JavaScript. I stumbled across this in a...
Read more >
List of available rules - ESLint - Pluggable JavaScript linter
disallow assignment operators in conditional expressions ... key-spacing ... disallow renaming import, export, and destructured assignments to the same name.
Read more >
eslint-config-esnext - npm
allows es2015 modules and es2016 object rest and spread to be parsed ... disallow renaming import , export , and destructured assignments to ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found