eslint object-shorthand error with variable passed in

JavascriptEcmascript 6Eslint

Javascript Problem Overview


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?

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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
  }
}

Solution 3 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPeteView Question on Stackoverflow
Solution 1 - JavascriptCarl EdwardsView Answer on Stackoverflow
Solution 2 - JavascriptValeriy KatkovView Answer on Stackoverflow
Solution 3 - JavascriptGajender SinghView Answer on Stackoverflow