Unexpected parentheses around single function argument having a body with no curly braces. Open
{items.map((item) => (
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
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
- The
"as-needed", { "requireForBlockBody": true }
rule is directly inspired by the Airbnb JS Style Guide. Source: http://eslint.org/docs/rules/
Expected a line break before this closing brace. Open
export const ToastWrapper = ({ items, clear, remove, disable }) => {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
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 theconsistent
option is set totrue
-
"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 theminProperties
option. (SeeminProperties
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/
Expected a line break after this opening brace. Open
export const ToastWrapper = ({ items, clear, remove, disable }) => {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
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 theconsistent
option is set totrue
-
"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 theminProperties
option. (SeeminProperties
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
const handler = (fn) => (ev) => {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
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
- The
"as-needed", { "requireForBlockBody": true }
rule is directly inspired by the Airbnb JS Style Guide. Source: http://eslint.org/docs/rules/
Unexpected space after unary operator '!'. Open
if (! items.length) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require or disallow spaces before/after unary operators (space-unary-ops)
Some style guides require or disallow spaces before or after unary operators. This is mainly a stylistic issue, however, some JavaScript expressions can be written without spacing which makes it harder to read and maintain.
Rule Details
This rule enforces consistency regarding the spaces after words
unary operators and after/before nonwords
unary operators.
Examples of unary words
operators:
// new
var joe = new Person();
// delete
var obj = {
foo: 'bar'
};
delete obj.foo;
// typeof
typeof {} // object
// void
void 0 // undefined
Examples of unary nonwords
operators:
if ([1,2,3].indexOf(1) !== -1) {};
foo = --foo;
bar = bar++;
baz = !foo;
qux = !!baz;
Options
This rule has three options:
-
words
- applies to unary word operators such as:new
,delete
,typeof
,void
,yield
-
nonwords
- applies to unary operators such as:-
,+
,--
,++
,!
,!!
-
overrides
- specifies overwriting usage of spacing for each operator, word or non word. This is empty by default, but can be used to enforce or disallow spacing around operators. For example:
"space-unary-ops": [
2, {
"words": true,
"nonwords": false,
"overrides": {
"new": false,
"++": true
}
}]
In this case, spacing will be disallowed after a new
operator and required before/after a ++
operator.
Examples of incorrect code for this rule with the default {"words": true, "nonwords": false}
option:
/*eslint space-unary-ops: "error"*/
typeof!foo;
void{foo:0};
new[foo][0];
delete(foo.bar);
++ foo;
foo --;
- foo;
+ "3";
/*eslint space-unary-ops: "error"*/
/*eslint-env es6*/
function *foo() {
yield(0)
}
/*eslint space-unary-ops: "error"*/
async function foo() {
await(bar);
}
Examples of correct code for this rule with the {"words": true, "nonwords": false}
option:
/*eslint space-unary-ops: "error"*/
// Word unary operator "delete" is followed by a whitespace.
delete foo.bar;
// Word unary operator "new" is followed by a whitespace.
new Foo;
// Word unary operator "void" is followed by a whitespace.
void 0;
// Unary operator "++" is not followed by whitespace.
++foo;
// Unary operator "--" is not preceded by whitespace.
foo--;
// Unary operator "-" is not followed by whitespace.
-foo;
// Unary operator "+" is not followed by whitespace.
+"3";
/*eslint space-unary-ops: "error"*/
/*eslint-env es6*/
function *foo() {
yield (0)
}
/*eslint space-unary-ops: "error"*/
async function foo() {
await (bar);
}
Source: http://eslint.org/docs/rules/
'items.map' is missing in props validation Open
{items.map((item) => (
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
'clear' is missing in props validation Open
export const ToastWrapper = ({ items, clear, remove, disable }) => {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
'disable' is missing in props validation Open
export const ToastWrapper = ({ items, clear, remove, disable }) => {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
'items' is missing in props validation Open
export const ToastWrapper = ({ items, clear, remove, disable }) => {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Visible, non-interactive elements with click handlers must have at least one keyboard listener. Open
<div className="toast-pf alert col-xs-12" onClick={handler(clear)}>
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Anchor used as a button. Anchors are primarily expected to navigate. Use the button element instead. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md Open
<a href="" onClick={handler(clear)}>
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
'remove' is missing in props validation Open
export const ToastWrapper = ({ items, clear, remove, disable }) => {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Empty components are self-closing Open
<span className="pficon pficon-close"></span>
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Anchor used as a button. Anchors are primarily expected to navigate. Use the button element instead. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md Open
<a href="" onClick={handler(disable)}>
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
'items.length' is missing in props validation Open
if (! items.length) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/
Static HTML elements with event handlers require a role. Open
<div className="toast-pf alert col-xs-12" onClick={handler(clear)}>
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
For more information visit Source: http://eslint.org/docs/rules/