Showing 2,141 of 2,141 total issues
Unexpected dangling '_' in '_keyword'. Open
var _keyword;
- Read upRead up
- Exclude checks
disallow dangling underscores in identifiers (no-underscore-dangle)
As far as naming conventions for identifiers go, dangling underscores may be the most polarizing in JavaScript. Dangling underscores are underscores at either the beginning or end of an identifier, such as:
var _foo;
There is actually a long history of using dangling underscores to indicate "private" members of objects in JavaScript (though JavaScript doesn't have truly private members, this convention served as a warning). This began with SpiderMonkey adding nonstandard methods such as __defineGetter__()
. The intent with the underscores was to make it obvious that this method was special in some way. Since that time, using a single underscore prefix has become popular as a way to indicate "private" members of objects.
Whether or not you choose to allow dangling underscores in identifiers is purely a convention and has no effect on performance, readability, or complexity. It's purely a preference.
Rule Details
This rule disallows dangling underscores in identifiers.
Examples of incorrect code for this rule:
/*eslint no-underscore-dangle: "error"*/
var foo_;
var __proto__ = {};
foo._bar();
Examples of correct code for this rule:
/*eslint no-underscore-dangle: "error"*/
var _ = require('underscore');
var obj = _.contains(items, item);
obj.__proto__ = {};
var file = __filename;
Options
This rule has an object option:
-
"allow"
allows specified identifiers to have dangling underscores -
"allowAfterThis": false
(default) disallows dangling underscores in members of thethis
object -
"allowAfterSuper": false
(default) disallows dangling underscores in members of thesuper
object
allow
Examples of additional correct code for this rule with the { "allow": ["foo_", "_bar"] }
option:
/*eslint no-underscore-dangle: ["error", { "allow": ["foo_", "_bar"] }]*/
var foo_;
foo._bar();
allowAfterThis
Examples of correct code for this rule with the { "allowAfterThis": true }
option:
/*eslint no-underscore-dangle: ["error", { "allowAfterThis": true }]*/
var a = this.foo_;
this._bar();
allowAfterSuper
Examples of correct code for this rule with the { "allowAfterSuper": true }
option:
/*eslint no-underscore-dangle: ["error", { "allowAfterSuper": true }]*/
var a = super.foo_;
super._bar();
When Not To Use It
If you want to allow dangling underscores in identifiers, then you can safely turn this rule off. Source: http://eslint.org/docs/rules/
Unexpected dangling '_' in '_agency'. Open
var _agency;
- Read upRead up
- Exclude checks
disallow dangling underscores in identifiers (no-underscore-dangle)
As far as naming conventions for identifiers go, dangling underscores may be the most polarizing in JavaScript. Dangling underscores are underscores at either the beginning or end of an identifier, such as:
var _foo;
There is actually a long history of using dangling underscores to indicate "private" members of objects in JavaScript (though JavaScript doesn't have truly private members, this convention served as a warning). This began with SpiderMonkey adding nonstandard methods such as __defineGetter__()
. The intent with the underscores was to make it obvious that this method was special in some way. Since that time, using a single underscore prefix has become popular as a way to indicate "private" members of objects.
Whether or not you choose to allow dangling underscores in identifiers is purely a convention and has no effect on performance, readability, or complexity. It's purely a preference.
Rule Details
This rule disallows dangling underscores in identifiers.
Examples of incorrect code for this rule:
/*eslint no-underscore-dangle: "error"*/
var foo_;
var __proto__ = {};
foo._bar();
Examples of correct code for this rule:
/*eslint no-underscore-dangle: "error"*/
var _ = require('underscore');
var obj = _.contains(items, item);
obj.__proto__ = {};
var file = __filename;
Options
This rule has an object option:
-
"allow"
allows specified identifiers to have dangling underscores -
"allowAfterThis": false
(default) disallows dangling underscores in members of thethis
object -
"allowAfterSuper": false
(default) disallows dangling underscores in members of thesuper
object
allow
Examples of additional correct code for this rule with the { "allow": ["foo_", "_bar"] }
option:
/*eslint no-underscore-dangle: ["error", { "allow": ["foo_", "_bar"] }]*/
var foo_;
foo._bar();
allowAfterThis
Examples of correct code for this rule with the { "allowAfterThis": true }
option:
/*eslint no-underscore-dangle: ["error", { "allowAfterThis": true }]*/
var a = this.foo_;
this._bar();
allowAfterSuper
Examples of correct code for this rule with the { "allowAfterSuper": true }
option:
/*eslint no-underscore-dangle: ["error", { "allowAfterSuper": true }]*/
var a = super.foo_;
super._bar();
When Not To Use It
If you want to allow dangling underscores in identifiers, then you can safely turn this rule off. Source: http://eslint.org/docs/rules/
Unexpected string concatenation. Open
var _container = document.querySelector('#' + id + ' .clearable');
- Read upRead up
- Exclude checks
Suggest using template literals instead of string concatenation. (prefer-template)
In ES2015 (ES6), we can use template literals instead of string concatenation.
var str = "Hello, " + name + "!";
/*eslint-env es6*/
var str = `Hello, ${name}!`;
Rule Details
This rule is aimed to flag usage of +
operators with strings.
Examples
Examples of incorrect code for this rule:
/*eslint prefer-template: "error"*/
var str = "Hello, " + name + "!";
var str = "Time: " + (12 * 60 * 60 * 1000);
Examples of correct code for this rule:
/*eslint prefer-template: "error"*/
/*eslint-env es6*/
var str = "Hello World!";
var str = `Hello, ${name}!`;
var str = `Time: ${12 * 60 * 60 * 1000}`;
// This is reported by `no-useless-concat`.
var str = "Hello, " + "World!";
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 string concatenation, you can safely disable this rule.
Related Rules
- [no-useless-concat](no-useless-concat.md)
- [quotes](quotes.md) Source: http://eslint.org/docs/rules/
Expected { after 'if' condition. Open
if (_input.value === '')
- Read upRead up
- Exclude checks
Require Following Curly Brace Conventions (curly)
JavaScript allows the omission of curly braces when a block contains only one statement. However, it is considered by many to be best practice to never omit curly braces around blocks, even when they are optional, because it can lead to bugs and reduces code clarity. So the following:
if (foo) foo++;
Can be rewritten as:
if (foo) {
foo++;
}
There are, however, some who prefer to only use braces when there is more than one statement to be executed.
Rule Details
This rule is aimed at preventing bugs and increasing code clarity by ensuring that block statements are wrapped in curly braces. It will warn when it encounters blocks that omit curly braces.
Options
all
Examples of incorrect code for the default "all"
option:
/*eslint curly: "error"*/
if (foo) foo++;
while (bar)
baz();
if (foo) {
baz();
} else qux();
Examples of correct code for the default "all"
option:
/*eslint curly: "error"*/
if (foo) {
foo++;
}
while (bar) {
baz();
}
if (foo) {
baz();
} else {
qux();
}
multi
By default, this rule warns whenever if
, else
, for
, while
, or do
are used without block statements as their body. However, you can specify that block statements should be used only when there are multiple statements in the block and warn when there is only one statement in the block.
Examples of incorrect code for the "multi"
option:
/*eslint curly: ["error", "multi"]*/
if (foo) {
foo++;
}
if (foo) bar();
else {
foo++;
}
while (true) {
doSomething();
}
for (var i=0; i < items.length; i++) {
doSomething();
}
Examples of correct code for the "multi"
option:
/*eslint curly: ["error", "multi"]*/
if (foo) foo++;
else foo();
while (true) {
doSomething();
doSomethingElse();
}
multi-line
Alternatively, you can relax the rule to allow brace-less single-line if
, else if
, else
, for
, while
, or do
, while still enforcing the use of curly braces for other instances.
Examples of incorrect code for the "multi-line"
option:
/*eslint curly: ["error", "multi-line"]*/
if (foo)
doSomething();
else
doSomethingElse();
if (foo) foo(
bar,
baz);
Examples of correct code for the "multi-line"
option:
/*eslint curly: ["error", "multi-line"]*/
if (foo) foo++; else doSomething();
if (foo) foo++;
else if (bar) baz()
else doSomething();
do something();
while (foo);
while (foo
&& bar) baz();
if (foo) {
foo++;
}
if (foo) { foo++; }
while (true) {
doSomething();
doSomethingElse();
}
multi-or-nest
You can use another configuration that forces brace-less if
, else if
, else
, for
, while
, or do
if their body contains only one single-line statement. And forces braces in all other cases.
Examples of incorrect code for the "multi-or-nest"
option:
/*eslint curly: ["error", "multi-or-nest"]*/
if (!foo)
foo = {
bar: baz,
qux: foo
};
while (true)
if(foo)
doSomething();
else
doSomethingElse();
if (foo) {
foo++;
}
while (true) {
doSomething();
}
for (var i = 0; foo; i++) {
doSomething();
}
if (foo)
// some comment
bar();
Examples of correct code for the "multi-or-nest"
option:
/*eslint curly: ["error", "multi-or-nest"]*/
if (!foo) {
foo = {
bar: baz,
qux: foo
};
}
while (true) {
if(foo)
doSomething();
else
doSomethingElse();
}
if (foo)
foo++;
while (true)
doSomething();
for (var i = 0; foo; i++)
doSomething();
if (foo) {
// some comment
bar();
}
consistent
When using any of the multi*
options, you can add an option to enforce all bodies of a if
,
else if
and else
chain to be with or without braces.
Examples of incorrect code for the "multi", "consistent"
options:
/*eslint curly: ["error", "multi", "consistent"]*/
if (foo) {
bar();
baz();
} else
buz();
if (foo)
bar();
else if (faa)
bor();
else {
other();
things();
}
if (true)
foo();
else {
baz();
}
if (foo) {
foo++;
}
Examples of correct code for the "multi", "consistent"
options:
/*eslint curly: ["error", "multi", "consistent"]*/
if (foo) {
bar();
baz();
} else {
buz();
}
if (foo) {
bar();
} else if (faa) {
bor();
} else {
other();
things();
}
if (true)
foo();
else
baz();
if (foo)
foo++;
When Not To Use It
If you have no strict conventions about when to use block statements and when not to, you can safely disable this rule. Source: http://eslint.org/docs/rules/
A space is required after '{'. Open
_instance.dispatchEvent(_events.CHANGE, {target:_instance});
- Read upRead up
- Exclude checks
enforce consistent spacing inside braces (object-curly-spacing)
While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces in the following situations:
// simple object literals
var obj = { foo: "bar" };
// nested object literals
var obj = { foo: { zoo: "bar" } };
// destructuring assignment (EcmaScript 6)
var { x, y } = y;
// import/export declarations (EcmaScript 6)
import { foo } from "bar";
export { foo };
Rule Details
This rule enforce consistent spacing inside braces of object literals, destructuring assignments, and import/export specifiers.
Options
This rule has two options, a string option and an object option.
String option:
-
"never"
(default) disallows spacing inside of braces -
"always"
requires spacing inside of braces (except{}
)
Object option:
-
"arraysInObjects": true
requires spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set tonever
) -
"arraysInObjects": false
disallows spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set toalways
) -
"objectsInObjects": true
requires spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set tonever
) -
"objectsInObjects": false
disallows spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set toalways
)
never
Examples of incorrect code for this rule with the default "never"
option:
/*eslint object-curly-spacing: ["error", "never"]*/
var obj = { 'foo': 'bar' };
var obj = {'foo': 'bar' };
var obj = { baz: {'foo': 'qux'}, bar};
var obj = {baz: { 'foo': 'qux'}, bar};
var {x } = y;
import { foo } from 'bar';
Examples of correct code for this rule with the default "never"
option:
/*eslint object-curly-spacing: ["error", "never"]*/
var obj = {'foo': 'bar'};
var obj = {'foo': {'bar': 'baz'}, 'qux': 'quxx'};
var obj = {
'foo': 'bar'
};
var obj = {'foo': 'bar'
};
var obj = {
'foo':'bar'};
var obj = {};
var {x} = y;
import {foo} from 'bar';
always
Examples of incorrect code for this rule with the "always"
option:
/*eslint object-curly-spacing: ["error", "always"]*/
var obj = {'foo': 'bar'};
var obj = {'foo': 'bar' };
var obj = { baz: {'foo': 'qux'}, bar};
var obj = {baz: { 'foo': 'qux' }, bar};
var obj = {'foo': 'bar'
};
var obj = {
'foo':'bar'};
var {x} = y;
import {foo } from 'bar';
Examples of correct code for this rule with the "always"
option:
/*eslint object-curly-spacing: ["error", "always"]*/
var obj = {};
var obj = { 'foo': 'bar' };
var obj = { 'foo': { 'bar': 'baz' }, 'qux': 'quxx' };
var obj = {
'foo': 'bar'
};
var { x } = y;
import { foo } from 'bar';
arraysInObjects
Examples of additional correct code for this rule with the "never", { "arraysInObjects": true }
options:
/*eslint object-curly-spacing: ["error", "never", { "arraysInObjects": true }]*/
var obj = {"foo": [ 1, 2 ] };
var obj = {"foo": [ "baz", "bar" ] };
Examples of additional correct code for this rule with the "always", { "arraysInObjects": false }
options:
/*eslint object-curly-spacing: ["error", "always", { "arraysInObjects": false }]*/
var obj = { "foo": [ 1, 2 ]};
var obj = { "foo": [ "baz", "bar" ]};
objectsInObjects
Examples of additional correct code for this rule with the "never", { "objectsInObjects": true }
options:
/*eslint object-curly-spacing: ["error", "never", { "objectsInObjects": true }]*/
var obj = {"foo": {"baz": 1, "bar": 2} };
Examples of additional correct code for this rule with the "always", { "objectsInObjects": false }
options:
/*eslint object-curly-spacing: ["error", "always", { "objectsInObjects": false }]*/
var obj = { "foo": { "baz": 1, "bar": 2 }};
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between curly braces.
Related Rules
- [comma-spacing](comma-spacing.md)
- [space-in-parens](space-in-parens.md) Source: http://eslint.org/docs/rules/
Missing space before value for key 'target'. Open
_instance.dispatchEvent(_events.CHANGE, {target:_instance});
- Read upRead up
- Exclude checks
enforce consistent spacing between keys and values in object literal properties (key-spacing)
This rule enforces spacing around the colon in object literal properties. It can verify each property individually, or it can ensure horizontal alignment of adjacent properties in an object literal.
Rule Details
This rule enforces consistent spacing between keys and values in object literal properties. In the case of long lines, it is acceptable to add a new line wherever whitespace is allowed.
Options
This rule has an object option:
-
"beforeColon": false
(default) disallows spaces between the key and the colon in object literals. -
"beforeColon": true
requires at least one space between the key and the colon in object literals. -
"afterColon": true
(default) requires at least one space between the colon and the value in object literals. -
"afterColon": false
disallows spaces between the colon and the value in object literals. -
"mode": "strict"
(default) enforces exactly one space before or after colons in object literals. -
"mode": "minimum"
enforces one or more spaces before or after colons in object literals. -
"align": "value"
enforces horizontal alignment of values in object literals. -
"align": "colon"
enforces horizontal alignment of both colons and values in object literals. -
"align"
with an object value allows for fine-grained spacing when values are being aligned in object literals. -
"singleLine"
specifies a spacing style for single-line object literals. -
"multiLine"
specifies a spacing style for multi-line object literals.
Please note that you can either use the top-level options or the grouped options (singleLine
and multiLine
) but not both.
beforeColon
Examples of incorrect code for this rule with the default { "beforeColon": false }
option:
/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo" : 42 };
Examples of correct code for this rule with the default { "beforeColon": false }
option:
/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo": 42 };
Examples of incorrect code for this rule with the { "beforeColon": true }
option:
/*eslint key-spacing: ["error", { "beforeColon": true }]*/
var obj = { "foo": 42 };
Examples of correct code for this rule with the { "beforeColon": true }
option:
/*eslint key-spacing: ["error", { "beforeColon": true }]*/
var obj = { "foo" : 42 };
afterColon
Examples of incorrect code for this rule with the default { "afterColon": true }
option:
/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo":42 };
Examples of correct code for this rule with the default { "afterColon": true }
option:
/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo": 42 };
Examples of incorrect code for this rule with the { "afterColon": false }
option:
/*eslint key-spacing: ["error", { "afterColon": false }]*/
var obj = { "foo": 42 };
Examples of correct code for this rule with the { "afterColon": false }
option:
/*eslint key-spacing: ["error", { "afterColon": false }]*/
var obj = { "foo":42 };
mode
Examples of incorrect code for this rule with the default { "mode": "strict" }
option:
/*eslint key-spacing: ["error", { "mode": "strict" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the default { "mode": "strict" }
option:
/*eslint key-spacing: ["error", { "mode": "strict" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the { "mode": "minimum" }
option:
/*eslint key-spacing: ["error", { "mode": "minimum" }]*/
call({
foobar: 42,
bat: 2 * 2
});
align
Examples of incorrect code for this rule with the { "align": "value" }
option:
/*eslint key-spacing: ["error", { "align": "value" }]*/
var obj = {
a: value,
bcde: 42,
fg : foo()
};
Examples of correct code for this rule with the { "align": "value" }
option:
/*eslint key-spacing: ["error", { "align": "value" }]*/
var obj = {
a: value,
bcde: 42,
fg: foo(),
h: function() {
return this.a;
},
ijkl: 'Non-consecutive lines form a new group'
};
var obj = { a: "foo", longPropertyName: "bar" };
Examples of incorrect code for this rule with the { "align": "colon" }
option:
/*eslint key-spacing: ["error", { "align": "colon" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the { "align": "colon" }
option:
/*eslint key-spacing: ["error", { "align": "colon" }]*/
call({
foobar: 42,
bat : 2 * 2
});
align
The align
option can take additional configuration through the beforeColon
, afterColon
, mode
, and on
options.
If align
is defined as an object, but not all of the parameters are provided, undefined parameters will default to the following:
// Defaults
align: {
"beforeColon": false,
"afterColon": true,
"on": "colon",
"mode": "strict"
}
Examples of correct code for this rule with sample { "align": { } }
options:
/*eslint key-spacing: ["error", {
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"one" : 1,
"seven" : 7
}
/*eslint key-spacing: ["error", {
"align": {
"beforeColon": false,
"afterColon": false,
"on": "value"
}
}]*/
var obj = {
"one": 1,
"seven":7
}
align and multiLine
The multiLine
and align
options can differ, which allows for fine-tuned control over the key-spacing
of your files. align
will not inherit from multiLine
if align
is configured as an object.
multiLine
is used any time an object literal spans multiple lines. The align
configuration is used when there is a group of properties in the same object. For example:
var myObj = {
key1: 1, // uses multiLine
key2: 2, // uses align (when defined)
key3: 3, // uses align (when defined)
key4: 4 // uses multiLine
}
Examples of incorrect code for this rule with sample { "align": { }, "multiLine": { } }
options:
/*eslint key-spacing: ["error", {
"multiLine": {
"beforeColon": false,
"afterColon":true
},
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"myObjectFunction": function() {
// Do something
},
"one" : 1,
"seven" : 7
}
Examples of correct code for this rule with sample { "align": { }, "multiLine": { } }
options:
/*eslint key-spacing: ["error", {
"multiLine": {
"beforeColon": false,
"afterColon": true
},
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"myObjectFunction": function() {
// Do something
//
}, // These are two separate groups, so no alignment between `myObjectFuction` and `one`
"one" : 1,
"seven" : 7 // `one` and `seven` are in their own group, and therefore aligned
}
singleLine and multiLine
Examples of correct code for this rule with sample { "singleLine": { }, "multiLine": { } }
options:
/*eslint "key-spacing": [2, {
"singleLine": {
"beforeColon": false,
"afterColon": true
},
"multiLine": {
"beforeColon": true,
"afterColon": true,
"align": "colon"
}
}]*/
var obj = { one: 1, "two": 2, three: 3 };
var obj2 = {
"two" : 2,
three : 3
};
When Not To Use It
If you have another convention for property spacing that might not be consistent with the available options, or if you want to permit multiple styles concurrently you can safely disable this rule. Source: http://eslint.org/docs/rules/
Expected { after 'if' condition. Open
if (_input.value === '')
- Read upRead up
- Exclude checks
Require Following Curly Brace Conventions (curly)
JavaScript allows the omission of curly braces when a block contains only one statement. However, it is considered by many to be best practice to never omit curly braces around blocks, even when they are optional, because it can lead to bugs and reduces code clarity. So the following:
if (foo) foo++;
Can be rewritten as:
if (foo) {
foo++;
}
There are, however, some who prefer to only use braces when there is more than one statement to be executed.
Rule Details
This rule is aimed at preventing bugs and increasing code clarity by ensuring that block statements are wrapped in curly braces. It will warn when it encounters blocks that omit curly braces.
Options
all
Examples of incorrect code for the default "all"
option:
/*eslint curly: "error"*/
if (foo) foo++;
while (bar)
baz();
if (foo) {
baz();
} else qux();
Examples of correct code for the default "all"
option:
/*eslint curly: "error"*/
if (foo) {
foo++;
}
while (bar) {
baz();
}
if (foo) {
baz();
} else {
qux();
}
multi
By default, this rule warns whenever if
, else
, for
, while
, or do
are used without block statements as their body. However, you can specify that block statements should be used only when there are multiple statements in the block and warn when there is only one statement in the block.
Examples of incorrect code for the "multi"
option:
/*eslint curly: ["error", "multi"]*/
if (foo) {
foo++;
}
if (foo) bar();
else {
foo++;
}
while (true) {
doSomething();
}
for (var i=0; i < items.length; i++) {
doSomething();
}
Examples of correct code for the "multi"
option:
/*eslint curly: ["error", "multi"]*/
if (foo) foo++;
else foo();
while (true) {
doSomething();
doSomethingElse();
}
multi-line
Alternatively, you can relax the rule to allow brace-less single-line if
, else if
, else
, for
, while
, or do
, while still enforcing the use of curly braces for other instances.
Examples of incorrect code for the "multi-line"
option:
/*eslint curly: ["error", "multi-line"]*/
if (foo)
doSomething();
else
doSomethingElse();
if (foo) foo(
bar,
baz);
Examples of correct code for the "multi-line"
option:
/*eslint curly: ["error", "multi-line"]*/
if (foo) foo++; else doSomething();
if (foo) foo++;
else if (bar) baz()
else doSomething();
do something();
while (foo);
while (foo
&& bar) baz();
if (foo) {
foo++;
}
if (foo) { foo++; }
while (true) {
doSomething();
doSomethingElse();
}
multi-or-nest
You can use another configuration that forces brace-less if
, else if
, else
, for
, while
, or do
if their body contains only one single-line statement. And forces braces in all other cases.
Examples of incorrect code for the "multi-or-nest"
option:
/*eslint curly: ["error", "multi-or-nest"]*/
if (!foo)
foo = {
bar: baz,
qux: foo
};
while (true)
if(foo)
doSomething();
else
doSomethingElse();
if (foo) {
foo++;
}
while (true) {
doSomething();
}
for (var i = 0; foo; i++) {
doSomething();
}
if (foo)
// some comment
bar();
Examples of correct code for the "multi-or-nest"
option:
/*eslint curly: ["error", "multi-or-nest"]*/
if (!foo) {
foo = {
bar: baz,
qux: foo
};
}
while (true) {
if(foo)
doSomething();
else
doSomethingElse();
}
if (foo)
foo++;
while (true)
doSomething();
for (var i = 0; foo; i++)
doSomething();
if (foo) {
// some comment
bar();
}
consistent
When using any of the multi*
options, you can add an option to enforce all bodies of a if
,
else if
and else
chain to be with or without braces.
Examples of incorrect code for the "multi", "consistent"
options:
/*eslint curly: ["error", "multi", "consistent"]*/
if (foo) {
bar();
baz();
} else
buz();
if (foo)
bar();
else if (faa)
bor();
else {
other();
things();
}
if (true)
foo();
else {
baz();
}
if (foo) {
foo++;
}
Examples of correct code for the "multi", "consistent"
options:
/*eslint curly: ["error", "multi", "consistent"]*/
if (foo) {
bar();
baz();
} else {
buz();
}
if (foo) {
bar();
} else if (faa) {
bor();
} else {
other();
things();
}
if (true)
foo();
else
baz();
if (foo)
foo++;
When Not To Use It
If you have no strict conventions about when to use block statements and when not to, you can safely disable this rule. Source: http://eslint.org/docs/rules/
Unexpected string concatenation. Open
var message = 'A clearable Text Input with id "' +
- Read upRead up
- Exclude checks
Suggest using template literals instead of string concatenation. (prefer-template)
In ES2015 (ES6), we can use template literals instead of string concatenation.
var str = "Hello, " + name + "!";
/*eslint-env es6*/
var str = `Hello, ${name}!`;
Rule Details
This rule is aimed to flag usage of +
operators with strings.
Examples
Examples of incorrect code for this rule:
/*eslint prefer-template: "error"*/
var str = "Hello, " + name + "!";
var str = "Time: " + (12 * 60 * 60 * 1000);
Examples of correct code for this rule:
/*eslint prefer-template: "error"*/
/*eslint-env es6*/
var str = "Hello World!";
var str = `Hello, ${name}!`;
var str = `Time: ${12 * 60 * 60 * 1000}`;
// This is reported by `no-useless-concat`.
var str = "Hello, " + "World!";
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 string concatenation, you can safely disable this rule.
Related Rules
- [no-useless-concat](no-useless-concat.md)
- [quotes](quotes.md) Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var _header;
- Read upRead up
- Exclude checks
require let
or const
instead of var
(no-var)
ECMAScript 6 allows programmers to create variables with block scope instead of function scope using the let
and const
keywords. Block scope is common in many other programming languages and helps programmers avoid mistakes
such as:
var count = people.length;
var enoughFood = count > sandwiches.length;
if (enoughFood) {
var count = sandwiches.length; // accidentally overriding the count variable
console.log("We have " + count + " sandwiches for everyone. Plenty for all!");
}
// our count variable is no longer accurate
console.log("We have " + count + " people and " + sandwiches.length + " sandwiches!");
Rule Details
This rule is aimed at discouraging the use of var
and encouraging the use of const
or let
instead.
Examples
Examples of incorrect code for this rule:
/*eslint no-var: "error"*/
var x = "y";
var CONFIG = {};
Examples of correct code for this rule:
/*eslint no-var: "error"*/
/*eslint-env es6*/
let x = "y";
const CONFIG = {};
When Not To Use It
In addition to non-ES6 environments, existing JavaScript projects that are beginning to introduce ES6 into their
codebase may not want to apply this rule if the cost of migrating from var
to let
is too costly.
Source: http://eslint.org/docs/rules/
Expected { after 'if' condition. Open
if (_floatingContent[c].classList)
- Read upRead up
- Exclude checks
Require Following Curly Brace Conventions (curly)
JavaScript allows the omission of curly braces when a block contains only one statement. However, it is considered by many to be best practice to never omit curly braces around blocks, even when they are optional, because it can lead to bugs and reduces code clarity. So the following:
if (foo) foo++;
Can be rewritten as:
if (foo) {
foo++;
}
There are, however, some who prefer to only use braces when there is more than one statement to be executed.
Rule Details
This rule is aimed at preventing bugs and increasing code clarity by ensuring that block statements are wrapped in curly braces. It will warn when it encounters blocks that omit curly braces.
Options
all
Examples of incorrect code for the default "all"
option:
/*eslint curly: "error"*/
if (foo) foo++;
while (bar)
baz();
if (foo) {
baz();
} else qux();
Examples of correct code for the default "all"
option:
/*eslint curly: "error"*/
if (foo) {
foo++;
}
while (bar) {
baz();
}
if (foo) {
baz();
} else {
qux();
}
multi
By default, this rule warns whenever if
, else
, for
, while
, or do
are used without block statements as their body. However, you can specify that block statements should be used only when there are multiple statements in the block and warn when there is only one statement in the block.
Examples of incorrect code for the "multi"
option:
/*eslint curly: ["error", "multi"]*/
if (foo) {
foo++;
}
if (foo) bar();
else {
foo++;
}
while (true) {
doSomething();
}
for (var i=0; i < items.length; i++) {
doSomething();
}
Examples of correct code for the "multi"
option:
/*eslint curly: ["error", "multi"]*/
if (foo) foo++;
else foo();
while (true) {
doSomething();
doSomethingElse();
}
multi-line
Alternatively, you can relax the rule to allow brace-less single-line if
, else if
, else
, for
, while
, or do
, while still enforcing the use of curly braces for other instances.
Examples of incorrect code for the "multi-line"
option:
/*eslint curly: ["error", "multi-line"]*/
if (foo)
doSomething();
else
doSomethingElse();
if (foo) foo(
bar,
baz);
Examples of correct code for the "multi-line"
option:
/*eslint curly: ["error", "multi-line"]*/
if (foo) foo++; else doSomething();
if (foo) foo++;
else if (bar) baz()
else doSomething();
do something();
while (foo);
while (foo
&& bar) baz();
if (foo) {
foo++;
}
if (foo) { foo++; }
while (true) {
doSomething();
doSomethingElse();
}
multi-or-nest
You can use another configuration that forces brace-less if
, else if
, else
, for
, while
, or do
if their body contains only one single-line statement. And forces braces in all other cases.
Examples of incorrect code for the "multi-or-nest"
option:
/*eslint curly: ["error", "multi-or-nest"]*/
if (!foo)
foo = {
bar: baz,
qux: foo
};
while (true)
if(foo)
doSomething();
else
doSomethingElse();
if (foo) {
foo++;
}
while (true) {
doSomething();
}
for (var i = 0; foo; i++) {
doSomething();
}
if (foo)
// some comment
bar();
Examples of correct code for the "multi-or-nest"
option:
/*eslint curly: ["error", "multi-or-nest"]*/
if (!foo) {
foo = {
bar: baz,
qux: foo
};
}
while (true) {
if(foo)
doSomething();
else
doSomethingElse();
}
if (foo)
foo++;
while (true)
doSomething();
for (var i = 0; foo; i++)
doSomething();
if (foo) {
// some comment
bar();
}
consistent
When using any of the multi*
options, you can add an option to enforce all bodies of a if
,
else if
and else
chain to be with or without braces.
Examples of incorrect code for the "multi", "consistent"
options:
/*eslint curly: ["error", "multi", "consistent"]*/
if (foo) {
bar();
baz();
} else
buz();
if (foo)
bar();
else if (faa)
bor();
else {
other();
things();
}
if (true)
foo();
else {
baz();
}
if (foo) {
foo++;
}
Examples of correct code for the "multi", "consistent"
options:
/*eslint curly: ["error", "multi", "consistent"]*/
if (foo) {
bar();
baz();
} else {
buz();
}
if (foo) {
bar();
} else if (faa) {
bor();
} else {
other();
things();
}
if (true)
foo();
else
baz();
if (foo)
foo++;
When Not To Use It
If you have no strict conventions about when to use block statements and when not to, you can safely disable this rule. Source: http://eslint.org/docs/rules/
Block must not be padded by blank lines. Open
function BitMask() {
- Read upRead up
- Exclude checks
require or disallow padding within blocks (padded-blocks)
Some style guides require block statements to start and end with blank lines. The goal is to improve readability by visually separating the block content and the surrounding code.
if (a) {
b();
}
Since it's good to have a consistent code style, you should either always write padded blocks or never do it.
Rule Details
This rule enforces consistent empty line padding within blocks.
Options
This rule has one option, which can be a string option or an object option.
String option:
-
"always"
(default) requires empty lines at the beginning and ending of block statements (exceptswitch
statements and classes) -
"never"
disallows empty lines at the beginning and ending of block statements (exceptswitch
statements and classes)
Object option:
-
"blocks"
require or disallow padding within block statements -
"classes"
require or disallow padding within classes -
"switches"
require or disallow padding withinswitch
statements
always
Examples of incorrect code for this rule with the default "always"
option:
/*eslint padded-blocks: ["error", "always"]*/
if (a) {
b();
}
if (a) { b(); }
if (a)
{
b();
}
if (a) {
b();
}
if (a) {
b();
}
if (a) {
// comment
b();
}
Examples of correct code for this rule with the default "always"
option:
/*eslint padded-blocks: ["error", "always"]*/
if (a) {
b();
}
if (a)
{
b();
}
if (a) {
// comment
b();
}
never
Examples of incorrect code for this rule with the "never"
option:
/*eslint padded-blocks: ["error", "never"]*/
if (a) {
b();
}
if (a)
{
b();
}
if (a) {
b();
}
if (a) {
b();
}
Examples of correct code for this rule with the "never"
option:
/*eslint padded-blocks: ["error", "never"]*/
if (a) {
b();
}
if (a)
{
b();
}
blocks
Examples of incorrect code for this rule with the { "blocks": "always" }
option:
/*eslint padded-blocks: ["error", { "blocks": "always" }]*/
if (a) {
b();
}
if (a) { b(); }
if (a)
{
b();
}
if (a) {
b();
}
if (a) {
b();
}
if (a) {
// comment
b();
}
Examples of correct code for this rule with the { "blocks": "always" }
option:
/*eslint padded-blocks: ["error", { "blocks": "always" }]*/
if (a) {
b();
}
if (a)
{
b();
}
if (a) {
// comment
b();
}
Examples of incorrect code for this rule with the { "blocks": "never" }
option:
/*eslint padded-blocks: ["error", { "blocks": "never" }]*/
if (a) {
b();
}
if (a)
{
b();
}
if (a) {
b();
}
if (a) {
b();
}
Examples of correct code for this rule with the { "blocks": "never" }
option:
/*eslint padded-blocks: ["error", { "blocks": "never" }]*/
if (a) {
b();
}
if (a)
{
b();
}
classes
Examples of incorrect code for this rule with the { "classes": "always" }
option:
/*eslint padded-blocks: ["error", { "classes": "always" }]*/
class A {
constructor(){
}
}
Examples of correct code for this rule with the { "classes": "always" }
option:
/*eslint padded-blocks: ["error", { "classes": "always" }]*/
class A {
constructor(){
}
}
Examples of incorrect code for this rule with the { "classes": "never" }
option:
/*eslint padded-blocks: ["error", { "classes": "never" }]*/
class A {
constructor(){
}
}
Examples of correct code for this rule with the { "classes": "never" }
option:
/*eslint padded-blocks: ["error", { "classes": "never" }]*/
class A {
constructor(){
}
}
switches
Examples of incorrect code for this rule with the { "switches": "always" }
option:
/*eslint padded-blocks: ["error", { "switches": "always" }]*/
switch (a) {
case 0: foo();
}
Examples of correct code for this rule with the { "switches": "always" }
option:
/*eslint padded-blocks: ["error", { "switches": "always" }]*/
switch (a) {
case 0: foo();
}
if (a) {
b();
}
Examples of incorrect code for this rule with the { "switches": "never" }
option:
/*eslint padded-blocks: ["error", { "switches": "never" }]*/
switch (a) {
case 0: foo();
}
Examples of correct code for this rule with the { "switches": "never" }
option:
/*eslint padded-blocks: ["error", { "switches": "never" }]*/
switch (a) {
case 0: foo();
}
if (a) {
b();
}
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of padding within blocks. Source: http://eslint.org/docs/rules/
Missing space before value for key 'turnOn'. Open
turnOn:turnOn,
- Read upRead up
- Exclude checks
enforce consistent spacing between keys and values in object literal properties (key-spacing)
This rule enforces spacing around the colon in object literal properties. It can verify each property individually, or it can ensure horizontal alignment of adjacent properties in an object literal.
Rule Details
This rule enforces consistent spacing between keys and values in object literal properties. In the case of long lines, it is acceptable to add a new line wherever whitespace is allowed.
Options
This rule has an object option:
-
"beforeColon": false
(default) disallows spaces between the key and the colon in object literals. -
"beforeColon": true
requires at least one space between the key and the colon in object literals. -
"afterColon": true
(default) requires at least one space between the colon and the value in object literals. -
"afterColon": false
disallows spaces between the colon and the value in object literals. -
"mode": "strict"
(default) enforces exactly one space before or after colons in object literals. -
"mode": "minimum"
enforces one or more spaces before or after colons in object literals. -
"align": "value"
enforces horizontal alignment of values in object literals. -
"align": "colon"
enforces horizontal alignment of both colons and values in object literals. -
"align"
with an object value allows for fine-grained spacing when values are being aligned in object literals. -
"singleLine"
specifies a spacing style for single-line object literals. -
"multiLine"
specifies a spacing style for multi-line object literals.
Please note that you can either use the top-level options or the grouped options (singleLine
and multiLine
) but not both.
beforeColon
Examples of incorrect code for this rule with the default { "beforeColon": false }
option:
/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo" : 42 };
Examples of correct code for this rule with the default { "beforeColon": false }
option:
/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo": 42 };
Examples of incorrect code for this rule with the { "beforeColon": true }
option:
/*eslint key-spacing: ["error", { "beforeColon": true }]*/
var obj = { "foo": 42 };
Examples of correct code for this rule with the { "beforeColon": true }
option:
/*eslint key-spacing: ["error", { "beforeColon": true }]*/
var obj = { "foo" : 42 };
afterColon
Examples of incorrect code for this rule with the default { "afterColon": true }
option:
/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo":42 };
Examples of correct code for this rule with the default { "afterColon": true }
option:
/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo": 42 };
Examples of incorrect code for this rule with the { "afterColon": false }
option:
/*eslint key-spacing: ["error", { "afterColon": false }]*/
var obj = { "foo": 42 };
Examples of correct code for this rule with the { "afterColon": false }
option:
/*eslint key-spacing: ["error", { "afterColon": false }]*/
var obj = { "foo":42 };
mode
Examples of incorrect code for this rule with the default { "mode": "strict" }
option:
/*eslint key-spacing: ["error", { "mode": "strict" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the default { "mode": "strict" }
option:
/*eslint key-spacing: ["error", { "mode": "strict" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the { "mode": "minimum" }
option:
/*eslint key-spacing: ["error", { "mode": "minimum" }]*/
call({
foobar: 42,
bat: 2 * 2
});
align
Examples of incorrect code for this rule with the { "align": "value" }
option:
/*eslint key-spacing: ["error", { "align": "value" }]*/
var obj = {
a: value,
bcde: 42,
fg : foo()
};
Examples of correct code for this rule with the { "align": "value" }
option:
/*eslint key-spacing: ["error", { "align": "value" }]*/
var obj = {
a: value,
bcde: 42,
fg: foo(),
h: function() {
return this.a;
},
ijkl: 'Non-consecutive lines form a new group'
};
var obj = { a: "foo", longPropertyName: "bar" };
Examples of incorrect code for this rule with the { "align": "colon" }
option:
/*eslint key-spacing: ["error", { "align": "colon" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the { "align": "colon" }
option:
/*eslint key-spacing: ["error", { "align": "colon" }]*/
call({
foobar: 42,
bat : 2 * 2
});
align
The align
option can take additional configuration through the beforeColon
, afterColon
, mode
, and on
options.
If align
is defined as an object, but not all of the parameters are provided, undefined parameters will default to the following:
// Defaults
align: {
"beforeColon": false,
"afterColon": true,
"on": "colon",
"mode": "strict"
}
Examples of correct code for this rule with sample { "align": { } }
options:
/*eslint key-spacing: ["error", {
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"one" : 1,
"seven" : 7
}
/*eslint key-spacing: ["error", {
"align": {
"beforeColon": false,
"afterColon": false,
"on": "value"
}
}]*/
var obj = {
"one": 1,
"seven":7
}
align and multiLine
The multiLine
and align
options can differ, which allows for fine-tuned control over the key-spacing
of your files. align
will not inherit from multiLine
if align
is configured as an object.
multiLine
is used any time an object literal spans multiple lines. The align
configuration is used when there is a group of properties in the same object. For example:
var myObj = {
key1: 1, // uses multiLine
key2: 2, // uses align (when defined)
key3: 3, // uses align (when defined)
key4: 4 // uses multiLine
}
Examples of incorrect code for this rule with sample { "align": { }, "multiLine": { } }
options:
/*eslint key-spacing: ["error", {
"multiLine": {
"beforeColon": false,
"afterColon":true
},
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"myObjectFunction": function() {
// Do something
},
"one" : 1,
"seven" : 7
}
Examples of correct code for this rule with sample { "align": { }, "multiLine": { } }
options:
/*eslint key-spacing: ["error", {
"multiLine": {
"beforeColon": false,
"afterColon": true
},
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"myObjectFunction": function() {
// Do something
//
}, // These are two separate groups, so no alignment between `myObjectFuction` and `one`
"one" : 1,
"seven" : 7 // `one` and `seven` are in their own group, and therefore aligned
}
singleLine and multiLine
Examples of correct code for this rule with sample { "singleLine": { }, "multiLine": { } }
options:
/*eslint "key-spacing": [2, {
"singleLine": {
"beforeColon": false,
"afterColon": true
},
"multiLine": {
"beforeColon": true,
"afterColon": true,
"align": "colon"
}
}]*/
var obj = { one: 1, "two": 2, three: 3 };
var obj2 = {
"two" : 2,
three : 3
};
When Not To Use It
If you have another convention for property spacing that might not be consistent with the available options, or if you want to permit multiple styles concurrently you can safely disable this rule. Source: http://eslint.org/docs/rules/
Missing space before value for key 'create'. Open
create:create
- Read upRead up
- Exclude checks
enforce consistent spacing between keys and values in object literal properties (key-spacing)
This rule enforces spacing around the colon in object literal properties. It can verify each property individually, or it can ensure horizontal alignment of adjacent properties in an object literal.
Rule Details
This rule enforces consistent spacing between keys and values in object literal properties. In the case of long lines, it is acceptable to add a new line wherever whitespace is allowed.
Options
This rule has an object option:
-
"beforeColon": false
(default) disallows spaces between the key and the colon in object literals. -
"beforeColon": true
requires at least one space between the key and the colon in object literals. -
"afterColon": true
(default) requires at least one space between the colon and the value in object literals. -
"afterColon": false
disallows spaces between the colon and the value in object literals. -
"mode": "strict"
(default) enforces exactly one space before or after colons in object literals. -
"mode": "minimum"
enforces one or more spaces before or after colons in object literals. -
"align": "value"
enforces horizontal alignment of values in object literals. -
"align": "colon"
enforces horizontal alignment of both colons and values in object literals. -
"align"
with an object value allows for fine-grained spacing when values are being aligned in object literals. -
"singleLine"
specifies a spacing style for single-line object literals. -
"multiLine"
specifies a spacing style for multi-line object literals.
Please note that you can either use the top-level options or the grouped options (singleLine
and multiLine
) but not both.
beforeColon
Examples of incorrect code for this rule with the default { "beforeColon": false }
option:
/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo" : 42 };
Examples of correct code for this rule with the default { "beforeColon": false }
option:
/*eslint key-spacing: ["error", { "beforeColon": false }]*/
var obj = { "foo": 42 };
Examples of incorrect code for this rule with the { "beforeColon": true }
option:
/*eslint key-spacing: ["error", { "beforeColon": true }]*/
var obj = { "foo": 42 };
Examples of correct code for this rule with the { "beforeColon": true }
option:
/*eslint key-spacing: ["error", { "beforeColon": true }]*/
var obj = { "foo" : 42 };
afterColon
Examples of incorrect code for this rule with the default { "afterColon": true }
option:
/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo":42 };
Examples of correct code for this rule with the default { "afterColon": true }
option:
/*eslint key-spacing: ["error", { "afterColon": true }]*/
var obj = { "foo": 42 };
Examples of incorrect code for this rule with the { "afterColon": false }
option:
/*eslint key-spacing: ["error", { "afterColon": false }]*/
var obj = { "foo": 42 };
Examples of correct code for this rule with the { "afterColon": false }
option:
/*eslint key-spacing: ["error", { "afterColon": false }]*/
var obj = { "foo":42 };
mode
Examples of incorrect code for this rule with the default { "mode": "strict" }
option:
/*eslint key-spacing: ["error", { "mode": "strict" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the default { "mode": "strict" }
option:
/*eslint key-spacing: ["error", { "mode": "strict" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the { "mode": "minimum" }
option:
/*eslint key-spacing: ["error", { "mode": "minimum" }]*/
call({
foobar: 42,
bat: 2 * 2
});
align
Examples of incorrect code for this rule with the { "align": "value" }
option:
/*eslint key-spacing: ["error", { "align": "value" }]*/
var obj = {
a: value,
bcde: 42,
fg : foo()
};
Examples of correct code for this rule with the { "align": "value" }
option:
/*eslint key-spacing: ["error", { "align": "value" }]*/
var obj = {
a: value,
bcde: 42,
fg: foo(),
h: function() {
return this.a;
},
ijkl: 'Non-consecutive lines form a new group'
};
var obj = { a: "foo", longPropertyName: "bar" };
Examples of incorrect code for this rule with the { "align": "colon" }
option:
/*eslint key-spacing: ["error", { "align": "colon" }]*/
call({
foobar: 42,
bat: 2 * 2
});
Examples of correct code for this rule with the { "align": "colon" }
option:
/*eslint key-spacing: ["error", { "align": "colon" }]*/
call({
foobar: 42,
bat : 2 * 2
});
align
The align
option can take additional configuration through the beforeColon
, afterColon
, mode
, and on
options.
If align
is defined as an object, but not all of the parameters are provided, undefined parameters will default to the following:
// Defaults
align: {
"beforeColon": false,
"afterColon": true,
"on": "colon",
"mode": "strict"
}
Examples of correct code for this rule with sample { "align": { } }
options:
/*eslint key-spacing: ["error", {
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"one" : 1,
"seven" : 7
}
/*eslint key-spacing: ["error", {
"align": {
"beforeColon": false,
"afterColon": false,
"on": "value"
}
}]*/
var obj = {
"one": 1,
"seven":7
}
align and multiLine
The multiLine
and align
options can differ, which allows for fine-tuned control over the key-spacing
of your files. align
will not inherit from multiLine
if align
is configured as an object.
multiLine
is used any time an object literal spans multiple lines. The align
configuration is used when there is a group of properties in the same object. For example:
var myObj = {
key1: 1, // uses multiLine
key2: 2, // uses align (when defined)
key3: 3, // uses align (when defined)
key4: 4 // uses multiLine
}
Examples of incorrect code for this rule with sample { "align": { }, "multiLine": { } }
options:
/*eslint key-spacing: ["error", {
"multiLine": {
"beforeColon": false,
"afterColon":true
},
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"myObjectFunction": function() {
// Do something
},
"one" : 1,
"seven" : 7
}
Examples of correct code for this rule with sample { "align": { }, "multiLine": { } }
options:
/*eslint key-spacing: ["error", {
"multiLine": {
"beforeColon": false,
"afterColon": true
},
"align": {
"beforeColon": true,
"afterColon": true,
"on": "colon"
}
}]*/
var obj = {
"myObjectFunction": function() {
// Do something
//
}, // These are two separate groups, so no alignment between `myObjectFuction` and `one`
"one" : 1,
"seven" : 7 // `one` and `seven` are in their own group, and therefore aligned
}
singleLine and multiLine
Examples of correct code for this rule with sample { "singleLine": { }, "multiLine": { } }
options:
/*eslint "key-spacing": [2, {
"singleLine": {
"beforeColon": false,
"afterColon": true
},
"multiLine": {
"beforeColon": true,
"afterColon": true,
"align": "colon"
}
}]*/
var obj = { one: 1, "two": 2, three: 3 };
var obj2 = {
"two" : 2,
three : 3
};
When Not To Use It
If you have another convention for property spacing that might not be consistent with the available options, or if you want to permit multiple styles concurrently you can safely disable this rule. Source: http://eslint.org/docs/rules/
Do not access Object.prototype method 'hasOwnProperty' from target object. Open
if (!_events.hasOwnProperty(evt))
- Read upRead up
- Exclude checks
Disallow use of Object.prototypes builtins directly (no-prototype-builtins)
In ECMAScript 5.1, Object.create
was added, which enables the creation of objects with a specified [[Prototype]]
. Object.create(null)
is a common pattern used to create objects that will be used as a Map. This can lead to errors when it is assumed that objects will have properties from Object.prototype
. This rule prevents calling Object.prototype
methods directly from an object.
Rule Details
This rule disallows calling some Object.prototype
methods directly on object instances.
Examples of incorrect code for this rule:
/*eslint no-prototype-builtins: "error"*/
var hasBarProperty = foo.hasOwnProperty("bar");
var isPrototypeOfBar = foo.isPrototypeOf(bar);
var barIsEnumerable = foo.propertyIsEnumerable("bar");
Examples of correct code for this rule:
/*eslint no-prototype-builtins: "error"*/
var hasBarProperty = Object.prototype.hasOwnProperty.call(foo, "bar");
var isPrototypeOfBar = Object.prototype.isPrototypeOf.call(foo, bar);
var barIsEnumerable = {}.propertyIsEnumerable.call(foo, "bar");
When Not To Use It
You may want to turn this rule off if you will never use an object that shadows an Object.prototype
method or which does not inherit from Object.prototype
.
Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
for (var e = 0; e < len; e++) {
- Read upRead up
- Exclude checks
require let
or const
instead of var
(no-var)
ECMAScript 6 allows programmers to create variables with block scope instead of function scope using the let
and const
keywords. Block scope is common in many other programming languages and helps programmers avoid mistakes
such as:
var count = people.length;
var enoughFood = count > sandwiches.length;
if (enoughFood) {
var count = sandwiches.length; // accidentally overriding the count variable
console.log("We have " + count + " sandwiches for everyone. Plenty for all!");
}
// our count variable is no longer accurate
console.log("We have " + count + " people and " + sandwiches.length + " sandwiches!");
Rule Details
This rule is aimed at discouraging the use of var
and encouraging the use of const
or let
instead.
Examples
Examples of incorrect code for this rule:
/*eslint no-var: "error"*/
var x = "y";
var CONFIG = {};
Examples of correct code for this rule:
/*eslint no-var: "error"*/
/*eslint-env es6*/
let x = "y";
const CONFIG = {};
When Not To Use It
In addition to non-ES6 environments, existing JavaScript projects that are beginning to introduce ES6 into their
codebase may not want to apply this rule if the cost of migrating from var
to let
is too costly.
Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var geoOptions = {
- Read upRead up
- Exclude checks
Require Variable Declarations to be at the top of their scope (vars-on-top)
The vars-on-top
rule generates warnings when variable declarations are not used serially at the top of a function scope or the top of a program.
By default variable declarations are always moved (“hoisted”) invisibly to the top of their containing scope by the JavaScript interpreter.
This rule forces the programmer to represent that behaviour by manually moving the variable declaration to the top of its containing scope.
Rule Details
This rule aims to keep all variable declarations in the leading series of statements. Allowing multiple declarations helps promote maintainability and is thus allowed.
Examples of incorrect code for this rule:
/*eslint vars-on-top: "error"*/
// Variable declarations in a block:
function doSomething() {
var first;
if (true) {
first = true;
}
var second;
}
// Variable declaration in for initializer:
function doSomething() {
for (var i=0; i<10; i++) {}
}
/*eslint vars-on-top: "error"*/
// Variables after other statements:
f();
var a;
Examples of correct code for this rule:
/*eslint vars-on-top: "error"*/
function doSomething() {
var first;
var second; //multiple declarations are allowed at the top
if (true) {
first = true;
}
}
function doSomething() {
var i;
for (i=0; i<10; i++) {}
}
/*eslint vars-on-top: "error"*/
var a;
f();
/*eslint vars-on-top: "error"*/
// Directives may precede variable declarations.
"use strict";
var a;
f();
// Comments can describe variables.
function doSomething() {
// this is the first var.
var first;
// this is the second var.
var second
}
Further Reading
Unexpected dangling '_' in '_error'. Open
function _error(error) {
- Read upRead up
- Exclude checks
disallow dangling underscores in identifiers (no-underscore-dangle)
As far as naming conventions for identifiers go, dangling underscores may be the most polarizing in JavaScript. Dangling underscores are underscores at either the beginning or end of an identifier, such as:
var _foo;
There is actually a long history of using dangling underscores to indicate "private" members of objects in JavaScript (though JavaScript doesn't have truly private members, this convention served as a warning). This began with SpiderMonkey adding nonstandard methods such as __defineGetter__()
. The intent with the underscores was to make it obvious that this method was special in some way. Since that time, using a single underscore prefix has become popular as a way to indicate "private" members of objects.
Whether or not you choose to allow dangling underscores in identifiers is purely a convention and has no effect on performance, readability, or complexity. It's purely a preference.
Rule Details
This rule disallows dangling underscores in identifiers.
Examples of incorrect code for this rule:
/*eslint no-underscore-dangle: "error"*/
var foo_;
var __proto__ = {};
foo._bar();
Examples of correct code for this rule:
/*eslint no-underscore-dangle: "error"*/
var _ = require('underscore');
var obj = _.contains(items, item);
obj.__proto__ = {};
var file = __filename;
Options
This rule has an object option:
-
"allow"
allows specified identifiers to have dangling underscores -
"allowAfterThis": false
(default) disallows dangling underscores in members of thethis
object -
"allowAfterSuper": false
(default) disallows dangling underscores in members of thesuper
object
allow
Examples of additional correct code for this rule with the { "allow": ["foo_", "_bar"] }
option:
/*eslint no-underscore-dangle: ["error", { "allow": ["foo_", "_bar"] }]*/
var foo_;
foo._bar();
allowAfterThis
Examples of correct code for this rule with the { "allowAfterThis": true }
option:
/*eslint no-underscore-dangle: ["error", { "allowAfterThis": true }]*/
var a = this.foo_;
this._bar();
allowAfterSuper
Examples of correct code for this rule with the { "allowAfterSuper": true }
option:
/*eslint no-underscore-dangle: ["error", { "allowAfterSuper": true }]*/
var a = super.foo_;
super._bar();
When Not To Use It
If you want to allow dangling underscores in identifiers, then you can safely turn this rule off. Source: http://eslint.org/docs/rules/
Expected indentation of 2 spaces but found 14. Open
PIN_INFOBOX: 16,
- Read upRead up
- Exclude checks
enforce consistent indentation (indent)
There are several common guidelines which require specific indentation of nested blocks and statements, like:
function hello(indentSize, type) {
if (indentSize === 4 && type !== 'tab') {
console.log('Each next indentation will increase on 4 spaces');
}
}
These are the most common scenarios recommended in different style guides:
- Two spaces, not longer and no tabs: Google, npm, Node.js, Idiomatic, Felix
- Tabs: jQuery
- Four spaces: Crockford
Rule Details
This rule enforces a consistent indentation style. The default style is 4 spaces
.
Options
This rule has a mixed option:
For example, for 2-space indentation:
{
"indent": ["error", 2]
}
Or for tabbed indentation:
{
"indent": ["error", "tab"]
}
Examples of incorrect code for this rule with the default options:
/*eslint indent: "error"*/
if (a) {
b=c;
function foo(d) {
e=f;
}
}
Examples of correct code for this rule with the default options:
/*eslint indent: "error"*/
if (a) {
b=c;
function foo(d) {
e=f;
}
}
This rule has an object option:
-
"SwitchCase"
(default: 0) enforces indentation level forcase
clauses inswitch
statements -
"VariableDeclarator"
(default: 1) enforces indentation level forvar
declarators; can also take an object to define separate rules forvar
,let
andconst
declarations. -
"outerIIFEBody"
(default: 1) enforces indentation level for file-level IIFEs. -
"MemberExpression"
(off by default) enforces indentation level for multi-line property chains (except in variable declarations and assignments) -
"FunctionDeclaration"
takes an object to define rules for function declarations.-
parameters
(off by default) enforces indentation level for parameters in a function declaration. This can either be a number indicating indentation level, or the string"first"
indicating that all parameters of the declaration must be aligned with the first parameter. -
body
(default: 1) enforces indentation level for the body of a function declaration.
-
-
"FunctionExpression"
takes an object to define rules for function expressions.-
parameters
(off by default) enforces indentation level for parameters in a function expression. This can either be a number indicating indentation level, or the string"first"
indicating that all parameters of the expression must be aligned with the first parameter. -
body
(default: 1) enforces indentation level for the body of a function expression.
-
-
"CallExpression"
takes an object to define rules for function call expressions.-
arguments
(off by default) enforces indentation level for arguments in a call expression. This can either be a number indicating indentation level, or the string"first"
indicating that all arguments of the expression must be aligned with the first argument.
-
-
"ArrayExpression"
(default: 1) enforces indentation level for elements in arrays. It can also be set to the string"first"
, indicating that all the elements in the array should be aligned with the first element. -
"ObjectExpression"
(default: 1) enforces indentation level for properties in objects. It can be set to the string"first"
, indicating that all properties in the object should be aligned with the first property.
Level of indentation denotes the multiple of the indent specified. Example:
- Indent of 4 spaces with
VariableDeclarator
set to2
will indent the multi-line variable declarations with 8 spaces. - Indent of 2 spaces with
VariableDeclarator
set to2
will indent the multi-line variable declarations with 4 spaces. - Indent of 2 spaces with
VariableDeclarator
set to{"var": 2, "let": 2, "const": 3}
will indent the multi-line variable declarations with 4 spaces forvar
andlet
, 6 spaces forconst
statements. - Indent of tab with
VariableDeclarator
set to2
will indent the multi-line variable declarations with 2 tabs. - Indent of 2 spaces with
SwitchCase
set to0
will not indentcase
clauses with respect toswitch
statements. - Indent of 2 spaces with
SwitchCase
set to1
will indentcase
clauses with 2 spaces with respect toswitch
statements. - Indent of 2 spaces with
SwitchCase
set to2
will indentcase
clauses with 4 spaces with respect toswitch
statements. - Indent of tab with
SwitchCase
set to2
will indentcase
clauses with 2 tabs with respect toswitch
statements. - Indent of 2 spaces with
MemberExpression
set to0
will indent the multi-line property chains with 0 spaces. - Indent of 2 spaces with
MemberExpression
set to1
will indent the multi-line property chains with 2 spaces. - Indent of 2 spaces with
MemberExpression
set to2
will indent the multi-line property chains with 4 spaces. - Indent of 4 spaces with
MemberExpression
set to0
will indent the multi-line property chains with 0 spaces. - Indent of 4 spaces with
MemberExpression
set to1
will indent the multi-line property chains with 4 spaces. - Indent of 4 spaces with
MemberExpression
set to2
will indent the multi-line property chains with 8 spaces.
tab
Examples of incorrect code for this rule with the "tab"
option:
/*eslint indent: ["error", "tab"]*/
if (a) {
b=c;
function foo(d) {
e=f;
}
}
Examples of correct code for this rule with the "tab"
option:
/*eslint indent: ["error", "tab"]*/
if (a) {
/*tab*/b=c;
/*tab*/function foo(d) {
/*tab*//*tab*/e=f;
/*tab*/}
}
SwitchCase
Examples of incorrect code for this rule with the 2, { "SwitchCase": 1 }
options:
/*eslint indent: ["error", 2, { "SwitchCase": 1 }]*/
switch(a){
case "a":
break;
case "b":
break;
}
Examples of correct code for this rule with the 2, { "SwitchCase": 1 }
option:
/*eslint indent: ["error", 2, { "SwitchCase": 1 }]*/
switch(a){
case "a":
break;
case "b":
break;
}
VariableDeclarator
Examples of incorrect code for this rule with the 2, { "VariableDeclarator": 1 }
options:
/*eslint indent: ["error", 2, { "VariableDeclarator": 1 }]*/
/*eslint-env es6*/
var a,
b,
c;
let a,
b,
c;
const a = 1,
b = 2,
c = 3;
Examples of correct code for this rule with the 2, { "VariableDeclarator": 1 }
options:
/*eslint indent: ["error", 2, { "VariableDeclarator": 1 }]*/
/*eslint-env es6*/
var a,
b,
c;
let a,
b,
c;
const a = 1,
b = 2,
c = 3;
Examples of correct code for this rule with the 2, { "VariableDeclarator": 2 }
options:
/*eslint indent: ["error", 2, { "VariableDeclarator": 2 }]*/
/*eslint-env es6*/
var a,
b,
c;
let a,
b,
c;
const a = 1,
b = 2,
c = 3;
Examples of correct code for this rule with the 2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }
options:
/*eslint indent: ["error", 2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }]*/
/*eslint-env es6*/
var a,
b,
c;
let a,
b,
c;
const a = 1,
b = 2,
c = 3;
outerIIFEBody
Examples of incorrect code for this rule with the options 2, { "outerIIFEBody": 0 }
:
/*eslint indent: ["error", 2, { "outerIIFEBody": 0 }]*/
(function() {
function foo(x) {
return x + 1;
}
})();
if(y) {
console.log('foo');
}
Examples of correct code for this rule with the options 2, {"outerIIFEBody": 0}
:
/*eslint indent: ["error", 2, { "outerIIFEBody": 0 }]*/
(function() {
function foo(x) {
return x + 1;
}
})();
if(y) {
console.log('foo');
}
MemberExpression
Examples of incorrect code for this rule with the 2, { "MemberExpression": 1 }
options:
/*eslint indent: ["error", 2, { "MemberExpression": 1 }]*/
foo
.bar
.baz()
Examples of correct code for this rule with the 2, { "MemberExpression": 1 }
option:
/*eslint indent: ["error", 2, { "MemberExpression": 1 }]*/
foo
.bar
.baz();
// Any indentation is permitted in variable declarations and assignments.
var bip = aardvark.badger
.coyote;
FunctionDeclaration
Examples of incorrect code for this rule with the 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }
option:
/*eslint indent: ["error", 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }]*/
function foo(bar,
baz,
qux) {
qux();
}
Examples of correct code for this rule with the 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }
option:
/*eslint indent: ["error", 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }]*/
function foo(bar,
baz,
qux) {
qux();
}
Examples of incorrect code for this rule with the 2, { "FunctionDeclaration": {"parameters": "first"} }
option:
/*eslint indent: ["error", 2, {"FunctionDeclaration": {"parameters": "first"}}]*/
function foo(bar, baz,
qux, boop) {
qux();
}
Examples of correct code for this rule with the 2, { "FunctionDeclaration": {"parameters": "first"} }
option:
/*eslint indent: ["error", 2, {"FunctionDeclaration": {"parameters": "first"}}]*/
function foo(bar, baz,
qux, boop) {
qux();
}
FunctionExpression
Examples of incorrect code for this rule with the 2, { "FunctionExpression": {"body": 1, "parameters": 2} }
option:
/*eslint indent: ["error", 2, { "FunctionExpression": {"body": 1, "parameters": 2} }]*/
var foo = function(bar,
baz,
qux) {
qux();
}
Examples of correct code for this rule with the 2, { "FunctionExpression": {"body": 1, "parameters": 2} }
option:
/*eslint indent: ["error", 2, { "FunctionExpression": {"body": 1, "parameters": 2} }]*/
var foo = function(bar,
baz,
qux) {
qux();
}
Examples of incorrect code for this rule with the 2, { "FunctionExpression": {"parameters": "first"} }
option:
/*eslint indent: ["error", 2, {"FunctionExpression": {"parameters": "first"}}]*/
var foo = function(bar, baz,
qux, boop) {
qux();
}
Examples of correct code for this rule with the 2, { "FunctionExpression": {"parameters": "first"} }
option:
/*eslint indent: ["error", 2, {"FunctionExpression": {"parameters": "first"}}]*/
var foo = function(bar, baz,
qux, boop) {
qux();
}
CallExpression
Examples of incorrect code for this rule with the 2, { "CallExpression": {"arguments": 1} }
option:
/*eslint indent: ["error", 2, { "CallExpression": {"arguments": 1} }]*/
foo(bar,
baz,
qux
);
Examples of correct code for this rule with the 2, { "CallExpression": {"arguments": 1} }
option:
/*eslint indent: ["error", 2, { "CallExpression": {"arguments": 1} }]*/
foo(bar,
baz,
qux
);
Examples of incorrect code for this rule with the 2, { "CallExpression": {"arguments": "first"} }
option:
/*eslint indent: ["error", 2, {"CallExpression": {"arguments": "first"}}]*/
foo(bar, baz,
baz, boop, beep);
Examples of correct code for this rule with the 2, { "CallExpression": {"arguments": "first"} }
option:
/*eslint indent: ["error", 2, {"CallExpression": {"arguments": "first"}}]*/
foo(bar, baz,
baz, boop, beep);
ArrayExpression
Examples of incorrect code for this rule with the 2, { "ArrayExpression": 1 }
option:
/*eslint indent: ["error", 2, { "ArrayExpression": 1 }]*/
var foo = [
bar,
baz,
qux
];
Examples of correct code for this rule with the 2, { "ArrayExpression": 1 }
option:
/*eslint indent: ["error", 2, { "ArrayExpression": 1 }]*/
var foo = [
bar,
baz,
qux
];
Examples of incorrect code for this rule with the 2, { "ArrayExpression": "first" }
option:
/*eslint indent: ["error", 2, {"ArrayExpression": "first"}]*/
var foo = [bar,
baz,
qux
];
Examples of correct code for this rule with the 2, { "ArrayExpression": "first" }
option:
/*eslint indent: ["error", 2, {"ArrayExpression": "first"}]*/
var foo = [bar,
baz,
qux
];
ObjectExpression
Examples of incorrect code for this rule with the 2, { "ObjectExpression": 1 }
option:
/*eslint indent: ["error", 2, { "ObjectExpression": 1 }]*/
var foo = {
bar: 1,
baz: 2,
qux: 3
};
Examples of correct code for this rule with the 2, { "ObjectExpression": 1 }
option:
/*eslint indent: ["error", 2, { "ObjectExpression": 1 }]*/
var foo = {
bar: 1,
baz: 2,
qux: 3
};
Examples of incorrect code for this rule with the 2, { "ObjectExpression": "first" }
option:
/*eslint indent: ["error", 2, {"ObjectExpression": "first"}]*/
var foo = { bar: 1,
baz: 2 };
Examples of correct code for this rule with the 2, { "ObjectExpression": "first" }
option:
/*eslint indent: ["error", 2, {"ObjectExpression": "first"}]*/
var foo = { bar: 1,
baz: 2 };
Compatibility
-
JSHint:
indent
- JSCS: validateIndentation Source: http://eslint.org/docs/rules/
'updateInfoBoxState' was used before it was defined. Open
updateInfoBoxState();
- Read upRead up
- Exclude checks
Disallow Early Use (no-use-before-define)
In JavaScript, prior to ES6, variable and function declarations are hoisted to the top of a scope, so it's possible to use identifiers before their formal declarations in code. This can be confusing and some believe it is best to always declare variables and functions before using them.
In ES6, block-level bindings (let
and const
) introduce a "temporal dead zone" where a ReferenceError
will be thrown with any attempt to access the variable before its declaration.
Rule Details
This rule will warn when it encounters a reference to an identifier that has not yet been declared.
Examples of incorrect code for this rule:
/*eslint no-use-before-define: "error"*/
/*eslint-env es6*/
alert(a);
var a = 10;
f();
function f() {}
function g() {
return b;
}
var b = 1;
// With blockBindings: true
{
alert(c);
let c = 1;
}
Examples of correct code for this rule:
/*eslint no-use-before-define: "error"*/
/*eslint-env es6*/
var a;
a = 10;
alert(a);
function f() {}
f(1);
var b = 1;
function g() {
return b;
}
// With blockBindings: true
{
let C;
c++;
}
Options
{
"no-use-before-define": ["error", { "functions": true, "classes": true }]
}
-
functions
(boolean
) - The flag which shows whether or not this rule checks function declarations. If this istrue
, this rule warns every reference to a function before the function declaration. Otherwise, ignores those references. Function declarations are hoisted, so it's safe. Default istrue
. -
classes
(boolean
) - The flag which shows whether or not this rule checks class declarations of upper scopes. If this istrue
, this rule warns every reference to a class before the class declaration. Otherwise, ignores those references if the declaration is in upper function scopes. Class declarations are not hoisted, so it might be danger. Default istrue
. -
variables
(boolean
) - This flag determines whether or not the rule checks variable declarations in upper scopes. If this istrue
, the rule warns every reference to a variable before the variable declaration. Otherwise, the rule ignores a reference if the declaration is in an upper scope, while still reporting the reference if it's in the same scope as the declaration. Default istrue
.
This rule accepts "nofunc"
string as an option.
"nofunc"
is the same as { "functions": false, "classes": true }
.
functions
Examples of correct code for the { "functions": false }
option:
/*eslint no-use-before-define: ["error", { "functions": false }]*/
f();
function f() {}
classes
Examples of incorrect code for the { "classes": false }
option:
/*eslint no-use-before-define: ["error", { "classes": false }]*/
/*eslint-env es6*/
new A();
class A {
}
Examples of correct code for the { "classes": false }
option:
/*eslint no-use-before-define: ["error", { "classes": false }]*/
/*eslint-env es6*/
function foo() {
return new A();
}
class A {
}
variables
Examples of incorrect code for the { "variables": false }
option:
/*eslint no-use-before-define: ["error", { "variables": false }]*/
console.log(foo);
var foo = 1;
Examples of correct code for the { "variables": false }
option:
/*eslint no-use-before-define: ["error", { "variables": false }]*/
function baz() {
console.log(foo);
}
var foo = 1;
Source: http://eslint.org/docs/rules/
Expected property shorthand. Open
setContent:setContent,
- Read upRead up
- Exclude checks
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
};
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 longform will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all longform 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 longform 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/