ManageIQ/manageiq-ui-classic

View on GitHub
app/javascript/components/miq_debug/index.jsx

Summary

Maintainability
A
35 mins
Test Coverage

Function onerror has 5 arguments (exceeds 4 allowed). Consider refactoring.
Open

  window.onerror = function(msg, url, lineNo, columnNo, error) {
Severity: Minor
Found in app/javascript/components/miq_debug/index.jsx - About 35 mins to fix

Expected to return a value at the end of function.
Open

const debug_toast = function(type, data) {

require return statements to either always or never specify values (consistent-return)

Unlike statically-typed languages which enforce that a function returns a specified type of value, JavaScript allows different code paths in a function to return different types of values.

A confusing aspect of JavaScript is that a function returns undefined if any of the following are true:

  • it does not execute a return statement before it exits
  • it executes return which does not specify a value explicitly
  • it executes return undefined
  • it executes return void followed by an expression (for example, a function call)
  • it executes return followed by any other expression which evaluates to undefined

If any code paths in a function return a value explicitly but some code path do not return a value explicitly, it might be a typing mistake, especially in a large function. In the following example:

  • a code path through the function returns a Boolean value true
  • another code path does not return a value explicitly, therefore returns undefined implicitly
function doSomething(condition) {
    if (condition) {
        return true;
    } else {
        return;
    }
}

Rule Details

This rule requires return statements to either always or never specify values. This rule ignores function definitions where the name begins with an uppercase letter, because constructors (when invoked with the new operator) return the instantiated object implicitly if they do not return another object explicitly.

Examples of incorrect code for this rule:

/*eslint consistent-return: "error"*/

function doSomething(condition) {
    if (condition) {
        return true;
    } else {
        return;
    }
}

function doSomething(condition) {
    if (condition) {
        return true;
    }
}

Examples of correct code for this rule:

/*eslint consistent-return: "error"*/

function doSomething(condition) {
    if (condition) {
        return true;
    } else {
        return false;
    }
}

function Foo() {
    if (!(this instanceof Foo)) {
        return new Foo();
    }

    this.a = 0;
}

Options

This rule has an object option:

  • "treatUndefinedAsUnspecified": false (default) always either specify values or return undefined implicitly only.
  • "treatUndefinedAsUnspecified": true always either specify values or return undefined explicitly or implicitly.

treatUndefinedAsUnspecified

Examples of incorrect code for this rule with the default { "treatUndefinedAsUnspecified": false } option:

/*eslint consistent-return: ["error", { "treatUndefinedAsUnspecified": false }]*/

function foo(callback) {
    if (callback) {
        return void callback();
    }
    // no return statement
}

function bar(condition) {
    if (condition) {
        return undefined;
    }
    // no return statement
}

Examples of incorrect code for this rule with the { "treatUndefinedAsUnspecified": true } option:

/*eslint consistent-return: ["error", { "treatUndefinedAsUnspecified": true }]*/

function foo(callback) {
    if (callback) {
        return void callback();
    }
    return true;
}

function bar(condition) {
    if (condition) {
        return undefined;
    }
    return true;
}

Examples of correct code for this rule with the { "treatUndefinedAsUnspecified": true } option:

/*eslint consistent-return: ["error", { "treatUndefinedAsUnspecified": true }]*/

function foo(callback) {
    if (callback) {
        return void callback();
    }
    // no return statement
}

function bar(condition) {
    if (condition) {
        return undefined;
    }
    // no return statement
}

When Not To Use It

If you want to allow functions to have different return behavior depending on code branching, then it is safe to disable this rule. Source: http://eslint.org/docs/rules/

Unary operator '++' used.
Open

    key: state.keyCounter++,

disallow the unary operators ++ and -- (no-plusplus)

Because the unary ++ and -- operators are subject to automatic semicolon insertion, differences in whitespace can change semantics of source code.

var i = 10;
var j = 20;

i ++
j
// i = 11, j = 20
var i = 10;
var j = 20;

i
++
j
// i = 10, j = 21

Rule Details

This rule disallows the unary operators ++ and --.

Examples of incorrect code for this rule:

/*eslint no-plusplus: "error"*/

var foo = 0;
foo++;

var bar = 42;
bar--;

for (i = 0; i < l; i++) {
    return;
}

Examples of correct code for this rule:

/*eslint no-plusplus: "error"*/

var foo = 0;
foo += 1;

var bar = 42;
bar -= 1;

for (i = 0; i < l; i += 1) {
    return;
}

Options

This rule has an object option.

  • "allowForLoopAfterthoughts": true allows unary operators ++ and -- in the afterthought (final expression) of a for loop.

allowForLoopAfterthoughts

Examples of correct code for this rule with the { "allowForLoopAfterthoughts": true } option:

/*eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }]*/

for (i = 0; i < l; i++) {
    return;
}

for (i = 0; i < l; i--) {
    return;
}

Source: http://eslint.org/docs/rules/

Expected a line break after this opening brace.
Open

  const render = ({ items, clear, remove, disable }) => {

enforce consistent line breaks inside braces (object-curly-newline)

A number of style guides require or disallow line breaks inside of object braces and other tokens.

Rule Details

This rule enforces consistent line breaks inside braces of object literals or destructuring assignments.

Options

This rule has either a string option:

  • "always" requires line breaks inside braces
  • "never" disallows line breaks inside braces

Or an object option:

  • "multiline": true requires line breaks if there are line breaks inside properties or between properties
  • "minProperties" requires line breaks if the number of properties is at least the given integer. By default, an error will also be reported if an object contains linebreaks and has fewer properties than the given integer. However, the second behavior is disabled if the consistent option is set to true
  • "consistent": true (default) requires that either both curly braces, or neither, directly enclose newlines. Note that enabling this option will also change the behavior of the minProperties option. (See minProperties above for more information)

You can specify different options for object literals, destructuring assignments, and named imports and exports:

{
    "object-curly-newline": ["error", {
        "ObjectExpression": "always",
        "ObjectPattern": { "multiline": true },
        "ImportDeclaration": "never",
        "ExportDeclaration": { "multiline": true, "minProperties": 3 }
    }]
}
  • "ObjectExpression" configuration for object literals
  • "ObjectPattern" configuration for object patterns of destructuring assignments
  • "ImportDeclaration" configuration for named imports
  • "ExportDeclaration" configuration for named exports

always

Examples of incorrect code for this rule with the "always" option:

/*eslint object-curly-newline: ["error", "always"]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {foo: 1, bar: 2};
let d = {foo: 1,
    bar: 2};
let e = {foo() {
    dosomething();
}};

let {} = obj;
let {f} = obj;
let {g, h} = obj;
let {i,
    j} = obj;
let {k = function() {
    dosomething();
}} = obj;

Examples of correct code for this rule with the "always" option:

/*eslint object-curly-newline: ["error", "always"]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {
    foo: 1, bar: 2
};
let d = {
    foo: 1,
    bar: 2
};
let e = {
    foo: function() {
        dosomething();
    }
};

let {
} = obj;
let {
    f
} = obj;
let {
    g, h
} = obj;
let {
    i,
    j
} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

never

Examples of incorrect code for this rule with the "never" option:

/*eslint object-curly-newline: ["error", "never"]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {
    foo: 1, bar: 2
};
let d = {
    foo: 1,
    bar: 2
};
let e = {
    foo: function() {
        dosomething();
    }
};

let {
} = obj;
let {
    f
} = obj;
let {
    g, h
} = obj;
let {
    i,
    j
} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

Examples of correct code for this rule with the "never" option:

/*eslint object-curly-newline: ["error", "never"]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {foo: 1, bar: 2};
let d = {foo: 1,
    bar: 2};
let e = {foo: function() {
    dosomething();
}};

let {} = obj;
let {f} = obj;
let {g, h} = obj;
let {i,
    j} = obj;
let {k = function() {
    dosomething();
}} = obj;

multiline

Examples of incorrect code for this rule with the { "multiline": true } option:

/*eslint object-curly-newline: ["error", { "multiline": true }]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {
    foo: 1, bar: 2
};
let d = {foo: 1,
    bar: 2};
let e = {foo: function() {
    dosomething();
}};

let {
} = obj;
let {
    f
} = obj;
let {
    g, h
} = obj;
let {i,
    j} = obj;
let {k = function() {
    dosomething();
}} = obj;

Examples of correct code for this rule with the { "multiline": true } option:

/*eslint object-curly-newline: ["error", { "multiline": true }]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {foo: 1, bar: 2};
let d = {
    foo: 1,
    bar: 2
};
let e = {
    foo: function() {
        dosomething();
    }
};

let {} = obj;
let {f} = obj;
let {g, h} = obj;
let {
    i,
    j
} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

minProperties

Examples of incorrect code for this rule with the { "minProperties": 2 } option:

/*eslint object-curly-newline: ["error", { "minProperties": 2 }]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {foo: 1, bar: 2};
let d = {foo: 1,
    bar: 2};
let e = {
    foo: function() {
        dosomething();
    }
};

let {
} = obj;
let {
    f
} = obj;
let {g, h} = obj;
let {i,
    j} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

Examples of correct code for this rule with the { "minProperties": 2 } option:

/*eslint object-curly-newline: ["error", { "minProperties": 2 }]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {
    foo: 1, bar: 2
};
let d = {
    foo: 1,
    bar: 2
};
let e = {foo: function() {
    dosomething();
}};

let {} = obj;
let {f} = obj;
let {
    g, h
} = obj;
let {
    i,
    j
} = obj;
let {k = function() {
    dosomething();
}} = obj;

consistent

Examples of incorrect code for this rule with the default { "consistent": true } option:

/*eslint object-curly-newline: ["error", { "consistent": true }]*/
/*eslint-env es6*/

let a = {foo: 1
};
let b = {
    foo: 1};
let c = {foo: 1, bar: 2
};
let d = {
    foo: 1, bar: 2};
let e = {foo: 1,
    bar: 2};
let f = {foo: function() {
    dosomething();
}};

let {g
} = obj;
let {
    h} = obj;
let {i, j
} = obj;
let {
    k, l} = obj;
let {m,
    n} = obj;
let {o = function() {
    dosomething();
}} = obj;

Examples of correct code for this rule with the default { "consistent": true } option:

/*eslint object-curly-newline: ["error", { "consistent": true }]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {
    foo: 1
};
let d = {
    foo: 1, bar: 2
};
let e = {
    foo: 1,
    bar: 2
};
let f = {foo: function() {dosomething();}};
let g = {
    foo: function() {
        dosomething();
    }
};

let {} = obj;
let {h} = obj;
let {i, j} = obj;
let {
    k, l
} = obj;
let {
    m,
    n
} = obj;
let {o = function() {dosomething();}} = obj;
let {
    p = function() {
        dosomething();
    }
} = obj;

ObjectExpression and ObjectPattern

Examples of incorrect code for this rule with the { "ObjectExpression": "always", "ObjectPattern": "never" } options:

/*eslint object-curly-newline: ["error", { "ObjectExpression": "always", "ObjectPattern": "never" }]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {foo: 1, bar: 2};
let d = {foo: 1,
    bar: 2};
let e = {foo: function() {
    dosomething();
}};

let {
} = obj;
let {
    f
} = obj;
let {
    g, h
} = obj;
let {
    i,
    j
} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

Examples of correct code for this rule with the { "ObjectExpression": "always", "ObjectPattern": "never" } options:

/*eslint object-curly-newline: ["error", { "ObjectExpression": "always", "ObjectPattern": "never" }]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {
    foo: 1, bar: 2
};
let d = {
    foo: 1,
    bar: 2
};
let e = {
    foo: function() {
        dosomething();
    }
};

let {} = obj;
let {f} = obj;
let {g, h} = obj;
let {i,
    j} = obj;
let {k = function() {
    dosomething();
}} = obj;

ImportDeclaration and ExportDeclaration

Examples of incorrect code for this rule with the { "ImportDeclaration": "always", "ExportDeclaration": "never" } options:

/*eslint object-curly-newline: ["error", { "ImportDeclaration": "always", "ExportDeclaration": "never" }]*/
/*eslint-env es6*/

import {foo, bar} from 'foo-bar';
import {foo as f, bar} from 'foo-bar';
import {foo,
    bar} from 'foo-bar';

export {
   foo,
   bar
};
export {
   foo as f,
   bar
} from 'foo-bar';

Examples of correct code for this rule with the { "ImportDeclaration": "always", "ExportDeclaration": "never" } options:

/*eslint object-curly-newline: ["error", { "ImportDeclaration": "always", "ExportDeclaration": "never" }]*/
/*eslint-env es6*/

import {
    foo,
    bar
} from 'foo-bar';
import {
    foo as f,
    bar
} from 'foo-bar';

export { foo, bar } from 'foo-bar';
export { foo as f, bar } from 'foo-bar';

Compatibility

When Not To Use It

If you don't want to enforce consistent line breaks inside braces, then it's safe to disable this rule.

Related Rules

  • [comma-spacing](comma-spacing.md)
  • [key-spacing](key-spacing.md)
  • [object-curly-spacing](object-curly-spacing.md)
  • [object-property-newline](object-property-newline.md) Source: http://eslint.org/docs/rules/

Unexpected parentheses around single function argument having a body with no curly braces.
Open

    state.items = state.items.filter((i) => i !== item);

Require parens in arrow function arguments (arrow-parens)

Arrow functions can omit parentheses when they have exactly one parameter. In all other cases the parameter(s) must be wrapped in parentheses. This rule enforces the consistent use of parentheses in arrow functions.

Rule Details

This rule enforces parentheses around arrow function parameters regardless of arity. For example:

/*eslint-env es6*/

// Bad
a => {}

// Good
(a) => {}

Following this style will help you find arrow functions (=>) which may be mistakenly included in a condition when a comparison such as >= was the intent.

/*eslint-env es6*/

// Bad
if (a => 2) {
}

// Good
if (a >= 2) {
}

The rule can also be configured to discourage the use of parens when they are not required:

/*eslint-env es6*/

// Bad
(a) => {}

// Good
a => {}

Options

This rule has a string option and an object one.

String options are:

  • "always" (default) requires parens around arguments in all cases.
  • "as-needed" allows omitting parens when there is only one argument.

Object properties for variants of the "as-needed" option:

  • "requireForBlockBody": true modifies the as-needed rule in order to require parens if the function body is in an instructions block (surrounded by braces).

always

Examples of incorrect code for this rule with the default "always" option:

/*eslint arrow-parens: ["error", "always"]*/
/*eslint-env es6*/

a => {};
a => a;
a => {'\n'};
a.then(foo => {});
a.then(foo => a);
a(foo => { if (true) {} });

Examples of correct code for this rule with the default "always" option:

/*eslint arrow-parens: ["error", "always"]*/
/*eslint-env es6*/

() => {};
(a) => {};
(a) => a;
(a) => {'\n'}
a.then((foo) => {});
a.then((foo) => { if (true) {} });

If Statements

One of benefits of this option is that it prevents the incorrect use of arrow functions in conditionals:

/*eslint-env es6*/

var a = 1;
var b = 2;
// ...
if (a => b) {
 console.log('bigger');
} else {
 console.log('smaller');
}
// outputs 'bigger', not smaller as expected

The contents of the if statement is an arrow function, not a comparison.

If the arrow function is intentional, it should be wrapped in parens to remove ambiguity.

/*eslint-env es6*/

var a = 1;
var b = 0;
// ...
if ((a) => b) {
 console.log('truthy value returned');
} else {
 console.log('falsey value returned');
}
// outputs 'truthy value returned'

The following is another example of this behavior:

/*eslint-env es6*/

var a = 1, b = 2, c = 3, d = 4;
var f = a => b ? c: d;
// f = ?

f is an arrow function which takes a as an argument and returns the result of b ? c: d.

This should be rewritten like so:

/*eslint-env es6*/

var a = 1, b = 2, c = 3, d = 4;
var f = (a) => b ? c: d;

as-needed

Examples of incorrect code for this rule with the "as-needed" option:

/*eslint arrow-parens: ["error", "as-needed"]*/
/*eslint-env es6*/

(a) => {};
(a) => a;
(a) => {'\n'};
a.then((foo) => {});
a.then((foo) => a);
a((foo) => { if (true) {} });

Examples of correct code for this rule with the "as-needed" option:

/*eslint arrow-parens: ["error", "as-needed"]*/
/*eslint-env es6*/

() => {};
a => {};
a => a;
a => {'\n'};
a.then(foo => {});
a.then(foo => { if (true) {} });
(a, b, c) => a;
(a = 10) => a;
([a, b]) => a;
({a, b}) => a;

requireForBlockBody

Examples of incorrect code for the { "requireForBlockBody": true } option:

/*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
/*eslint-env es6*/

(a) => a;
a => {};
a => {'\n'};
a.map((x) => x * x);
a.map(x => {
  return x * x;
});
a.then(foo => {});

Examples of correct code for the { "requireForBlockBody": true } option:

/*eslint arrow-parens: [2, "as-needed", { "requireForBlockBody": true }]*/
/*eslint-env es6*/

(a) => {};
(a) => {'\n'};
a => ({});
() => {};
a => a;
a.then((foo) => {});
a.then((foo) => { if (true) {} });
a((foo) => { if (true) {} });
(a, b, c) => a;
(a = 10) => a;
([a, b]) => a;
({a, b}) => a;

Further Reading

Expected a line break before this closing brace.
Open

  const render = ({ items, clear, remove, disable }) => {

enforce consistent line breaks inside braces (object-curly-newline)

A number of style guides require or disallow line breaks inside of object braces and other tokens.

Rule Details

This rule enforces consistent line breaks inside braces of object literals or destructuring assignments.

Options

This rule has either a string option:

  • "always" requires line breaks inside braces
  • "never" disallows line breaks inside braces

Or an object option:

  • "multiline": true requires line breaks if there are line breaks inside properties or between properties
  • "minProperties" requires line breaks if the number of properties is at least the given integer. By default, an error will also be reported if an object contains linebreaks and has fewer properties than the given integer. However, the second behavior is disabled if the consistent option is set to true
  • "consistent": true (default) requires that either both curly braces, or neither, directly enclose newlines. Note that enabling this option will also change the behavior of the minProperties option. (See minProperties above for more information)

You can specify different options for object literals, destructuring assignments, and named imports and exports:

{
    "object-curly-newline": ["error", {
        "ObjectExpression": "always",
        "ObjectPattern": { "multiline": true },
        "ImportDeclaration": "never",
        "ExportDeclaration": { "multiline": true, "minProperties": 3 }
    }]
}
  • "ObjectExpression" configuration for object literals
  • "ObjectPattern" configuration for object patterns of destructuring assignments
  • "ImportDeclaration" configuration for named imports
  • "ExportDeclaration" configuration for named exports

always

Examples of incorrect code for this rule with the "always" option:

/*eslint object-curly-newline: ["error", "always"]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {foo: 1, bar: 2};
let d = {foo: 1,
    bar: 2};
let e = {foo() {
    dosomething();
}};

let {} = obj;
let {f} = obj;
let {g, h} = obj;
let {i,
    j} = obj;
let {k = function() {
    dosomething();
}} = obj;

Examples of correct code for this rule with the "always" option:

/*eslint object-curly-newline: ["error", "always"]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {
    foo: 1, bar: 2
};
let d = {
    foo: 1,
    bar: 2
};
let e = {
    foo: function() {
        dosomething();
    }
};

let {
} = obj;
let {
    f
} = obj;
let {
    g, h
} = obj;
let {
    i,
    j
} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

never

Examples of incorrect code for this rule with the "never" option:

/*eslint object-curly-newline: ["error", "never"]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {
    foo: 1, bar: 2
};
let d = {
    foo: 1,
    bar: 2
};
let e = {
    foo: function() {
        dosomething();
    }
};

let {
} = obj;
let {
    f
} = obj;
let {
    g, h
} = obj;
let {
    i,
    j
} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

Examples of correct code for this rule with the "never" option:

/*eslint object-curly-newline: ["error", "never"]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {foo: 1, bar: 2};
let d = {foo: 1,
    bar: 2};
let e = {foo: function() {
    dosomething();
}};

let {} = obj;
let {f} = obj;
let {g, h} = obj;
let {i,
    j} = obj;
let {k = function() {
    dosomething();
}} = obj;

multiline

Examples of incorrect code for this rule with the { "multiline": true } option:

/*eslint object-curly-newline: ["error", { "multiline": true }]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {
    foo: 1, bar: 2
};
let d = {foo: 1,
    bar: 2};
let e = {foo: function() {
    dosomething();
}};

let {
} = obj;
let {
    f
} = obj;
let {
    g, h
} = obj;
let {i,
    j} = obj;
let {k = function() {
    dosomething();
}} = obj;

Examples of correct code for this rule with the { "multiline": true } option:

/*eslint object-curly-newline: ["error", { "multiline": true }]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {foo: 1, bar: 2};
let d = {
    foo: 1,
    bar: 2
};
let e = {
    foo: function() {
        dosomething();
    }
};

let {} = obj;
let {f} = obj;
let {g, h} = obj;
let {
    i,
    j
} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

minProperties

Examples of incorrect code for this rule with the { "minProperties": 2 } option:

/*eslint object-curly-newline: ["error", { "minProperties": 2 }]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {foo: 1, bar: 2};
let d = {foo: 1,
    bar: 2};
let e = {
    foo: function() {
        dosomething();
    }
};

let {
} = obj;
let {
    f
} = obj;
let {g, h} = obj;
let {i,
    j} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

Examples of correct code for this rule with the { "minProperties": 2 } option:

/*eslint object-curly-newline: ["error", { "minProperties": 2 }]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {
    foo: 1, bar: 2
};
let d = {
    foo: 1,
    bar: 2
};
let e = {foo: function() {
    dosomething();
}};

let {} = obj;
let {f} = obj;
let {
    g, h
} = obj;
let {
    i,
    j
} = obj;
let {k = function() {
    dosomething();
}} = obj;

consistent

Examples of incorrect code for this rule with the default { "consistent": true } option:

/*eslint object-curly-newline: ["error", { "consistent": true }]*/
/*eslint-env es6*/

let a = {foo: 1
};
let b = {
    foo: 1};
let c = {foo: 1, bar: 2
};
let d = {
    foo: 1, bar: 2};
let e = {foo: 1,
    bar: 2};
let f = {foo: function() {
    dosomething();
}};

let {g
} = obj;
let {
    h} = obj;
let {i, j
} = obj;
let {
    k, l} = obj;
let {m,
    n} = obj;
let {o = function() {
    dosomething();
}} = obj;

Examples of correct code for this rule with the default { "consistent": true } option:

/*eslint object-curly-newline: ["error", { "consistent": true }]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {
    foo: 1
};
let d = {
    foo: 1, bar: 2
};
let e = {
    foo: 1,
    bar: 2
};
let f = {foo: function() {dosomething();}};
let g = {
    foo: function() {
        dosomething();
    }
};

let {} = obj;
let {h} = obj;
let {i, j} = obj;
let {
    k, l
} = obj;
let {
    m,
    n
} = obj;
let {o = function() {dosomething();}} = obj;
let {
    p = function() {
        dosomething();
    }
} = obj;

ObjectExpression and ObjectPattern

Examples of incorrect code for this rule with the { "ObjectExpression": "always", "ObjectPattern": "never" } options:

/*eslint object-curly-newline: ["error", { "ObjectExpression": "always", "ObjectPattern": "never" }]*/
/*eslint-env es6*/

let a = {};
let b = {foo: 1};
let c = {foo: 1, bar: 2};
let d = {foo: 1,
    bar: 2};
let e = {foo: function() {
    dosomething();
}};

let {
} = obj;
let {
    f
} = obj;
let {
    g, h
} = obj;
let {
    i,
    j
} = obj;
let {
    k = function() {
        dosomething();
    }
} = obj;

Examples of correct code for this rule with the { "ObjectExpression": "always", "ObjectPattern": "never" } options:

/*eslint object-curly-newline: ["error", { "ObjectExpression": "always", "ObjectPattern": "never" }]*/
/*eslint-env es6*/

let a = {
};
let b = {
    foo: 1
};
let c = {
    foo: 1, bar: 2
};
let d = {
    foo: 1,
    bar: 2
};
let e = {
    foo: function() {
        dosomething();
    }
};

let {} = obj;
let {f} = obj;
let {g, h} = obj;
let {i,
    j} = obj;
let {k = function() {
    dosomething();
}} = obj;

ImportDeclaration and ExportDeclaration

Examples of incorrect code for this rule with the { "ImportDeclaration": "always", "ExportDeclaration": "never" } options:

/*eslint object-curly-newline: ["error", { "ImportDeclaration": "always", "ExportDeclaration": "never" }]*/
/*eslint-env es6*/

import {foo, bar} from 'foo-bar';
import {foo as f, bar} from 'foo-bar';
import {foo,
    bar} from 'foo-bar';

export {
   foo,
   bar
};
export {
   foo as f,
   bar
} from 'foo-bar';

Examples of correct code for this rule with the { "ImportDeclaration": "always", "ExportDeclaration": "never" } options:

/*eslint object-curly-newline: ["error", { "ImportDeclaration": "always", "ExportDeclaration": "never" }]*/
/*eslint-env es6*/

import {
    foo,
    bar
} from 'foo-bar';
import {
    foo as f,
    bar
} from 'foo-bar';

export { foo, bar } from 'foo-bar';
export { foo as f, bar } from 'foo-bar';

Compatibility

When Not To Use It

If you don't want to enforce consistent line breaks inside braces, then it's safe to disable this rule.

Related Rules

  • [comma-spacing](comma-spacing.md)
  • [key-spacing](key-spacing.md)
  • [object-curly-spacing](object-curly-spacing.md)
  • [object-property-newline](object-property-newline.md) Source: http://eslint.org/docs/rules/

Unexpected function expression.
Open

  Object.keys(orig).forEach(function(key) {

Require using arrow functions for callbacks (prefer-arrow-callback)

Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments.

For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior.

Additionally, arrow functions are:

  • less verbose, and easier to reason about.

  • bound lexically regardless of where or when they are invoked.

Rule Details

This rule locates function expressions used as callbacks or function arguments. An error will be produced for any that could be replaced by an arrow function without changing the result.

The following examples will be flagged:

/* eslint prefer-arrow-callback: "error" */

foo(function(a) { return a; }); // ERROR
// prefer: foo(a => a)

foo(function() { return this.a; }.bind(this)); // ERROR
// prefer: foo(() => this.a)

Instances where an arrow function would not produce identical results will be ignored.

The following examples will not be flagged:

/* eslint prefer-arrow-callback: "error" */
/* eslint-env es6 */

// arrow function callback
foo(a => a); // OK

// generator as callback
foo(function*() { yield; }); // OK

// function expression not used as callback or function argument
var foo = function foo(a) { return a; }; // OK

// unbound function expression callback
foo(function() { return this.a; }); // OK

// recursive named function callback
foo(function bar(n) { return n && n + bar(n - 1); }); // OK

Options

Access further control over this rule's behavior via an options object.

Default: { allowNamedFunctions: false, allowUnboundThis: true }

allowNamedFunctions

By default { "allowNamedFunctions": false }, this boolean option prohibits using named functions as callbacks or function arguments.

Changing this value to true will reverse this option's behavior by allowing use of named functions without restriction.

{ "allowNamedFunctions": true } will not flag the following example:

/* eslint prefer-arrow-callback: [ "error", { "allowNamedFunctions": true } ] */

foo(function bar() {});

allowUnboundThis

By default { "allowUnboundThis": true }, this boolean option allows function expressions containing this to be used as callbacks, as long as the function in question has not been explicitly bound.

When set to false this option prohibits the use of function expressions as callbacks or function arguments entirely, without exception.

{ "allowUnboundThis": false } will flag the following examples:

/* eslint prefer-arrow-callback: [ "error", { "allowUnboundThis": false } ] */
/* eslint-env es6 */

foo(function() { this.a; });

foo(function() { (() => this); });

someArray.map(function(itm) { return this.doSomething(itm); }, someObject);

When Not To Use It

  • In environments that have not yet adopted ES6 language features (ES3/5).

  • In ES6+ environments that allow the use of function expressions when describing callbacks or function arguments.

Further Reading

Expected property shorthand.
Open

      url: url,

Require Object Literal Shorthand Syntax (object-shorthand)

ECMAScript 6 provides a concise form for defining object literal methods and properties. This syntax can make defining complex object literals much cleaner.

Here are a few common examples using the ES5 syntax:

// properties
var foo = {
    x: x,
    y: y,
    z: z,
};

// methods
var foo = {
    a: function() {},
    b: function() {}
};

Now here are ES6 equivalents:

/*eslint-env es6*/

// properties
var foo = {x, y, z};

// methods
var foo = {
    a() {},
    b() {}
};

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.

Each of the following properties would warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w: function() {},
    x: function *() {},
    [y]: function() {},
    z: z
};

In that case the expected syntax would have been:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w() {},
    *x() {},
    [y]() {},
    z
};

This rule does not flag arrow functions inside of object literals. The following will not warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    x: (y) => y
};

See Also:

  • no-useless-rename which disallows renaming import, export, and destructured assignments to the same name.

Options

The rule takes an option which specifies when it should be applied. It can be set to one of the following values:

  • "always" (default) expects that the shorthand will be used whenever possible.
  • "methods" ensures the method shorthand is used (also applies to generators).
  • "properties" ensures the property shorthand is used (where the key and variable name match).
  • "never" ensures that no property or method shorthand is used in any object literal.
  • "consistent" ensures that either all shorthand or all long-form will be used in an object literal.
  • "consistent-as-needed" ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.

You can set the option in configuration like this:

{
    "object-shorthand": ["error", "always"]
}

Additionally, the rule takes an optional object configuration:

  • "avoidQuotes": true indicates that long-form syntax is preferred whenever the object key is a string literal (default: false). Note that this option can only be enabled when the string option is set to "always", "methods", or "properties".
  • "ignoreConstructors": true can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to "always" or "methods".
  • "avoidExplicitReturnArrows": true indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to "always" or "methods".

avoidQuotes

{
    "object-shorthand": ["error", "always", { "avoidQuotes": true }]
}

Example of incorrect code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz"() {}
};

Example of correct code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz": function() {},
    "qux": qux
};

ignoreConstructors

{
    "object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}

Example of correct code for this rule with the "always", { "ignoreConstructors": true } option:

/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/

var foo = {
    ConstructorFunction: function() {}
};

avoidExplicitReturnArrows

{
    "object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}

Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo: (bar, baz) => {
    return bar + baz;
  },

  qux: (foobar) => {
    return foobar * 2;
  }
};

Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo(bar, baz) {
    return bar + baz;
  },

  qux: foobar => foobar * 2
};

Example of incorrect code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a,
    b: "foo",
};

Examples of correct code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: "foo"
};

var bar = {
    a,
    b,
};

Example of incorrect code with the "consistent-as-needed" option, which is very similar to "consistent":

/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: b,
};

When Not To Use It

Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.

Further Reading

Object initializer - MDN Source: http://eslint.org/docs/rules/

Expected property shorthand.
Open

      error: error,

Require Object Literal Shorthand Syntax (object-shorthand)

ECMAScript 6 provides a concise form for defining object literal methods and properties. This syntax can make defining complex object literals much cleaner.

Here are a few common examples using the ES5 syntax:

// properties
var foo = {
    x: x,
    y: y,
    z: z,
};

// methods
var foo = {
    a: function() {},
    b: function() {}
};

Now here are ES6 equivalents:

/*eslint-env es6*/

// properties
var foo = {x, y, z};

// methods
var foo = {
    a() {},
    b() {}
};

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.

Each of the following properties would warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w: function() {},
    x: function *() {},
    [y]: function() {},
    z: z
};

In that case the expected syntax would have been:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w() {},
    *x() {},
    [y]() {},
    z
};

This rule does not flag arrow functions inside of object literals. The following will not warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    x: (y) => y
};

See Also:

  • no-useless-rename which disallows renaming import, export, and destructured assignments to the same name.

Options

The rule takes an option which specifies when it should be applied. It can be set to one of the following values:

  • "always" (default) expects that the shorthand will be used whenever possible.
  • "methods" ensures the method shorthand is used (also applies to generators).
  • "properties" ensures the property shorthand is used (where the key and variable name match).
  • "never" ensures that no property or method shorthand is used in any object literal.
  • "consistent" ensures that either all shorthand or all long-form will be used in an object literal.
  • "consistent-as-needed" ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.

You can set the option in configuration like this:

{
    "object-shorthand": ["error", "always"]
}

Additionally, the rule takes an optional object configuration:

  • "avoidQuotes": true indicates that long-form syntax is preferred whenever the object key is a string literal (default: false). Note that this option can only be enabled when the string option is set to "always", "methods", or "properties".
  • "ignoreConstructors": true can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to "always" or "methods".
  • "avoidExplicitReturnArrows": true indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to "always" or "methods".

avoidQuotes

{
    "object-shorthand": ["error", "always", { "avoidQuotes": true }]
}

Example of incorrect code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz"() {}
};

Example of correct code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz": function() {},
    "qux": qux
};

ignoreConstructors

{
    "object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}

Example of correct code for this rule with the "always", { "ignoreConstructors": true } option:

/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/

var foo = {
    ConstructorFunction: function() {}
};

avoidExplicitReturnArrows

{
    "object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}

Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo: (bar, baz) => {
    return bar + baz;
  },

  qux: (foobar) => {
    return foobar * 2;
  }
};

Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo(bar, baz) {
    return bar + baz;
  },

  qux: foobar => foobar * 2
};

Example of incorrect code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a,
    b: "foo",
};

Examples of correct code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: "foo"
};

var bar = {
    a,
    b,
};

Example of incorrect code with the "consistent-as-needed" option, which is very similar to "consistent":

/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: b,
};

When Not To Use It

Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.

Further Reading

Object initializer - MDN Source: http://eslint.org/docs/rules/

Unexpected function expression.
Open

  window.addEventListener('error', function(ev) {

Require using arrow functions for callbacks (prefer-arrow-callback)

Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments.

For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior.

Additionally, arrow functions are:

  • less verbose, and easier to reason about.

  • bound lexically regardless of where or when they are invoked.

Rule Details

This rule locates function expressions used as callbacks or function arguments. An error will be produced for any that could be replaced by an arrow function without changing the result.

The following examples will be flagged:

/* eslint prefer-arrow-callback: "error" */

foo(function(a) { return a; }); // ERROR
// prefer: foo(a => a)

foo(function() { return this.a; }.bind(this)); // ERROR
// prefer: foo(() => this.a)

Instances where an arrow function would not produce identical results will be ignored.

The following examples will not be flagged:

/* eslint prefer-arrow-callback: "error" */
/* eslint-env es6 */

// arrow function callback
foo(a => a); // OK

// generator as callback
foo(function*() { yield; }); // OK

// function expression not used as callback or function argument
var foo = function foo(a) { return a; }; // OK

// unbound function expression callback
foo(function() { return this.a; }); // OK

// recursive named function callback
foo(function bar(n) { return n && n + bar(n - 1); }); // OK

Options

Access further control over this rule's behavior via an options object.

Default: { allowNamedFunctions: false, allowUnboundThis: true }

allowNamedFunctions

By default { "allowNamedFunctions": false }, this boolean option prohibits using named functions as callbacks or function arguments.

Changing this value to true will reverse this option's behavior by allowing use of named functions without restriction.

{ "allowNamedFunctions": true } will not flag the following example:

/* eslint prefer-arrow-callback: [ "error", { "allowNamedFunctions": true } ] */

foo(function bar() {});

allowUnboundThis

By default { "allowUnboundThis": true }, this boolean option allows function expressions containing this to be used as callbacks, as long as the function in question has not been explicitly bound.

When set to false this option prohibits the use of function expressions as callbacks or function arguments entirely, without exception.

{ "allowUnboundThis": false } will flag the following examples:

/* eslint prefer-arrow-callback: [ "error", { "allowUnboundThis": false } ] */
/* eslint-env es6 */

foo(function() { this.a; });

foo(function() { (() => this); });

someArray.map(function(itm) { return this.doSomething(itm); }, someObject);

When Not To Use It

  • In environments that have not yet adopted ES6 language features (ES3/5).

  • In ES6+ environments that allow the use of function expressions when describing callbacks or function arguments.

Further Reading

Identifier 'debug_toast' is not in camel case.
Open

const debug_toast = function(type, data) {

Require CamelCase (camelcase)

When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName) and underscores (variable_name). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!

Rule Details

This rule looks for any underscores (_) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import statements, this rule only targets the name of the variable that will be imported into the local module scope.

Options

This rule has an object option:

  • "properties": "always" (default) enforces camelcase style for property names
  • "properties": "never" does not check property names
  • "ignoreDestructuring": false (default) enforces camelcase style for destructured identifiers
  • "ignoreDestructuring": true does not check destructured identifiers
  • allow (string[]) list of properties to accept. Accept regex.

properties: "always"

Examples of incorrect code for this rule with the default { "properties": "always" } option:

/*eslint camelcase: "error"*/

import { no_camelcased } from "external-module"

var my_favorite_color = "#112C85";

function do_something() {
    // ...
}

obj.do_something = function() {
    // ...
};

function foo({ no_camelcased }) {
    // ...
};

function foo({ isCamelcased: no_camelcased }) {
    // ...
}

function foo({ no_camelcased = 'default value' }) {
    // ...
};

var obj = {
    my_pref: 1
};

var { category_id = 1 } = query;

var { foo: no_camelcased } = bar;

var { foo: bar_baz = 1 } = quz;

Examples of correct code for this rule with the default { "properties": "always" } option:

/*eslint camelcase: "error"*/

import { no_camelcased as camelCased } from "external-module";

var myFavoriteColor   = "#112C85";
var _myFavoriteColor  = "#112C85";
var myFavoriteColor_  = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };

obj.do_something();
do_something();
new do_something();

var { category_id: category } = query;

function foo({ isCamelCased }) {
    // ...
};

function foo({ isCamelCased: isAlsoCamelCased }) {
    // ...
}

function foo({ isCamelCased = 'default value' }) {
    // ...
};

var { categoryId = 1 } = query;

var { foo: isCamelCased } = bar;

var { foo: isCamelCased = 1 } = quz;

properties: "never"

Examples of correct code for this rule with the { "properties": "never" } option:

/*eslint camelcase: ["error", {properties: "never"}]*/

var obj = {
    my_pref: 1
};

ignoreDestructuring: false

Examples of incorrect code for this rule with the default { "ignoreDestructuring": false } option:

/*eslint camelcase: "error"*/

var { category_id } = query;

var { category_id = 1 } = query;

var { category_id: category_id } = query;

var { category_id: category_alias } = query;

var { category_id: categoryId, ...other_props } = query;

ignoreDestructuring: true

Examples of incorrect code for this rule with the { "ignoreDestructuring": true } option:

/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/

var { category_id: category_alias } = query;

var { category_id, ...other_props } = query;

Examples of correct code for this rule with the { "ignoreDestructuring": true } option:

/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/

var { category_id } = query;

var { category_id = 1 } = query;

var { category_id: category_id } = query;

allow

Examples of correct code for this rule with the allow option:

/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/

function UNSAFE_componentWillMount() {
    // ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/

function UNSAFE_componentWillMount() {
    // ...
}

function UNSAFE_componentWillMount() {
    // ...
}

When Not To Use It

If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/

Expected property shorthand.
Open

      lineNo: lineNo,

Require Object Literal Shorthand Syntax (object-shorthand)

ECMAScript 6 provides a concise form for defining object literal methods and properties. This syntax can make defining complex object literals much cleaner.

Here are a few common examples using the ES5 syntax:

// properties
var foo = {
    x: x,
    y: y,
    z: z,
};

// methods
var foo = {
    a: function() {},
    b: function() {}
};

Now here are ES6 equivalents:

/*eslint-env es6*/

// properties
var foo = {x, y, z};

// methods
var foo = {
    a() {},
    b() {}
};

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.

Each of the following properties would warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w: function() {},
    x: function *() {},
    [y]: function() {},
    z: z
};

In that case the expected syntax would have been:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w() {},
    *x() {},
    [y]() {},
    z
};

This rule does not flag arrow functions inside of object literals. The following will not warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    x: (y) => y
};

See Also:

  • no-useless-rename which disallows renaming import, export, and destructured assignments to the same name.

Options

The rule takes an option which specifies when it should be applied. It can be set to one of the following values:

  • "always" (default) expects that the shorthand will be used whenever possible.
  • "methods" ensures the method shorthand is used (also applies to generators).
  • "properties" ensures the property shorthand is used (where the key and variable name match).
  • "never" ensures that no property or method shorthand is used in any object literal.
  • "consistent" ensures that either all shorthand or all long-form will be used in an object literal.
  • "consistent-as-needed" ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.

You can set the option in configuration like this:

{
    "object-shorthand": ["error", "always"]
}

Additionally, the rule takes an optional object configuration:

  • "avoidQuotes": true indicates that long-form syntax is preferred whenever the object key is a string literal (default: false). Note that this option can only be enabled when the string option is set to "always", "methods", or "properties".
  • "ignoreConstructors": true can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to "always" or "methods".
  • "avoidExplicitReturnArrows": true indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to "always" or "methods".

avoidQuotes

{
    "object-shorthand": ["error", "always", { "avoidQuotes": true }]
}

Example of incorrect code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz"() {}
};

Example of correct code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz": function() {},
    "qux": qux
};

ignoreConstructors

{
    "object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}

Example of correct code for this rule with the "always", { "ignoreConstructors": true } option:

/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/

var foo = {
    ConstructorFunction: function() {}
};

avoidExplicitReturnArrows

{
    "object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}

Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo: (bar, baz) => {
    return bar + baz;
  },

  qux: (foobar) => {
    return foobar * 2;
  }
};

Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo(bar, baz) {
    return bar + baz;
  },

  qux: foobar => foobar * 2
};

Example of incorrect code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a,
    b: "foo",
};

Examples of correct code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: "foo"
};

var bar = {
    a,
    b,
};

Example of incorrect code with the "consistent-as-needed" option, which is very similar to "consistent":

/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: b,
};

When Not To Use It

Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.

Further Reading

Object initializer - MDN Source: http://eslint.org/docs/rules/

Use the rest parameters instead of 'arguments'.
Open

      debug_toast(key, Array.from(arguments));

Suggest using the rest parameters instead of arguments (prefer-rest-params)

There are rest parameters in ES2015. We can use that feature for variadic functions instead of the arguments variable.

arguments does not have methods of Array.prototype, so it's a bit of an inconvenience.

Rule Details

This rule is aimed to flag usage of arguments variables.

Examples

Examples of incorrect code for this rule:

function foo() {
    console.log(arguments);
}

function foo(action) {
    var args = Array.prototype.slice.call(arguments, 1);
    action.apply(null, args);
}

function foo(action) {
    var args = [].slice.call(arguments, 1);
    action.apply(null, args);
}

Examples of correct code for this rule:

function foo(...args) {
    console.log(args);
}

function foo(action, ...args) {
    action.apply(null, args); // or `action(...args)`, related to the `prefer-spread` rule.
}

// Note: the implicit arguments can be overwritten.
function foo(arguments) {
    console.log(arguments); // This is the first argument.
}
function foo() {
    var arguments = 0;
    console.log(arguments); // This is a local variable.
}

When Not To Use It

This rule should not be used in ES3/5 environments.

In ES2015 (ES6) or later, if you don't want to be notified about arguments variables, then it's safe to disable this rule.

Related Rules

Expected property shorthand.
Open

      columnNo: columnNo,

Require Object Literal Shorthand Syntax (object-shorthand)

ECMAScript 6 provides a concise form for defining object literal methods and properties. This syntax can make defining complex object literals much cleaner.

Here are a few common examples using the ES5 syntax:

// properties
var foo = {
    x: x,
    y: y,
    z: z,
};

// methods
var foo = {
    a: function() {},
    b: function() {}
};

Now here are ES6 equivalents:

/*eslint-env es6*/

// properties
var foo = {x, y, z};

// methods
var foo = {
    a() {},
    b() {}
};

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.

Each of the following properties would warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w: function() {},
    x: function *() {},
    [y]: function() {},
    z: z
};

In that case the expected syntax would have been:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w() {},
    *x() {},
    [y]() {},
    z
};

This rule does not flag arrow functions inside of object literals. The following will not warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    x: (y) => y
};

See Also:

  • no-useless-rename which disallows renaming import, export, and destructured assignments to the same name.

Options

The rule takes an option which specifies when it should be applied. It can be set to one of the following values:

  • "always" (default) expects that the shorthand will be used whenever possible.
  • "methods" ensures the method shorthand is used (also applies to generators).
  • "properties" ensures the property shorthand is used (where the key and variable name match).
  • "never" ensures that no property or method shorthand is used in any object literal.
  • "consistent" ensures that either all shorthand or all long-form will be used in an object literal.
  • "consistent-as-needed" ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.

You can set the option in configuration like this:

{
    "object-shorthand": ["error", "always"]
}

Additionally, the rule takes an optional object configuration:

  • "avoidQuotes": true indicates that long-form syntax is preferred whenever the object key is a string literal (default: false). Note that this option can only be enabled when the string option is set to "always", "methods", or "properties".
  • "ignoreConstructors": true can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to "always" or "methods".
  • "avoidExplicitReturnArrows": true indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to "always" or "methods".

avoidQuotes

{
    "object-shorthand": ["error", "always", { "avoidQuotes": true }]
}

Example of incorrect code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz"() {}
};

Example of correct code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz": function() {},
    "qux": qux
};

ignoreConstructors

{
    "object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}

Example of correct code for this rule with the "always", { "ignoreConstructors": true } option:

/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/

var foo = {
    ConstructorFunction: function() {}
};

avoidExplicitReturnArrows

{
    "object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}

Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo: (bar, baz) => {
    return bar + baz;
  },

  qux: (foobar) => {
    return foobar * 2;
  }
};

Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo(bar, baz) {
    return bar + baz;
  },

  qux: foobar => foobar * 2
};

Example of incorrect code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a,
    b: "foo",
};

Examples of correct code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: "foo"
};

var bar = {
    a,
    b,
};

Example of incorrect code with the "consistent-as-needed" option, which is very similar to "consistent":

/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: b,
};

When Not To Use It

Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.

Further Reading

Object initializer - MDN Source: http://eslint.org/docs/rules/

Use the rest parameters instead of 'arguments'.
Open

      orig[key].apply(window.console, arguments);

Suggest using the rest parameters instead of arguments (prefer-rest-params)

There are rest parameters in ES2015. We can use that feature for variadic functions instead of the arguments variable.

arguments does not have methods of Array.prototype, so it's a bit of an inconvenience.

Rule Details

This rule is aimed to flag usage of arguments variables.

Examples

Examples of incorrect code for this rule:

function foo() {
    console.log(arguments);
}

function foo(action) {
    var args = Array.prototype.slice.call(arguments, 1);
    action.apply(null, args);
}

function foo(action) {
    var args = [].slice.call(arguments, 1);
    action.apply(null, args);
}

Examples of correct code for this rule:

function foo(...args) {
    console.log(args);
}

function foo(action, ...args) {
    action.apply(null, args); // or `action(...args)`, related to the `prefer-spread` rule.
}

// Note: the implicit arguments can be overwritten.
function foo(arguments) {
    console.log(arguments); // This is the first argument.
}
function foo() {
    var arguments = 0;
    console.log(arguments); // This is a local variable.
}

When Not To Use It

This rule should not be used in ES3/5 environments.

In ES2015 (ES6) or later, if you don't want to be notified about arguments variables, then it's safe to disable this rule.

Related Rules

There are no issues that match your filters.

Category
Status