eslint object-shorthand error with variable passed in

Question

I have the following function that is setting up a select2 plugin, which needs selects to stay open if they are multiple but closed if they are not:

function setUpSelects($selects, closeOnSelect) {
  $selects.each((i, item) => {
    const $item = $(item);

    $item.select2({
      closeOnSelect: closeOnSelect,  // <-- error on this line
      minimumResultsForSearch: Infinity,
      placeholder: $item.data('placeholder') || $item.attr('placeholder'),
    });
  });
}

setUpSelects($('select:not([multiple])'), false);
setUpSelects($('select[multiple]'), true);

However, when I try to run this code, the eslint checker is giving me an error (on the line shown above) of:

error Expected property shorthand object-shorthand

I have done a search and read the docs but it doesn't show how you are meant to use a variable and the unaccepted answer on this question seems to think it may be a bug in eslint (although I have found no evidence to support that)

Is there a way to make this work or should I just disable the rule for that line?

In ES6, you can/should use `{foobar}` instead of `{foobar: foobar}`. — georg, Dec 04 '17 at 14:28
Have you tried using object shorthand notation like `{ closeOnSelect, minimumResultsForSearch: Infinity, ... }`? — Sirko, Dec 04 '17 at 14:29
Ah, I didn't know you could just leave the argument blank if it is called the same thing - I was just going to comment I noticed the Ininity variable worked — Pete, Dec 04 '17 at 14:29
Weird, now you have told me that this page makes a whole lot more sense: https://eslint.org/docs/rules/object-shorthand. They don't explain it very well in the first example — Pete, Dec 04 '17 at 14:34
I wonder why it is I only get downvoted when I ask a js question, even though it has enough code to repeat my problem and a clear problem statement. Not all of us are js gurus — Pete, Dec 04 '17 at 15:45
I'm assuming you're using some sort of pre-packaged rulebook that goes with eslint (otherwise the rule would have been there because you've explicitly set it). I use the airbnb guide which happens to use this rule as well but their rationale is generally more helpful than what you'd find in the eslint pages [here's the description](https://github.com/airbnb/javascript#es6-object-concise). — apokryfos, Dec 04 '17 at 16:15
@apokryfos, that is much more helpful - at least there is an explanation to go with that as well as an example. I read the eslint one over and over and didn't get what the difference was as it didn't have an explanation of what it was changing, I guess the main confusion was that it showed a couple of examples rather than just one example and the way to correct it also confused me because it went from each property on a their own line to all on a single one — Pete, Dec 04 '17 at 16:30

Carl Edwards · Accepted Answer · 2017-12-04T14:34:36.173

176

An excerpt from eslint regarding the issue:

Require Object Literal Shorthand Syntax (object-shorthand) - Rule Details

This rule enforces the use of the shorthand syntax. This applies to all methods (including generators) defined in object literals and any properties defined where the key name matches name of the assigned variable.

Change

closeOnSelect: closeOnSelect

to just

closeOnSelect

edited Dec 04 '17 at 14:34

answered Dec 04 '17 at 14:29

Carl Edwards

13,826
11
57
119

score 14 · Answer 2 · answered Apr 28 '20 at 15:23

This rule checks that object literal shorthand syntax is used, e.g {a, b} instead of {a: a, b: b}. The rule is configurable, see options for more details.

Despite this shorthand syntax is convenient, in some cases you may not want to force it usage. You can disable the check in your config:

// .eslintrc.json

{
  "rules": {
    // Disables the rule. You can just remove it,
    // if it is not enabled by a parent config.
    "object-shorthand": 0
  }
}

In case of TSLint there is a different option:

// tslint.json

{
  "rules": {
    // Disables the rule. You can just remove it,
    // if it is not enabled by a parent config.
    "object-literal-shorthand": false
  }
}

Just a note that you may need to restart your web-server for the updated ESLint settings to have been applied. — HyperionX, Oct 26 '20 at 06:01

score -1 · Answer 3 · answered Aug 19 '21 at 10:29

-1

Wants to define Object with keys and can't use any. Try this.

interface Map { [key: string]: string | undefined }

const HUMAN_MAP: Map = {
  draft: "Draft",
}

export const human = (str: string) => HUMAN_MAP[str] || str

answered Aug 19 '21 at 10:29

Gajender Singh

1,285
14
13

eslint object-shorthand error with variable passed in

3 Answers3