Function elapsed_time_human
has 28 lines of code (exceeds 25 allowed). Consider refactoring. Open
elapsed_time_human: function(val, _options) {
val = ~~val;
var names = [__('Day'), __('Hour'), __('Minute'), __('Second')];
- Create a ticketCreate a ticket
Function number_with_delimiter
has 27 lines of code (exceeds 25 allowed). Consider refactoring. Open
function number_with_delimiter(val, options) {
options = _.extend({ delimiter: ',', separator: '.' }, options || {});
var intpart;
var floatpart;
var minus;
- Create a ticketCreate a ticket
Function datetime_range
has 26 lines of code (exceeds 25 allowed). Consider refactoring. Open
datetime_range: function(val, options) {
options = options || {};
if (!options.format) {
return val;
}
- Create a ticketCreate a ticket
All 'var' declarations must be at the top of the function scope. Open
var format = {
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
Expected method shorthand. Open
number_with_delimiter: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Expected method shorthand. Open
kbytes_to_human_size: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
return ordinalize(~~val);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
return sprintf('%.' + (~~precision) + 'f', val);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Identifier 'number_with_delimiter' is not in camel case. Open
function number_with_delimiter(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
intpart = ~~( intpart / 1000 );
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var numstr = val;
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- 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/
There should be no spaces inside this paren. Open
return _.capitalize( String(val) );
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow or enforce spaces inside of parentheses (space-in-parens)
Some style guides require or disallow spaces inside of parentheses:
foo( 'bar' );
var x = ( 1 + 2 ) * 3;
foo('bar');
var x = (1 + 2) * 3;
Rule Details
This rule will enforce consistency of spacing directly inside of parentheses, by disallowing or requiring one or more spaces to the right of (
and to the left of )
. In either case, ()
will still be allowed.
Options
There are two options for this rule:
-
"never"
(default) enforces zero spaces inside of parentheses -
"always"
enforces a space inside of parentheses
Depending on your coding conventions, you can choose either option by specifying it in your configuration:
"space-in-parens": ["error", "always"]
"never"
Examples of incorrect code for this rule with the default "never"
option:
/*eslint space-in-parens: ["error", "never"]*/
foo( 'bar');
foo('bar' );
foo( 'bar' );
var foo = ( 1 + 2 ) * 3;
( function () { return 'bar'; }() );
Examples of correct code for this rule with the default "never"
option:
/*eslint space-in-parens: ["error", "never"]*/
foo();
foo('bar');
var foo = (1 + 2) * 3;
(function () { return 'bar'; }());
"always"
Examples of incorrect code for this rule with the "always"
option:
/*eslint space-in-parens: ["error", "always"]*/
foo( 'bar');
foo('bar' );
foo('bar');
var foo = (1 + 2) * 3;
(function () { return 'bar'; }());
Examples of correct code for this rule with the "always"
option:
/*eslint space-in-parens: ["error", "always"]*/
foo();
foo( 'bar' );
var foo = ( 1 + 2 ) * 3;
( function () { return 'bar'; }() );
Exceptions
An object literal may be used as a third array item to specify exceptions, with the key "exceptions"
and an array as the value. These exceptions work in the context of the first option. That is, if "always"
is set to enforce spacing, then any "exception" will disallow spacing. Conversely, if "never"
is set to disallow spacing, then any "exception" will enforce spacing.
The following exceptions are available: ["{}", "[]", "()", "empty"]
.
Examples of incorrect code for this rule with the "never", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["{}"] }]*/
foo({bar: 'baz'});
foo(1, {bar: 'baz'});
Examples of correct code for this rule with the "never", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["{}"] }]*/
foo( {bar: 'baz'} );
foo(1, {bar: 'baz'} );
Examples of incorrect code for this rule with the "always", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}"] }]*/
foo( {bar: 'baz'} );
foo( 1, {bar: 'baz'} );
Examples of correct code for this rule with the "always", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}"] }]*/
foo({bar: 'baz'});
foo( 1, {bar: 'baz'});
Examples of incorrect code for this rule with the "never", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["[]"] }]*/
foo([bar, baz]);
foo([bar, baz], 1);
Examples of correct code for this rule with the "never", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["[]"] }]*/
foo( [bar, baz] );
foo( [bar, baz], 1);
Examples of incorrect code for this rule with the "always", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["[]"] }]*/
foo( [bar, baz] );
foo( [bar, baz], 1 );
Examples of correct code for this rule with the "always", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["[]"] }]*/
foo([bar, baz]);
foo([bar, baz], 1 );
Examples of incorrect code for this rule with the "never", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["()"] }]*/
foo((1 + 2));
foo((1 + 2), 1);
Examples of correct code for this rule with the "never", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["()"] }]*/
foo( (1 + 2) );
foo( (1 + 2), 1);
Examples of incorrect code for this rule with the "always", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["()"] }]*/
foo( ( 1 + 2 ) );
foo( ( 1 + 2 ), 1 );
Examples of correct code for this rule with the "always", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["()"] }]*/
foo(( 1 + 2 ));
foo(( 1 + 2 ), 1 );
The "empty"
exception concerns empty parentheses, and works the same way as the other exceptions, inverting the first option.
Example of incorrect code for this rule with the "never", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["empty"] }]*/
foo();
Example of correct code for this rule with the "never", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["empty"] }]*/
foo( );
Example of incorrect code for this rule with the "always", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["empty"] }]*/
foo( );
Example of correct code for this rule with the "always", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["empty"] }]*/
foo();
You can include multiple entries in the "exceptions"
array.
Examples of incorrect code for this rule with the "always", { "exceptions": ["{}", "[]"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}", "[]"] }]*/
bar( {bar:'baz'} );
baz( 1, [1,2] );
foo( {bar: 'baz'}, [1, 2] );
Examples of correct code for this rule with the "always", { "exceptions": ["{}", "[]"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}", "[]"] }]*/
bar({bar:'baz'});
baz( 1, [1,2]);
foo({bar: 'baz'}, [1, 2]);
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between parentheses.
Related Rules
- [space-in-brackets](space-in-brackets.md) (deprecated) Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var stime;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
All 'var' declarations must be at the top of the function scope. Open
var etime;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
All 'var' declarations must be at the top of the function scope. Open
var days = ~~(val / 86400);
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 use of '~'. Open
var days = ~~(val / 86400);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Identifier 'default_tz' is not in camel case. Open
function get_time_zone(default_tz) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
Missing semicolon. Open
v[0] = v[0].replace(/0+$/, '').replace(/\.$/, '')
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
require or disallow semicolons instead of ASI (semi)
JavaScript is unique amongst the C-like languages in that it doesn't require semicolons at the end of each statement. In many cases, the JavaScript engine can determine that a semicolon should be in a certain spot and will automatically add it. This feature is known as automatic semicolon insertion (ASI) and is considered one of the more controversial features of JavaScript. For example, the following lines are both valid:
var name = "ESLint"
var website = "eslint.org";
On the first line, the JavaScript engine will automatically insert a semicolon, so this is not considered a syntax error. The JavaScript engine still knows how to interpret the line and knows that the line end indicates the end of the statement.
In the debate over ASI, there are generally two schools of thought. The first is that we should treat ASI as if it didn't exist and always include semicolons manually. The rationale is that it's easier to always include semicolons than to try to remember when they are or are not required, and thus decreases the possibility of introducing an error.
However, the ASI mechanism can sometimes be tricky to people who are using semicolons. For example, consider this code:
return
{
name: "ESLint"
};
This may look like a return
statement that returns an object literal, however, the JavaScript engine will interpret this code as:
return;
{
name: "ESLint";
}
Effectively, a semicolon is inserted after the return
statement, causing the code below it (a labeled literal inside a block) to be unreachable. This rule and the [no-unreachable](no-unreachable.md) rule will protect your code from such cases.
On the other side of the argument are those who say that since semicolons are inserted automatically, they are optional and do not need to be inserted manually. However, the ASI mechanism can also be tricky to people who don't use semicolons. For example, consider this code:
var globalCounter = { }
(function () {
var n = 0
globalCounter.increment = function () {
return ++n
}
})()
In this example, a semicolon will not be inserted after the first line, causing a run-time error (because an empty object is called as if it's a function). The [no-unexpected-multiline](no-unexpected-multiline.md) rule can protect your code from such cases.
Although ASI allows for more freedom over your coding style, it can also make your code behave in an unexpected way, whether you use semicolons or not. Therefore, it is best to know when ASI takes place and when it does not, and have ESLint protect your code from these potentially unexpected cases. In short, as once described by Isaac Schlueter, a \n
character always ends a statement (just like a semicolon) unless one of the following is true:
- The statement has an unclosed paren, array literal, or object literal or ends in some other way that is not a valid way to end a statement. (For instance, ending with
.
or,
.) - The line is
--
or++
(in which case it will decrement/increment the next token.) - It is a
for()
,while()
,do
,if()
, orelse
, and there is no{
- The next line starts with
[
,(
,+
,*
,/
,-
,,
,.
, or some other binary operator that can only be found between two tokens in a single expression.
Rule Details
This rule enforces consistent use of semicolons.
Options
This rule has two options, a string option and an object option.
String option:
-
"always"
(default) requires semicolons at the end of statements -
"never"
disallows semicolons as the end of statements (except to disambiguate statements beginning with[
,(
,/
,+
, or-
)
Object option (when "always"
):
-
"omitLastInOneLineBlock": true
ignores the last semicolon in a block in which its braces (and therefore the content of the block) are in the same line
Object option (when "never"
):
-
"beforeStatementContinuationChars": "any"
(default) ignores semicolons (or lacking semicolon) at the end of statements if the next line starts with[
,(
,/
,+
, or-
. -
"beforeStatementContinuationChars": "always"
requires semicolons at the end of statements if the next line starts with[
,(
,/
,+
, or-
. -
"beforeStatementContinuationChars": "never"
disallows semicolons as the end of statements if it doesn't make ASI hazard even if the next line starts with[
,(
,/
,+
, or-
.
always
Examples of incorrect code for this rule with the default "always"
option:
/*eslint semi: ["error", "always"]*/
var name = "ESLint"
object.method = function() {
// ...
}
Examples of correct code for this rule with the default "always"
option:
/*eslint semi: "error"*/
var name = "ESLint";
object.method = function() {
// ...
};
never
Examples of incorrect code for this rule with the "never"
option:
/*eslint semi: ["error", "never"]*/
var name = "ESLint";
object.method = function() {
// ...
};
Examples of correct code for this rule with the "never"
option:
/*eslint semi: ["error", "never"]*/
var name = "ESLint"
object.method = function() {
// ...
}
var name = "ESLint"
;(function() {
// ...
})()
import a from "a"
(function() {
// ...
})()
import b from "b"
;(function() {
// ...
})()
omitLastInOneLineBlock
Examples of additional correct code for this rule with the "always", { "omitLastInOneLineBlock": true }
options:
/*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */
if (foo) { bar() }
if (foo) { bar(); baz() }
beforeStatementContinuationChars
Examples of additional incorrect code for this rule with the "never", { "beforeStatementContinuationChars": "always" }
options:
/*eslint semi: ["error", "never", { "beforeStatementContinuationChars": "always"}] */
import a from "a"
(function() {
// ...
})()
Examples of additional incorrect code for this rule with the "never", { "beforeStatementContinuationChars": "never" }
options:
/*eslint semi: ["error", "never", { "beforeStatementContinuationChars": "never"}] */
import a from "a"
;(function() {
// ...
})()
When Not To Use It
If you do not want to enforce semicolon usage (or omission) in any particular way, then you can turn this rule off.
Further Reading
Related Rules
- [no-extra-semi](no-extra-semi.md)
- [no-unexpected-multiline](no-unexpected-multiline.md)
- [semi-spacing](semi-spacing.md) Source: http://eslint.org/docs/rules/
Expected method shorthand. Open
bytes_to_human_size: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var av_options = { precision: options.precision || 0 }; // Precision of 0 returns the significant digits
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
Use array destructuring. Open
col = a[0];
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Prefer destructuring from arrays and objects (prefer-destructuring)
With JavaScript ES6, a new syntax was added for creating variables from an array index or object property, called destructuring. This rule enforces usage of destructuring instead of accessing a property through a member expression.
Rule Details
Options
This rule takes two sets of configuration objects. The first object parameter determines what types of destructuring the rule applies to.
The two properties, array
and object
, can be used to turn on or off the destructuring requirement for each of those types independently. By default, both are true.
Alternatively, you can use separate configurations for different assignment types. It accepts 2 other keys instead of array
and object
.
One key is VariableDeclarator
and the other is AssignmentExpression
, which can be used to control the destructuring requirement for each of those types independently. Each property accepts an object that accepts two properties, array
and object
, which can be used to control the destructuring requirement for each of array
and object
independently for variable declarations and assignment expressions. By default, array
and object
are set to true for both VariableDeclarator
and AssignmentExpression
.
The rule has a second object with a single key, enforceForRenamedProperties
, which determines whether the object
destructuring applies to renamed variables.
Examples of incorrect code for this rule:
// With `array` enabled
var foo = array[0];
// With `object` enabled
var foo = object.foo;
var foo = object['foo'];
Examples of correct code for this rule:
// With `array` enabled
var [ foo ] = array;
var foo = array[someIndex];
// With `object` enabled
var { foo } = object;
var foo = object.bar;
let foo;
({ foo } = object);
Examples of incorrect code when enforceForRenamedProperties
is enabled:
var foo = object.bar;
Examples of correct code when enforceForRenamedProperties
is enabled:
var { bar: foo } = object;
An example configuration, with the defaults array
and object
filled in, looks like this:
{
"rules": {
"prefer-destructuring": ["error", {
"array": true,
"object": true
}, {
"enforceForRenamedProperties": false
}]
}
}
The two properties, array
and object
, which can be used to turn on or off the destructuring requirement for each of those types independently. By default, both are true.
For example, the following configuration enforces only object destructuring, but not array destructuring:
{
"rules": {
"prefer-destructuring": ["error", {"object": true, "array": false}]
}
}
An example configuration, with the defaults VariableDeclarator
and AssignmentExpression
filled in, looks like this:
{
"rules": {
"prefer-destructuring": ["error", {
"VariableDeclarator": {
"array": false,
"object": true
},
"AssignmentExpression": {
"array": true,
"object": true
}
}, {
"enforceForRenamedProperties": false
}]
}
}
The two properties, VariableDeclarator
and AssignmentExpression
, which can be used to turn on or off the destructuring requirement for array
and object
. By default, all values are true.
For example, the following configuration enforces object destructuring in variable declarations and enforces array destructuring in assignment expressions.
{
"rules": {
"prefer-destructuring": ["error", {
"VariableDeclarator": {
"array": false,
"object": true
},
"AssignmentExpression": {
"array": true,
"object": false
}
}, {
"enforceForRenamedProperties": false
}]
}
}
Examples of correct code when object destructuring in VariableDeclarator
is enforced:
/* eslint prefer-destructuring: ["error", {VariableDeclarator: {object: true}}] */
var {bar: foo} = object;
Examples of correct code when array destructuring in AssignmentExpression
is enforced:
/* eslint prefer-destructuring: ["error", {AssignmentExpression: {array: true}}] */
[bar] = array;
When Not To Use It
If you want to be able to access array indices or object properties directly, you can either configure the rule to your tastes or disable the rule entirely.
Additionally, if you intend to access large array indices directly, like:
var foo = array[100];
Then the array
part of this rule is not recommended, as destructuring does not match this use case very well.
Or for non-iterable 'array-like' objects:
var $ = require('jquery');
var foo = $('body')[0];
var [bar] = $('body'); // fails with a TypeError
Further Reading
If you want to learn more about destructuring, check out the links below:
All 'var' declarations must be at the top of the function scope. Open
var hours = ~~((val / 3600) - (days * 24));
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 var, use let or const instead. Open
var fmt = '0.0';
- Read upRead up
- Create a ticketCreate a ticket
- 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 method shorthand. Open
mhz_to_human_size: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var col = options.column;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 var, use let or const instead. Open
var col = options.column;
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected string concatenation. Open
return '(' + stime.strftime(options.format) + ' - ' + etime.strftime(options.format) + ')';
- Read upRead up
- Create a ticketCreate a ticket
- 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 method shorthand. Open
set: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
var days = ~~(val / 86400);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Identifier 'get_time_zone' is not in camel case. Open
function get_time_zone(default_tz) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
intpart = ~~val;
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var numstr = val;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
All 'var' declarations must be at the top of the function scope. Open
var p = options.precision - 1;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 var, use let or const instead. Open
var v = str_val.split(separator);
- Read upRead up
- Create a ticketCreate a ticket
- 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 method shorthand. Open
datetime: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Expected method shorthand. Open
datetime_range: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Expected method shorthand. Open
number_ordinal: function(val, _options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
return ordinalize(~~val);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected string concatenation. Open
return sprintf('%.' + (~~precision) + 'f', val);
- Read upRead up
- Create a ticketCreate a ticket
- 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 use of '~'. Open
intpart = Math.abs(~~val);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
There should be no spaces inside this paren. Open
intpart = ~~( intpart / 1000 );
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow or enforce spaces inside of parentheses (space-in-parens)
Some style guides require or disallow spaces inside of parentheses:
foo( 'bar' );
var x = ( 1 + 2 ) * 3;
foo('bar');
var x = (1 + 2) * 3;
Rule Details
This rule will enforce consistency of spacing directly inside of parentheses, by disallowing or requiring one or more spaces to the right of (
and to the left of )
. In either case, ()
will still be allowed.
Options
There are two options for this rule:
-
"never"
(default) enforces zero spaces inside of parentheses -
"always"
enforces a space inside of parentheses
Depending on your coding conventions, you can choose either option by specifying it in your configuration:
"space-in-parens": ["error", "always"]
"never"
Examples of incorrect code for this rule with the default "never"
option:
/*eslint space-in-parens: ["error", "never"]*/
foo( 'bar');
foo('bar' );
foo( 'bar' );
var foo = ( 1 + 2 ) * 3;
( function () { return 'bar'; }() );
Examples of correct code for this rule with the default "never"
option:
/*eslint space-in-parens: ["error", "never"]*/
foo();
foo('bar');
var foo = (1 + 2) * 3;
(function () { return 'bar'; }());
"always"
Examples of incorrect code for this rule with the "always"
option:
/*eslint space-in-parens: ["error", "always"]*/
foo( 'bar');
foo('bar' );
foo('bar');
var foo = (1 + 2) * 3;
(function () { return 'bar'; }());
Examples of correct code for this rule with the "always"
option:
/*eslint space-in-parens: ["error", "always"]*/
foo();
foo( 'bar' );
var foo = ( 1 + 2 ) * 3;
( function () { return 'bar'; }() );
Exceptions
An object literal may be used as a third array item to specify exceptions, with the key "exceptions"
and an array as the value. These exceptions work in the context of the first option. That is, if "always"
is set to enforce spacing, then any "exception" will disallow spacing. Conversely, if "never"
is set to disallow spacing, then any "exception" will enforce spacing.
The following exceptions are available: ["{}", "[]", "()", "empty"]
.
Examples of incorrect code for this rule with the "never", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["{}"] }]*/
foo({bar: 'baz'});
foo(1, {bar: 'baz'});
Examples of correct code for this rule with the "never", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["{}"] }]*/
foo( {bar: 'baz'} );
foo(1, {bar: 'baz'} );
Examples of incorrect code for this rule with the "always", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}"] }]*/
foo( {bar: 'baz'} );
foo( 1, {bar: 'baz'} );
Examples of correct code for this rule with the "always", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}"] }]*/
foo({bar: 'baz'});
foo( 1, {bar: 'baz'});
Examples of incorrect code for this rule with the "never", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["[]"] }]*/
foo([bar, baz]);
foo([bar, baz], 1);
Examples of correct code for this rule with the "never", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["[]"] }]*/
foo( [bar, baz] );
foo( [bar, baz], 1);
Examples of incorrect code for this rule with the "always", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["[]"] }]*/
foo( [bar, baz] );
foo( [bar, baz], 1 );
Examples of correct code for this rule with the "always", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["[]"] }]*/
foo([bar, baz]);
foo([bar, baz], 1 );
Examples of incorrect code for this rule with the "never", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["()"] }]*/
foo((1 + 2));
foo((1 + 2), 1);
Examples of correct code for this rule with the "never", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["()"] }]*/
foo( (1 + 2) );
foo( (1 + 2), 1);
Examples of incorrect code for this rule with the "always", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["()"] }]*/
foo( ( 1 + 2 ) );
foo( ( 1 + 2 ), 1 );
Examples of correct code for this rule with the "always", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["()"] }]*/
foo(( 1 + 2 ));
foo(( 1 + 2 ), 1 );
The "empty"
exception concerns empty parentheses, and works the same way as the other exceptions, inverting the first option.
Example of incorrect code for this rule with the "never", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["empty"] }]*/
foo();
Example of correct code for this rule with the "never", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["empty"] }]*/
foo( );
Example of incorrect code for this rule with the "always", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["empty"] }]*/
foo( );
Example of correct code for this rule with the "always", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["empty"] }]*/
foo();
You can include multiple entries in the "exceptions"
array.
Examples of incorrect code for this rule with the "always", { "exceptions": ["{}", "[]"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}", "[]"] }]*/
bar( {bar:'baz'} );
baz( 1, [1,2] );
foo( {bar: 'baz'}, [1, 2] );
Examples of correct code for this rule with the "always", { "exceptions": ["{}", "[]"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}", "[]"] }]*/
bar({bar:'baz'});
baz( 1, [1,2]);
foo({bar: 'baz'}, [1, 2]);
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between parentheses.
Related Rules
- [space-in-brackets](space-in-brackets.md) (deprecated) Source: http://eslint.org/docs/rules/
Unexpected string concatenation. Open
options.negative_format = '-' + options.format;
- Read upRead up
- Create a ticketCreate a ticket
- 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/
There should be no space before ']'. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow or enforce spaces inside of brackets (array-bracket-spacing)
A number of style guides require or disallow spaces between array brackets and other tokens. This rule applies to both array literals and destructuring assignments (ECMAScript 6).
/*eslint-env es6*/
var arr = [ 'foo', 'bar' ];
var [ x, y ] = z;
var arr = ['foo', 'bar'];
var [x,y] = z;
Rule Details
This rule enforces consistent spacing inside array brackets.
Options
This rule has a string option:
-
"never"
(default) disallows spaces inside array brackets -
"always"
requires one or more spaces or newlines inside array brackets
This rule has an object option for exceptions to the "never"
option:
-
"singleValue": true
requires one or more spaces or newlines inside brackets of array literals that contain a single element -
"objectsInArrays": true
requires one or more spaces or newlines between brackets of array literals and braces of their object literal elements[ {
or} ]
-
"arraysInArrays": true
requires one or more spaces or newlines between brackets of array literals and brackets of their array literal elements[ [
or] ]
This rule has an object option for exceptions to the "always"
option:
-
"singleValue": false
disallows spaces inside brackets of array literals that contain a single element -
"objectsInArrays": false
disallows spaces between brackets of array literals and braces of their object literal elements[{
or}]
-
"arraysInArrays": false
disallows spaces between brackets of array literals and brackets of their array literal elements[[
or]]
This rule has built-in exceptions:
-
"never"
(and also the exceptions to the"always"
option) allows newlines inside array brackets, because this is a common pattern -
"always"
does not require spaces or newlines in empty array literals[]
never
Examples of incorrect code for this rule with the default "never"
option:
/*eslint array-bracket-spacing: ["error", "never"]*/
/*eslint-env es6*/
var arr = [ 'foo', 'bar' ];
var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar'];
var arr = [[ 'foo' ], 'bar'];
var arr = [ 'foo',
'bar'
];
var [ x, y ] = z;
var [ x,y ] = z;
var [ x, ...y ] = z;
var [ ,,x, ] = z;
Examples of correct code for this rule with the default "never"
option:
/*eslint array-bracket-spacing: ["error", "never"]*/
/*eslint-env es6*/
var arr = [];
var arr = ['foo', 'bar', 'baz'];
var arr = [['foo'], 'bar', 'baz'];
var arr = [
'foo',
'bar',
'baz'
];
var arr = ['foo',
'bar'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
always
Examples of incorrect code for this rule with the "always"
option:
/*eslint array-bracket-spacing: ["error", "always"]*/
/*eslint-env es6*/
var arr = ['foo', 'bar'];
var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar' ];
var arr = ['foo',
'bar'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
Examples of correct code for this rule with the "always"
option:
/*eslint array-bracket-spacing: ["error", "always"]*/
/*eslint-env es6*/
var arr = [];
var arr = [ 'foo', 'bar', 'baz' ];
var arr = [ [ 'foo' ], 'bar', 'baz' ];
var arr = [ 'foo',
'bar'
];
var arr = [
'foo',
'bar' ];
var arr = [
'foo',
'bar',
'baz'
];
var [ x, y ] = z;
var [ x,y ] = z;
var [ x, ...y ] = z;
var [ ,,x, ] = z;
singleValue
Examples of incorrect code for this rule with the "always", { "singleValue": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "singleValue": false }]*/
var foo = [ 'foo' ];
var foo = [ 'foo'];
var foo = ['foo' ];
var foo = [ 1 ];
var foo = [ 1];
var foo = [1 ];
var foo = [ [ 1, 2 ] ];
var foo = [ { 'foo': 'bar' } ];
Examples of correct code for this rule with the "always", { "singleValue": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "singleValue": false }]*/
var foo = ['foo'];
var foo = [1];
var foo = [[ 1, 1 ]];
var foo = [{ 'foo': 'bar' }];
objectsInArrays
Examples of incorrect code for this rule with the "always", { "objectsInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "objectsInArrays": false }]*/
var arr = [ { 'foo': 'bar' } ];
var arr = [ {
'foo': 'bar'
} ]
Examples of correct code for this rule with the "always", { "objectsInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "objectsInArrays": false }]*/
var arr = [{ 'foo': 'bar' }];
var arr = [{
'foo': 'bar'
}];
arraysInArrays
Examples of incorrect code for this rule with the "always", { "arraysInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "arraysInArrays": false }]*/
var arr = [ [ 1, 2 ], 2, 3, 4 ];
var arr = [ [ 1, 2 ], 2, [ 3, 4 ] ];
Examples of correct code for this rule with the "always", { "arraysInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "arraysInArrays": false }]*/
var arr = [[ 1, 2 ], 2, 3, 4 ];
var arr = [[ 1, 2 ], 2, [ 3, 4 ]];
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between array brackets.
Related Rules
- [space-in-parens](space-in-parens.md)
- [object-curly-spacing](object-curly-spacing.md)
- [computed-property-spacing](computed-property-spacing.md) Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var intpart;
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var a = String(col).split('__');
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected use of '~'. Open
intpart = ~~val;
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var fmt = (numstr[0] === '-') ? options.negative_format : options.format;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
There should be no space after '['. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow or enforce spaces inside of brackets (array-bracket-spacing)
A number of style guides require or disallow spaces between array brackets and other tokens. This rule applies to both array literals and destructuring assignments (ECMAScript 6).
/*eslint-env es6*/
var arr = [ 'foo', 'bar' ];
var [ x, y ] = z;
var arr = ['foo', 'bar'];
var [x,y] = z;
Rule Details
This rule enforces consistent spacing inside array brackets.
Options
This rule has a string option:
-
"never"
(default) disallows spaces inside array brackets -
"always"
requires one or more spaces or newlines inside array brackets
This rule has an object option for exceptions to the "never"
option:
-
"singleValue": true
requires one or more spaces or newlines inside brackets of array literals that contain a single element -
"objectsInArrays": true
requires one or more spaces or newlines between brackets of array literals and braces of their object literal elements[ {
or} ]
-
"arraysInArrays": true
requires one or more spaces or newlines between brackets of array literals and brackets of their array literal elements[ [
or] ]
This rule has an object option for exceptions to the "always"
option:
-
"singleValue": false
disallows spaces inside brackets of array literals that contain a single element -
"objectsInArrays": false
disallows spaces between brackets of array literals and braces of their object literal elements[{
or}]
-
"arraysInArrays": false
disallows spaces between brackets of array literals and brackets of their array literal elements[[
or]]
This rule has built-in exceptions:
-
"never"
(and also the exceptions to the"always"
option) allows newlines inside array brackets, because this is a common pattern -
"always"
does not require spaces or newlines in empty array literals[]
never
Examples of incorrect code for this rule with the default "never"
option:
/*eslint array-bracket-spacing: ["error", "never"]*/
/*eslint-env es6*/
var arr = [ 'foo', 'bar' ];
var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar'];
var arr = [[ 'foo' ], 'bar'];
var arr = [ 'foo',
'bar'
];
var [ x, y ] = z;
var [ x,y ] = z;
var [ x, ...y ] = z;
var [ ,,x, ] = z;
Examples of correct code for this rule with the default "never"
option:
/*eslint array-bracket-spacing: ["error", "never"]*/
/*eslint-env es6*/
var arr = [];
var arr = ['foo', 'bar', 'baz'];
var arr = [['foo'], 'bar', 'baz'];
var arr = [
'foo',
'bar',
'baz'
];
var arr = ['foo',
'bar'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
always
Examples of incorrect code for this rule with the "always"
option:
/*eslint array-bracket-spacing: ["error", "always"]*/
/*eslint-env es6*/
var arr = ['foo', 'bar'];
var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar' ];
var arr = ['foo',
'bar'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
Examples of correct code for this rule with the "always"
option:
/*eslint array-bracket-spacing: ["error", "always"]*/
/*eslint-env es6*/
var arr = [];
var arr = [ 'foo', 'bar', 'baz' ];
var arr = [ [ 'foo' ], 'bar', 'baz' ];
var arr = [ 'foo',
'bar'
];
var arr = [
'foo',
'bar' ];
var arr = [
'foo',
'bar',
'baz'
];
var [ x, y ] = z;
var [ x,y ] = z;
var [ x, ...y ] = z;
var [ ,,x, ] = z;
singleValue
Examples of incorrect code for this rule with the "always", { "singleValue": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "singleValue": false }]*/
var foo = [ 'foo' ];
var foo = [ 'foo'];
var foo = ['foo' ];
var foo = [ 1 ];
var foo = [ 1];
var foo = [1 ];
var foo = [ [ 1, 2 ] ];
var foo = [ { 'foo': 'bar' } ];
Examples of correct code for this rule with the "always", { "singleValue": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "singleValue": false }]*/
var foo = ['foo'];
var foo = [1];
var foo = [[ 1, 1 ]];
var foo = [{ 'foo': 'bar' }];
objectsInArrays
Examples of incorrect code for this rule with the "always", { "objectsInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "objectsInArrays": false }]*/
var arr = [ { 'foo': 'bar' } ];
var arr = [ {
'foo': 'bar'
} ]
Examples of correct code for this rule with the "always", { "objectsInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "objectsInArrays": false }]*/
var arr = [{ 'foo': 'bar' }];
var arr = [{
'foo': 'bar'
}];
arraysInArrays
Examples of incorrect code for this rule with the "always", { "arraysInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "arraysInArrays": false }]*/
var arr = [ [ 1, 2 ], 2, 3, 4 ];
var arr = [ [ 1, 2 ], 2, [ 3, 4 ] ];
Examples of correct code for this rule with the "always", { "arraysInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "arraysInArrays": false }]*/
var arr = [[ 1, 2 ], 2, 3, 4 ];
var arr = [[ 1, 2 ], 2, [ 3, 4 ]];
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between array brackets.
Related Rules
- [space-in-parens](space-in-parens.md)
- [object-curly-spacing](object-curly-spacing.md)
- [computed-property-spacing](computed-property-spacing.md) Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var stime;
- Read upRead up
- Create a ticketCreate a ticket
- 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 method shorthand. Open
elapsed_time_human: function(val, _options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var floatpart;
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Identifier 'number_to_currency' is not in camel case. Open
function number_to_currency(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var s = val < 0 ? '-' : '';
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
Identifier 'av_options' is not in camel case. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
var hours = ~~((val / 3600) - (days * 24));
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Identifier 'apply_prefix_and_suffix' is not in camel case. Open
function apply_prefix_and_suffix(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
Identifier 'default_tz' is not in camel case. Open
return default_tz;
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var floatpart;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
All 'var' declarations must be at the top of the function scope. Open
var s = '';
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
There should be no spaces inside this paren. Open
intpart = ~~( intpart / 1000 );
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow or enforce spaces inside of parentheses (space-in-parens)
Some style guides require or disallow spaces inside of parentheses:
foo( 'bar' );
var x = ( 1 + 2 ) * 3;
foo('bar');
var x = (1 + 2) * 3;
Rule Details
This rule will enforce consistency of spacing directly inside of parentheses, by disallowing or requiring one or more spaces to the right of (
and to the left of )
. In either case, ()
will still be allowed.
Options
There are two options for this rule:
-
"never"
(default) enforces zero spaces inside of parentheses -
"always"
enforces a space inside of parentheses
Depending on your coding conventions, you can choose either option by specifying it in your configuration:
"space-in-parens": ["error", "always"]
"never"
Examples of incorrect code for this rule with the default "never"
option:
/*eslint space-in-parens: ["error", "never"]*/
foo( 'bar');
foo('bar' );
foo( 'bar' );
var foo = ( 1 + 2 ) * 3;
( function () { return 'bar'; }() );
Examples of correct code for this rule with the default "never"
option:
/*eslint space-in-parens: ["error", "never"]*/
foo();
foo('bar');
var foo = (1 + 2) * 3;
(function () { return 'bar'; }());
"always"
Examples of incorrect code for this rule with the "always"
option:
/*eslint space-in-parens: ["error", "always"]*/
foo( 'bar');
foo('bar' );
foo('bar');
var foo = (1 + 2) * 3;
(function () { return 'bar'; }());
Examples of correct code for this rule with the "always"
option:
/*eslint space-in-parens: ["error", "always"]*/
foo();
foo( 'bar' );
var foo = ( 1 + 2 ) * 3;
( function () { return 'bar'; }() );
Exceptions
An object literal may be used as a third array item to specify exceptions, with the key "exceptions"
and an array as the value. These exceptions work in the context of the first option. That is, if "always"
is set to enforce spacing, then any "exception" will disallow spacing. Conversely, if "never"
is set to disallow spacing, then any "exception" will enforce spacing.
The following exceptions are available: ["{}", "[]", "()", "empty"]
.
Examples of incorrect code for this rule with the "never", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["{}"] }]*/
foo({bar: 'baz'});
foo(1, {bar: 'baz'});
Examples of correct code for this rule with the "never", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["{}"] }]*/
foo( {bar: 'baz'} );
foo(1, {bar: 'baz'} );
Examples of incorrect code for this rule with the "always", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}"] }]*/
foo( {bar: 'baz'} );
foo( 1, {bar: 'baz'} );
Examples of correct code for this rule with the "always", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}"] }]*/
foo({bar: 'baz'});
foo( 1, {bar: 'baz'});
Examples of incorrect code for this rule with the "never", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["[]"] }]*/
foo([bar, baz]);
foo([bar, baz], 1);
Examples of correct code for this rule with the "never", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["[]"] }]*/
foo( [bar, baz] );
foo( [bar, baz], 1);
Examples of incorrect code for this rule with the "always", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["[]"] }]*/
foo( [bar, baz] );
foo( [bar, baz], 1 );
Examples of correct code for this rule with the "always", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["[]"] }]*/
foo([bar, baz]);
foo([bar, baz], 1 );
Examples of incorrect code for this rule with the "never", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["()"] }]*/
foo((1 + 2));
foo((1 + 2), 1);
Examples of correct code for this rule with the "never", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["()"] }]*/
foo( (1 + 2) );
foo( (1 + 2), 1);
Examples of incorrect code for this rule with the "always", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["()"] }]*/
foo( ( 1 + 2 ) );
foo( ( 1 + 2 ), 1 );
Examples of correct code for this rule with the "always", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["()"] }]*/
foo(( 1 + 2 ));
foo(( 1 + 2 ), 1 );
The "empty"
exception concerns empty parentheses, and works the same way as the other exceptions, inverting the first option.
Example of incorrect code for this rule with the "never", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["empty"] }]*/
foo();
Example of correct code for this rule with the "never", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["empty"] }]*/
foo( );
Example of incorrect code for this rule with the "always", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["empty"] }]*/
foo( );
Example of correct code for this rule with the "always", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["empty"] }]*/
foo();
You can include multiple entries in the "exceptions"
array.
Examples of incorrect code for this rule with the "always", { "exceptions": ["{}", "[]"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}", "[]"] }]*/
bar( {bar:'baz'} );
baz( 1, [1,2] );
foo( {bar: 'baz'}, [1, 2] );
Examples of correct code for this rule with the "always", { "exceptions": ["{}", "[]"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}", "[]"] }]*/
bar({bar:'baz'});
baz( 1, [1,2]);
foo({bar: 'baz'}, [1, 2]);
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between parentheses.
Related Rules
- [space-in-brackets](space-in-brackets.md) (deprecated) Source: http://eslint.org/docs/rules/
Identifier 'number_to_human_size' is not in camel case. Open
function number_to_human_size(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var av_options = { precision: options.precision || 0 }; // Precision of 0 returns the significant digits
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected string concatenation. Open
s += sprintf(precision + ' GHz', val / 1000000000);
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Identifier 'av_options' is not in camel case. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
There should be no spaces inside this paren. Open
return _.capitalize( String(val) );
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow or enforce spaces inside of parentheses (space-in-parens)
Some style guides require or disallow spaces inside of parentheses:
foo( 'bar' );
var x = ( 1 + 2 ) * 3;
foo('bar');
var x = (1 + 2) * 3;
Rule Details
This rule will enforce consistency of spacing directly inside of parentheses, by disallowing or requiring one or more spaces to the right of (
and to the left of )
. In either case, ()
will still be allowed.
Options
There are two options for this rule:
-
"never"
(default) enforces zero spaces inside of parentheses -
"always"
enforces a space inside of parentheses
Depending on your coding conventions, you can choose either option by specifying it in your configuration:
"space-in-parens": ["error", "always"]
"never"
Examples of incorrect code for this rule with the default "never"
option:
/*eslint space-in-parens: ["error", "never"]*/
foo( 'bar');
foo('bar' );
foo( 'bar' );
var foo = ( 1 + 2 ) * 3;
( function () { return 'bar'; }() );
Examples of correct code for this rule with the default "never"
option:
/*eslint space-in-parens: ["error", "never"]*/
foo();
foo('bar');
var foo = (1 + 2) * 3;
(function () { return 'bar'; }());
"always"
Examples of incorrect code for this rule with the "always"
option:
/*eslint space-in-parens: ["error", "always"]*/
foo( 'bar');
foo('bar' );
foo('bar');
var foo = (1 + 2) * 3;
(function () { return 'bar'; }());
Examples of correct code for this rule with the "always"
option:
/*eslint space-in-parens: ["error", "always"]*/
foo();
foo( 'bar' );
var foo = ( 1 + 2 ) * 3;
( function () { return 'bar'; }() );
Exceptions
An object literal may be used as a third array item to specify exceptions, with the key "exceptions"
and an array as the value. These exceptions work in the context of the first option. That is, if "always"
is set to enforce spacing, then any "exception" will disallow spacing. Conversely, if "never"
is set to disallow spacing, then any "exception" will enforce spacing.
The following exceptions are available: ["{}", "[]", "()", "empty"]
.
Examples of incorrect code for this rule with the "never", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["{}"] }]*/
foo({bar: 'baz'});
foo(1, {bar: 'baz'});
Examples of correct code for this rule with the "never", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["{}"] }]*/
foo( {bar: 'baz'} );
foo(1, {bar: 'baz'} );
Examples of incorrect code for this rule with the "always", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}"] }]*/
foo( {bar: 'baz'} );
foo( 1, {bar: 'baz'} );
Examples of correct code for this rule with the "always", { "exceptions": ["{}"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}"] }]*/
foo({bar: 'baz'});
foo( 1, {bar: 'baz'});
Examples of incorrect code for this rule with the "never", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["[]"] }]*/
foo([bar, baz]);
foo([bar, baz], 1);
Examples of correct code for this rule with the "never", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["[]"] }]*/
foo( [bar, baz] );
foo( [bar, baz], 1);
Examples of incorrect code for this rule with the "always", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["[]"] }]*/
foo( [bar, baz] );
foo( [bar, baz], 1 );
Examples of correct code for this rule with the "always", { "exceptions": ["[]"] }
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["[]"] }]*/
foo([bar, baz]);
foo([bar, baz], 1 );
Examples of incorrect code for this rule with the "never", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["()"] }]*/
foo((1 + 2));
foo((1 + 2), 1);
Examples of correct code for this rule with the "never", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["()"] }]*/
foo( (1 + 2) );
foo( (1 + 2), 1);
Examples of incorrect code for this rule with the "always", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["()"] }]*/
foo( ( 1 + 2 ) );
foo( ( 1 + 2 ), 1 );
Examples of correct code for this rule with the "always", { "exceptions": ["()"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["()"] }]*/
foo(( 1 + 2 ));
foo(( 1 + 2 ), 1 );
The "empty"
exception concerns empty parentheses, and works the same way as the other exceptions, inverting the first option.
Example of incorrect code for this rule with the "never", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["empty"] }]*/
foo();
Example of correct code for this rule with the "never", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "never", { "exceptions": ["empty"] }]*/
foo( );
Example of incorrect code for this rule with the "always", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["empty"] }]*/
foo( );
Example of correct code for this rule with the "always", { "exceptions": ["empty"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["empty"] }]*/
foo();
You can include multiple entries in the "exceptions"
array.
Examples of incorrect code for this rule with the "always", { "exceptions": ["{}", "[]"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}", "[]"] }]*/
bar( {bar:'baz'} );
baz( 1, [1,2] );
foo( {bar: 'baz'}, [1, 2] );
Examples of correct code for this rule with the "always", { "exceptions": ["{}", "[]"] }]
option:
/*eslint space-in-parens: ["error", "always", { "exceptions": ["{}", "[]"] }]*/
bar({bar:'baz'});
baz( 1, [1,2]);
foo({bar: 'baz'}, [1, 2]);
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between parentheses.
Related Rules
- [space-in-brackets](space-in-brackets.md) (deprecated) Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
var hours = ~~((val / 3600) - (days * 24));
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var minutes = ~~((val / 60) - (hours * 60) - (days * 1440));
- Read upRead up
- Create a ticketCreate a ticket
- 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 minus;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 use of '~'. Open
intpart = ~~( intpart / 1000 );
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected string concatenation. Open
precision = '%.' + precision + 'f';
- Read upRead up
- Create a ticketCreate a ticket
- 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/
All 'var' declarations must be at the top of the function scope. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
Expected method shorthand. Open
gbytes_to_human_size: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
val = ~~val;
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var intpart;
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
Expected method shorthand. Open
currency_with_delimiter: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Identifier 'av_options' is not in camel case. Open
var av_options = { precision: options.precision || 0 }; // Precision of 0 returns the significant digits
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var a = String(col).split('__');
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 var, use let or const instead. Open
var minus;
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Identifier 'mhz_to_human_size' is not in camel case. Open
function mhz_to_human_size(val, precision) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 var, use let or const instead. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var sfx = a[1]; // The suffix (month, quarter, year) defines the range
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var hours = ~~((val / 3600) - (days * 24));
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var s = '';
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var fmt = (numstr[0] === '-') ? options.negative_format : options.format;
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var p = options.precision - 1;
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var s = val < 0 ? '-' : '';
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected string concatenation. Open
s += sprintf(precision + ' THz', val / 1000000000000);
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Identifier 'str_val' is not in camel case. Open
function remove_right_side_zeros(str_val, separator) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
Expected method shorthand. Open
boolean: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var sfx = a[1]; // The suffix (month, quarter, year) defines the range
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
Expected method shorthand. Open
datetime_ordinal: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var names = [__('Day'), __('Hour'), __('Minute'), __('Second')];
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Move the invocation into the parens that contain the function. Open
(function(window, moment, _) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require IIFEs to be Wrapped (wrap-iife)
You can immediately invoke function expressions, but not function declarations. A common technique to create an immediately-invoked function expression (IIFE) is to wrap a function declaration in parentheses. The opening parentheses causes the contained function to be parsed as an expression, rather than a declaration.
// function expression could be unwrapped
var x = function () { return { y: 1 };}();
// function declaration must be wrapped
function () { /* side effects */ }(); // SyntaxError
Rule Details
This rule requires all immediately-invoked function expressions to be wrapped in parentheses.
Options
This rule has two options, a string option and an object option.
String option:
-
"outside"
enforces always wrapping the call expression. The default is"outside"
. -
"inside"
enforces always wrapping the function expression. -
"any"
enforces always wrapping, but allows either style.
Object option:
-
"functionPrototypeMethods": true
additionally enforces wrapping function expressions invoked using.call
and.apply
. The default isfalse
.
outside
Examples of incorrect code for the default "outside"
option:
/*eslint wrap-iife: ["error", "outside"]*/
var x = function () { return { y: 1 };}(); // unwrapped
var x = (function () { return { y: 1 };})(); // wrapped function expression
Examples of correct code for the default "outside"
option:
/*eslint wrap-iife: ["error", "outside"]*/
var x = (function () { return { y: 1 };}()); // wrapped call expression
inside
Examples of incorrect code for the "inside"
option:
/*eslint wrap-iife: ["error", "inside"]*/
var x = function () { return { y: 1 };}(); // unwrapped
var x = (function () { return { y: 1 };}()); // wrapped call expression
Examples of correct code for the "inside"
option:
/*eslint wrap-iife: ["error", "inside"]*/
var x = (function () { return { y: 1 };})(); // wrapped function expression
any
Examples of incorrect code for the "any"
option:
/*eslint wrap-iife: ["error", "any"]*/
var x = function () { return { y: 1 };}(); // unwrapped
Examples of correct code for the "any"
option:
/*eslint wrap-iife: ["error", "any"]*/
var x = (function () { return { y: 1 };}()); // wrapped call expression
var x = (function () { return { y: 1 };})(); // wrapped function expression
functionPrototypeMethods
Examples of incorrect code for this rule with the "inside", { "functionPrototypeMethods": true }
options:
/* eslint wrap-iife: [2, "inside", { functionPrototypeMethods: true }] */
var x = function(){ foo(); }()
var x = (function(){ foo(); }())
var x = function(){ foo(); }.call(bar)
var x = (function(){ foo(); }.call(bar))
Examples of correct code for this rule with the "inside", { "functionPrototypeMethods": true }
options:
/* eslint wrap-iife: [2, "inside", { functionPrototypeMethods: true }] */
var x = (function(){ foo(); })()
var x = (function(){ foo(); }).call(bar)
Source: http://eslint.org/docs/rules/
'use strict' is unnecessary inside of modules. Open
'use strict';
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
require or disallow strict mode directives (strict)
A strict mode directive is a "use strict"
literal at the beginning of a script or function body. It enables strict mode semantics.
When a directive occurs in global scope, strict mode applies to the entire script:
"use strict";
// strict mode
function foo() {
// strict mode
}
When a directive occurs at the beginning of a function body, strict mode applies only to that function, including all contained functions:
function foo() {
"use strict";
// strict mode
}
function foo2() {
// not strict mode
};
(function() {
"use strict";
function bar() {
// strict mode
}
}());
In the CommonJS module system, a hidden function wraps each module and limits the scope of a "global" strict mode directive.
In ECMAScript modules, which always have strict mode semantics, the directives are unnecessary.
Rule Details
This rule requires or disallows strict mode directives.
This rule disallows strict mode directives, no matter which option is specified, if ESLint configuration specifies either of the following as parser options:
-
"sourceType": "module"
that is, files are ECMAScript modules -
"impliedStrict": true
property in theecmaFeatures
object
This rule disallows strict mode directives, no matter which option is specified, in functions with non-simple parameter lists (for example, parameter lists with default parameter values) because that is a syntax error in ECMAScript 2016 and later. See the examples of the function option.
The --fix
option on the command line does not insert new "use strict"
statements, but only removes unneeded statements.
Options
This rule has a string option:
-
"safe"
(default) corresponds either of the following options:-
"global"
if ESLint considers a file to be a CommonJS module -
"function"
otherwise
-
-
"global"
requires one strict mode directive in the global scope (and disallows any other strict mode directives) -
"function"
requires one strict mode directive in each top-level function declaration or expression (and disallows any other strict mode directives) -
"never"
disallows strict mode directives
safe
The "safe"
option corresponds to the "global"
option if ESLint considers a file to be a Node.js or CommonJS module because the configuration specifies either of the following:
-
node
orcommonjs
environments -
"globalReturn": true
property in theecmaFeatures
object of parser options
Otherwise the "safe"
option corresponds to the "function"
option. Note that if "globalReturn": false
is explicitly specified in the configuration, the "safe"
option will correspond to the "function"
option regardless of the specified environment.
global
Examples of incorrect code for this rule with the "global"
option:
/*eslint strict: ["error", "global"]*/
function foo() {
}
/*eslint strict: ["error", "global"]*/
function foo() {
"use strict";
}
/*eslint strict: ["error", "global"]*/
"use strict";
function foo() {
"use strict";
}
Examples of correct code for this rule with the "global"
option:
/*eslint strict: ["error", "global"]*/
"use strict";
function foo() {
}
function
This option ensures that all function bodies are strict mode code, while global code is not. Particularly if a build step concatenates multiple scripts, a strict mode directive in global code of one script could unintentionally enable strict mode in another script that was not intended to be strict code.
Examples of incorrect code for this rule with the "function"
option:
/*eslint strict: ["error", "function"]*/
"use strict";
function foo() {
}
/*eslint strict: ["error", "function"]*/
function foo() {
}
(function() {
function bar() {
"use strict";
}
}());
/*eslint strict: ["error", "function"]*/
/*eslint-env es6*/
// Illegal "use strict" directive in function with non-simple parameter list.
// This is a syntax error since ES2016.
function foo(a = 1) {
"use strict";
}
// We cannot write "use strict" directive in this function.
// So we have to wrap this function with a function with "use strict" directive.
function foo(a = 1) {
}
Examples of correct code for this rule with the "function"
option:
/*eslint strict: ["error", "function"]*/
function foo() {
"use strict";
}
(function() {
"use strict";
function bar() {
}
function baz(a = 1) {
}
}());
var foo = (function() {
"use strict";
return function foo(a = 1) {
};
}());
never
Examples of incorrect code for this rule with the "never"
option:
/*eslint strict: ["error", "never"]*/
"use strict";
function foo() {
}
/*eslint strict: ["error", "never"]*/
function foo() {
"use strict";
}
Examples of correct code for this rule with the "never"
option:
/*eslint strict: ["error", "never"]*/
function foo() {
}
earlier default (removed)
(removed) The default option (that is, no string option specified) for this rule was removed in ESLint v1.0. The "function"
option is most similar to the removed option.
This option ensures that all functions are executed in strict mode. A strict mode directive must be present in global code or in every top-level function declaration or expression. It does not concern itself with unnecessary strict mode directives in nested functions that are already strict, nor with multiple strict mode directives at the same level.
Examples of incorrect code for this rule with the earlier default option which has been removed:
// "strict": "error"
function foo() {
}
// "strict": "error"
(function() {
function bar() {
"use strict";
}
}());
Examples of correct code for this rule with the earlier default option which has been removed:
// "strict": "error"
"use strict";
function foo() {
}
// "strict": "error"
function foo() {
"use strict";
}
// "strict": "error"
(function() {
"use strict";
function bar() {
"use strict";
}
}());
When Not To Use It
In a codebase that has both strict and non-strict code, either turn this rule off, or selectively disable it where necessary. For example, functions referencing arguments.callee
are invalid in strict mode. A full list of strict mode differences is available on MDN.
Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
return sprintf('%.' + (~~precision) + 'f', val);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
intpart = Math.abs(~~val);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected string concatenation. Open
return numeral(val).format(fmt + ' ib');
- Read upRead up
- Create a ticketCreate a ticket
- 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 format = {
- Read upRead up
- Create a ticketCreate a ticket
- 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/
There should be no space before ']'. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow or enforce spaces inside of brackets (array-bracket-spacing)
A number of style guides require or disallow spaces between array brackets and other tokens. This rule applies to both array literals and destructuring assignments (ECMAScript 6).
/*eslint-env es6*/
var arr = [ 'foo', 'bar' ];
var [ x, y ] = z;
var arr = ['foo', 'bar'];
var [x,y] = z;
Rule Details
This rule enforces consistent spacing inside array brackets.
Options
This rule has a string option:
-
"never"
(default) disallows spaces inside array brackets -
"always"
requires one or more spaces or newlines inside array brackets
This rule has an object option for exceptions to the "never"
option:
-
"singleValue": true
requires one or more spaces or newlines inside brackets of array literals that contain a single element -
"objectsInArrays": true
requires one or more spaces or newlines between brackets of array literals and braces of their object literal elements[ {
or} ]
-
"arraysInArrays": true
requires one or more spaces or newlines between brackets of array literals and brackets of their array literal elements[ [
or] ]
This rule has an object option for exceptions to the "always"
option:
-
"singleValue": false
disallows spaces inside brackets of array literals that contain a single element -
"objectsInArrays": false
disallows spaces between brackets of array literals and braces of their object literal elements[{
or}]
-
"arraysInArrays": false
disallows spaces between brackets of array literals and brackets of their array literal elements[[
or]]
This rule has built-in exceptions:
-
"never"
(and also the exceptions to the"always"
option) allows newlines inside array brackets, because this is a common pattern -
"always"
does not require spaces or newlines in empty array literals[]
never
Examples of incorrect code for this rule with the default "never"
option:
/*eslint array-bracket-spacing: ["error", "never"]*/
/*eslint-env es6*/
var arr = [ 'foo', 'bar' ];
var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar'];
var arr = [[ 'foo' ], 'bar'];
var arr = [ 'foo',
'bar'
];
var [ x, y ] = z;
var [ x,y ] = z;
var [ x, ...y ] = z;
var [ ,,x, ] = z;
Examples of correct code for this rule with the default "never"
option:
/*eslint array-bracket-spacing: ["error", "never"]*/
/*eslint-env es6*/
var arr = [];
var arr = ['foo', 'bar', 'baz'];
var arr = [['foo'], 'bar', 'baz'];
var arr = [
'foo',
'bar',
'baz'
];
var arr = ['foo',
'bar'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
always
Examples of incorrect code for this rule with the "always"
option:
/*eslint array-bracket-spacing: ["error", "always"]*/
/*eslint-env es6*/
var arr = ['foo', 'bar'];
var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar' ];
var arr = ['foo',
'bar'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
Examples of correct code for this rule with the "always"
option:
/*eslint array-bracket-spacing: ["error", "always"]*/
/*eslint-env es6*/
var arr = [];
var arr = [ 'foo', 'bar', 'baz' ];
var arr = [ [ 'foo' ], 'bar', 'baz' ];
var arr = [ 'foo',
'bar'
];
var arr = [
'foo',
'bar' ];
var arr = [
'foo',
'bar',
'baz'
];
var [ x, y ] = z;
var [ x,y ] = z;
var [ x, ...y ] = z;
var [ ,,x, ] = z;
singleValue
Examples of incorrect code for this rule with the "always", { "singleValue": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "singleValue": false }]*/
var foo = [ 'foo' ];
var foo = [ 'foo'];
var foo = ['foo' ];
var foo = [ 1 ];
var foo = [ 1];
var foo = [1 ];
var foo = [ [ 1, 2 ] ];
var foo = [ { 'foo': 'bar' } ];
Examples of correct code for this rule with the "always", { "singleValue": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "singleValue": false }]*/
var foo = ['foo'];
var foo = [1];
var foo = [[ 1, 1 ]];
var foo = [{ 'foo': 'bar' }];
objectsInArrays
Examples of incorrect code for this rule with the "always", { "objectsInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "objectsInArrays": false }]*/
var arr = [ { 'foo': 'bar' } ];
var arr = [ {
'foo': 'bar'
} ]
Examples of correct code for this rule with the "always", { "objectsInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "objectsInArrays": false }]*/
var arr = [{ 'foo': 'bar' }];
var arr = [{
'foo': 'bar'
}];
arraysInArrays
Examples of incorrect code for this rule with the "always", { "arraysInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "arraysInArrays": false }]*/
var arr = [ [ 1, 2 ], 2, 3, 4 ];
var arr = [ [ 1, 2 ], 2, [ 3, 4 ] ];
Examples of correct code for this rule with the "always", { "arraysInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "arraysInArrays": false }]*/
var arr = [[ 1, 2 ], 2, 3, 4 ];
var arr = [[ 1, 2 ], 2, [ 3, 4 ]];
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between array brackets.
Related Rules
- [space-in-parens](space-in-parens.md)
- [object-curly-spacing](object-curly-spacing.md)
- [computed-property-spacing](computed-property-spacing.md) Source: http://eslint.org/docs/rules/
Expected method shorthand. Open
mbytes_to_human_size: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var etime;
- Read upRead up
- Create a ticketCreate a ticket
- 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 names = [__('Day'), __('Hour'), __('Minute'), __('Second')];
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 var, use let or const instead. Open
var days = ~~(val / 86400);
- Read upRead up
- Create a ticketCreate a ticket
- 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 minutes = ~~((val / 60) - (hours * 60) - (days * 1440));
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
Identifier 'apply_format_precision' is not in camel case. Open
function apply_format_precision(val, precision) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
Unexpected string concatenation. Open
s += sprintf(precision + ' MHz', val / 1000000);
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Identifier 'remove_right_side_zeros' is not in camel case. Open
function remove_right_side_zeros(str_val, separator) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require CamelCase (camelcase)
When it comes to naming variables, style guides generally fall into one of two camps: camelcase (variableName
) and underscores (variable_name
). This rule focuses on using the camelcase approach. If your style guide calls for camelCasing your variable names, then this rule is for you!
Rule Details
This rule looks for any underscores (_
) located within the source code. It ignores leading and trailing underscores and only checks those in the middle of a variable name. If ESLint decides that the variable is a constant (all uppercase), then no warning will be thrown. Otherwise, a warning will be thrown. This rule only flags definitions and assignments but not function calls. In case of ES6 import
statements, this rule only targets the name of the variable that will be imported into the local module scope.
Options
This rule has an object option:
-
"properties": "always"
(default) enforces camelcase style for property names -
"properties": "never"
does not check property names -
"ignoreDestructuring": false
(default) enforces camelcase style for destructured identifiers -
"ignoreDestructuring": true
does not check destructured identifiers -
allow
(string[]
) list of properties to accept. Accept regex.
properties: "always"
Examples of incorrect code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased } from "external-module"
var my_favorite_color = "#112C85";
function do_something() {
// ...
}
obj.do_something = function() {
// ...
};
function foo({ no_camelcased }) {
// ...
};
function foo({ isCamelcased: no_camelcased }) {
// ...
}
function foo({ no_camelcased = 'default value' }) {
// ...
};
var obj = {
my_pref: 1
};
var { category_id = 1 } = query;
var { foo: no_camelcased } = bar;
var { foo: bar_baz = 1 } = quz;
Examples of correct code for this rule with the default { "properties": "always" }
option:
/*eslint camelcase: "error"*/
import { no_camelcased as camelCased } from "external-module";
var myFavoriteColor = "#112C85";
var _myFavoriteColor = "#112C85";
var myFavoriteColor_ = "#112C85";
var MY_FAVORITE_COLOR = "#112C85";
var foo = bar.baz_boom;
var foo = { qux: bar.baz_boom };
obj.do_something();
do_something();
new do_something();
var { category_id: category } = query;
function foo({ isCamelCased }) {
// ...
};
function foo({ isCamelCased: isAlsoCamelCased }) {
// ...
}
function foo({ isCamelCased = 'default value' }) {
// ...
};
var { categoryId = 1 } = query;
var { foo: isCamelCased } = bar;
var { foo: isCamelCased = 1 } = quz;
properties: "never"
Examples of correct code for this rule with the { "properties": "never" }
option:
/*eslint camelcase: ["error", {properties: "never"}]*/
var obj = {
my_pref: 1
};
ignoreDestructuring: false
Examples of incorrect code for this rule with the default { "ignoreDestructuring": false }
option:
/*eslint camelcase: "error"*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
var { category_id: category_alias } = query;
var { category_id: categoryId, ...other_props } = query;
ignoreDestructuring: true
Examples of incorrect code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id: category_alias } = query;
var { category_id, ...other_props } = query;
Examples of correct code for this rule with the { "ignoreDestructuring": true }
option:
/*eslint camelcase: ["error", {ignoreDestructuring: true}]*/
var { category_id } = query;
var { category_id = 1 } = query;
var { category_id: category_id } = query;
allow
Examples of correct code for this rule with the allow
option:
/*eslint camelcase: ["error", {allow: ["UNSAFE_componentWillMount"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
/*eslint camelcase: ["error", {allow: ["^UNSAFE_"]}]*/
function UNSAFE_componentWillMount() {
// ...
}
function UNSAFE_componentWillMount() {
// ...
}
When Not To Use It
If you have established coding standards using a different naming convention (separating words with underscores), turn this rule off. Source: http://eslint.org/docs/rules/
There should be no space after '['. Open
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow or enforce spaces inside of brackets (array-bracket-spacing)
A number of style guides require or disallow spaces between array brackets and other tokens. This rule applies to both array literals and destructuring assignments (ECMAScript 6).
/*eslint-env es6*/
var arr = [ 'foo', 'bar' ];
var [ x, y ] = z;
var arr = ['foo', 'bar'];
var [x,y] = z;
Rule Details
This rule enforces consistent spacing inside array brackets.
Options
This rule has a string option:
-
"never"
(default) disallows spaces inside array brackets -
"always"
requires one or more spaces or newlines inside array brackets
This rule has an object option for exceptions to the "never"
option:
-
"singleValue": true
requires one or more spaces or newlines inside brackets of array literals that contain a single element -
"objectsInArrays": true
requires one or more spaces or newlines between brackets of array literals and braces of their object literal elements[ {
or} ]
-
"arraysInArrays": true
requires one or more spaces or newlines between brackets of array literals and brackets of their array literal elements[ [
or] ]
This rule has an object option for exceptions to the "always"
option:
-
"singleValue": false
disallows spaces inside brackets of array literals that contain a single element -
"objectsInArrays": false
disallows spaces between brackets of array literals and braces of their object literal elements[{
or}]
-
"arraysInArrays": false
disallows spaces between brackets of array literals and brackets of their array literal elements[[
or]]
This rule has built-in exceptions:
-
"never"
(and also the exceptions to the"always"
option) allows newlines inside array brackets, because this is a common pattern -
"always"
does not require spaces or newlines in empty array literals[]
never
Examples of incorrect code for this rule with the default "never"
option:
/*eslint array-bracket-spacing: ["error", "never"]*/
/*eslint-env es6*/
var arr = [ 'foo', 'bar' ];
var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar'];
var arr = [[ 'foo' ], 'bar'];
var arr = [ 'foo',
'bar'
];
var [ x, y ] = z;
var [ x,y ] = z;
var [ x, ...y ] = z;
var [ ,,x, ] = z;
Examples of correct code for this rule with the default "never"
option:
/*eslint array-bracket-spacing: ["error", "never"]*/
/*eslint-env es6*/
var arr = [];
var arr = ['foo', 'bar', 'baz'];
var arr = [['foo'], 'bar', 'baz'];
var arr = [
'foo',
'bar',
'baz'
];
var arr = ['foo',
'bar'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
always
Examples of incorrect code for this rule with the "always"
option:
/*eslint array-bracket-spacing: ["error", "always"]*/
/*eslint-env es6*/
var arr = ['foo', 'bar'];
var arr = ['foo', 'bar' ];
var arr = [ ['foo'], 'bar' ];
var arr = ['foo',
'bar'
];
var arr = [
'foo',
'bar'];
var [x, y] = z;
var [x,y] = z;
var [x, ...y] = z;
var [,,x,] = z;
Examples of correct code for this rule with the "always"
option:
/*eslint array-bracket-spacing: ["error", "always"]*/
/*eslint-env es6*/
var arr = [];
var arr = [ 'foo', 'bar', 'baz' ];
var arr = [ [ 'foo' ], 'bar', 'baz' ];
var arr = [ 'foo',
'bar'
];
var arr = [
'foo',
'bar' ];
var arr = [
'foo',
'bar',
'baz'
];
var [ x, y ] = z;
var [ x,y ] = z;
var [ x, ...y ] = z;
var [ ,,x, ] = z;
singleValue
Examples of incorrect code for this rule with the "always", { "singleValue": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "singleValue": false }]*/
var foo = [ 'foo' ];
var foo = [ 'foo'];
var foo = ['foo' ];
var foo = [ 1 ];
var foo = [ 1];
var foo = [1 ];
var foo = [ [ 1, 2 ] ];
var foo = [ { 'foo': 'bar' } ];
Examples of correct code for this rule with the "always", { "singleValue": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "singleValue": false }]*/
var foo = ['foo'];
var foo = [1];
var foo = [[ 1, 1 ]];
var foo = [{ 'foo': 'bar' }];
objectsInArrays
Examples of incorrect code for this rule with the "always", { "objectsInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "objectsInArrays": false }]*/
var arr = [ { 'foo': 'bar' } ];
var arr = [ {
'foo': 'bar'
} ]
Examples of correct code for this rule with the "always", { "objectsInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "objectsInArrays": false }]*/
var arr = [{ 'foo': 'bar' }];
var arr = [{
'foo': 'bar'
}];
arraysInArrays
Examples of incorrect code for this rule with the "always", { "arraysInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "arraysInArrays": false }]*/
var arr = [ [ 1, 2 ], 2, 3, 4 ];
var arr = [ [ 1, 2 ], 2, [ 3, 4 ] ];
Examples of correct code for this rule with the "always", { "arraysInArrays": false }
options:
/*eslint array-bracket-spacing: ["error", "always", { "arraysInArrays": false }]*/
var arr = [[ 1, 2 ], 2, 3, 4 ];
var arr = [[ 1, 2 ], 2, [ 3, 4 ]];
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between array brackets.
Related Rules
- [space-in-parens](space-in-parens.md)
- [object-curly-spacing](object-curly-spacing.md)
- [computed-property-spacing](computed-property-spacing.md) Source: http://eslint.org/docs/rules/
Unexpected use of '~'. Open
val = ~~val;
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var seconds = ~~(val % 60);
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected function expression. Open
var sidx = _.findIndex(arr, function(a) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require using arrow functions for callbacks (prefer-arrow-callback)
Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments.
For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior.
Additionally, arrow functions are:
less verbose, and easier to reason about.
bound lexically regardless of where or when they are invoked.
Rule Details
This rule locates function expressions used as callbacks or function arguments. An error will be produced for any that could be replaced by an arrow function without changing the result.
The following examples will be flagged:
/* eslint prefer-arrow-callback: "error" */
foo(function(a) { return a; }); // ERROR
// prefer: foo(a => a)
foo(function() { return this.a; }.bind(this)); // ERROR
// prefer: foo(() => this.a)
Instances where an arrow function would not produce identical results will be ignored.
The following examples will not be flagged:
/* eslint prefer-arrow-callback: "error" */
/* eslint-env es6 */
// arrow function callback
foo(a => a); // OK
// generator as callback
foo(function*() { yield; }); // OK
// function expression not used as callback or function argument
var foo = function foo(a) { return a; }; // OK
// unbound function expression callback
foo(function() { return this.a; }); // OK
// recursive named function callback
foo(function bar(n) { return n && n + bar(n - 1); }); // OK
Options
Access further control over this rule's behavior via an options object.
Default: { allowNamedFunctions: false, allowUnboundThis: true }
allowNamedFunctions
By default { "allowNamedFunctions": false }
, this boolean
option prohibits using named functions as callbacks or function arguments.
Changing this value to true
will reverse this option's behavior by allowing use of named functions without restriction.
{ "allowNamedFunctions": true }
will not flag the following example:
/* eslint prefer-arrow-callback: [ "error", { "allowNamedFunctions": true } ] */
foo(function bar() {});
allowUnboundThis
By default { "allowUnboundThis": true }
, this boolean
option allows function expressions containing this
to be used as callbacks, as long as the function in question has not been explicitly bound.
When set to false
this option prohibits the use of function expressions as callbacks or function arguments entirely, without exception.
{ "allowUnboundThis": false }
will flag the following examples:
/* eslint prefer-arrow-callback: [ "error", { "allowUnboundThis": false } ] */
/* eslint-env es6 */
foo(function() { this.a; });
foo(function() { (() => this); });
someArray.map(function(itm) { return this.doSomething(itm); }, someObject);
When Not To Use It
In environments that have not yet adopted ES6 language features (ES3/5).
In ES6+ environments that allow the use of function expressions when describing callbacks or function arguments.
Further Reading
Unexpected var, use let or const instead. Open
var values = _.slice(arr, sidx, sidx + 2);
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var sidx = _.findIndex(arr, function(a) {
- Read upRead up
- Create a ticketCreate a ticket
- 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 sep = '';
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 var, use let or const instead. Open
var result = String(val);
- Read upRead up
- Create a ticketCreate a ticket
- 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 seconds = ~~(val % 60);
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
All 'var' declarations must be at the top of the function scope. Open
var result = '';
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 use of '~'. Open
var seconds = ~~(val % 60);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var sep = '';
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected var, use let or const instead. Open
var sfx = names[sidx + i];
- Read upRead up
- Create a ticketCreate a ticket
- 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 sidx = _.findIndex(arr, function(a) {
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
Expected method shorthand. Open
string_truncate: function(val, options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var result = String(val);
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 use of '~'. Open
var minutes = ~~((val / 60) - (hours * 60) - (days * 1440));
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var result = '';
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected use of '~'. Open
var minutes = ~~((val / 60) - (hours * 60) - (days * 1440));
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var arr = [days, hours, minutes, seconds];
- Read upRead up
- Create a ticketCreate a ticket
- 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/
Unexpected function expression. Open
values.forEach(function(val, i) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require using arrow functions for callbacks (prefer-arrow-callback)
Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments.
For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior.
Additionally, arrow functions are:
less verbose, and easier to reason about.
bound lexically regardless of where or when they are invoked.
Rule Details
This rule locates function expressions used as callbacks or function arguments. An error will be produced for any that could be replaced by an arrow function without changing the result.
The following examples will be flagged:
/* eslint prefer-arrow-callback: "error" */
foo(function(a) { return a; }); // ERROR
// prefer: foo(a => a)
foo(function() { return this.a; }.bind(this)); // ERROR
// prefer: foo(() => this.a)
Instances where an arrow function would not produce identical results will be ignored.
The following examples will not be flagged:
/* eslint prefer-arrow-callback: "error" */
/* eslint-env es6 */
// arrow function callback
foo(a => a); // OK
// generator as callback
foo(function*() { yield; }); // OK
// function expression not used as callback or function argument
var foo = function foo(a) { return a; }; // OK
// unbound function expression callback
foo(function() { return this.a; }); // OK
// recursive named function callback
foo(function bar(n) { return n && n + bar(n - 1); }); // OK
Options
Access further control over this rule's behavior via an options object.
Default: { allowNamedFunctions: false, allowUnboundThis: true }
allowNamedFunctions
By default { "allowNamedFunctions": false }
, this boolean
option prohibits using named functions as callbacks or function arguments.
Changing this value to true
will reverse this option's behavior by allowing use of named functions without restriction.
{ "allowNamedFunctions": true }
will not flag the following example:
/* eslint prefer-arrow-callback: [ "error", { "allowNamedFunctions": true } ] */
foo(function bar() {});
allowUnboundThis
By default { "allowUnboundThis": true }
, this boolean
option allows function expressions containing this
to be used as callbacks, as long as the function in question has not been explicitly bound.
When set to false
this option prohibits the use of function expressions as callbacks or function arguments entirely, without exception.
{ "allowUnboundThis": false }
will flag the following examples:
/* eslint prefer-arrow-callback: [ "error", { "allowUnboundThis": false } ] */
/* eslint-env es6 */
foo(function() { this.a; });
foo(function() { (() => this); });
someArray.map(function(itm) { return this.doSomething(itm); }, someObject);
When Not To Use It
In environments that have not yet adopted ES6 language features (ES3/5).
In ES6+ environments that allow the use of function expressions when describing callbacks or function arguments.
Further Reading
Unexpected function expression. Open
window.ManageIQ.charts.formatters = _.mapValues(format, function(fn) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Require using arrow functions for callbacks (prefer-arrow-callback)
Arrow functions can be an attractive alternative to function expressions for callbacks or function arguments.
For example, arrow functions are automatically bound to their surrounding scope/context. This provides an alternative to the pre-ES6 standard of explicitly binding function expressions to achieve similar behavior.
Additionally, arrow functions are:
less verbose, and easier to reason about.
bound lexically regardless of where or when they are invoked.
Rule Details
This rule locates function expressions used as callbacks or function arguments. An error will be produced for any that could be replaced by an arrow function without changing the result.
The following examples will be flagged:
/* eslint prefer-arrow-callback: "error" */
foo(function(a) { return a; }); // ERROR
// prefer: foo(a => a)
foo(function() { return this.a; }.bind(this)); // ERROR
// prefer: foo(() => this.a)
Instances where an arrow function would not produce identical results will be ignored.
The following examples will not be flagged:
/* eslint prefer-arrow-callback: "error" */
/* eslint-env es6 */
// arrow function callback
foo(a => a); // OK
// generator as callback
foo(function*() { yield; }); // OK
// function expression not used as callback or function argument
var foo = function foo(a) { return a; }; // OK
// unbound function expression callback
foo(function() { return this.a; }); // OK
// recursive named function callback
foo(function bar(n) { return n && n + bar(n - 1); }); // OK
Options
Access further control over this rule's behavior via an options object.
Default: { allowNamedFunctions: false, allowUnboundThis: true }
allowNamedFunctions
By default { "allowNamedFunctions": false }
, this boolean
option prohibits using named functions as callbacks or function arguments.
Changing this value to true
will reverse this option's behavior by allowing use of named functions without restriction.
{ "allowNamedFunctions": true }
will not flag the following example:
/* eslint prefer-arrow-callback: [ "error", { "allowNamedFunctions": true } ] */
foo(function bar() {});
allowUnboundThis
By default { "allowUnboundThis": true }
, this boolean
option allows function expressions containing this
to be used as callbacks, as long as the function in question has not been explicitly bound.
When set to false
this option prohibits the use of function expressions as callbacks or function arguments entirely, without exception.
{ "allowUnboundThis": false }
will flag the following examples:
/* eslint prefer-arrow-callback: [ "error", { "allowUnboundThis": false } ] */
/* eslint-env es6 */
foo(function() { this.a; });
foo(function() { (() => this); });
someArray.map(function(itm) { return this.doSomething(itm); }, someObject);
When Not To Use It
In environments that have not yet adopted ES6 language features (ES3/5).
In ES6+ environments that allow the use of function expressions when describing callbacks or function arguments.
Further Reading
Expected method shorthand. Open
large_number_to_exponential_form: function(val, _options) {
- Read upRead up
- Create a ticketCreate a ticket
- 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
};
See Also:
-
no-useless-rename
which disallows renaming import, export, and destructured assignments to the same name.
Options
The rule takes an option which specifies when it should be applied. It can be set to one of the following values:
-
"always"
(default) expects that the shorthand will be used whenever possible. -
"methods"
ensures the method shorthand is used (also applies to generators). -
"properties"
ensures the property shorthand is used (where the key and variable name match). -
"never"
ensures that no property or method shorthand is used in any object literal. -
"consistent"
ensures that either all shorthand or all long-form will be used in an object literal. -
"consistent-as-needed"
ensures that either all shorthand or all long-form will be used in an object literal, but ensures all shorthand whenever possible.
You can set the option in configuration like this:
{
"object-shorthand": ["error", "always"]
}
Additionally, the rule takes an optional object configuration:
-
"avoidQuotes": true
indicates that long-form syntax is preferred whenever the object key is a string literal (default:false
). Note that this option can only be enabled when the string option is set to"always"
,"methods"
, or"properties"
. -
"ignoreConstructors": true
can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
. -
"avoidExplicitReturnArrows": true
indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to"always"
or"methods"
.
avoidQuotes
{
"object-shorthand": ["error", "always", { "avoidQuotes": true }]
}
Example of incorrect code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz"() {}
};
Example of correct code for this rule with the "always", { "avoidQuotes": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/
var foo = {
"bar-baz": function() {},
"qux": qux
};
ignoreConstructors
{
"object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}
Example of correct code for this rule with the "always", { "ignoreConstructors": true }
option:
/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/
var foo = {
ConstructorFunction: function() {}
};
avoidExplicitReturnArrows
{
"object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}
Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo: (bar, baz) => {
return bar + baz;
},
qux: (foobar) => {
return foobar * 2;
}
};
Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true }
option:
/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/
var foo = {
foo(bar, baz) {
return bar + baz;
},
qux: foobar => foobar * 2
};
Example of incorrect code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a,
b: "foo",
};
Examples of correct code for this rule with the "consistent"
option:
/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: "foo"
};
var bar = {
a,
b,
};
Example of incorrect code with the "consistent-as-needed"
option, which is very similar to "consistent"
:
/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/
var foo = {
a: a,
b: b,
};
When Not To Use It
Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.
Further Reading
Object initializer - MDN Source: http://eslint.org/docs/rules/
All 'var' declarations must be at the top of the function scope. Open
var arr = [days, hours, minutes, seconds];
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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
All 'var' declarations must be at the top of the function scope. Open
var values = _.slice(arr, sidx, sidx + 2);
- Read upRead up
- Create a ticketCreate a ticket
- 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 behavior 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 string concatenation. Open
return (result.length > options.length) ? result.substr(0, options.length) + '...' : val;
- Read upRead up
- Create a ticketCreate a ticket
- 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 use of '~'. Open
var seconds = ~~(val % 60);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow bitwise operators (no-bitwise)
The use of bitwise operators in JavaScript is very rare and often &
or |
is simply a mistyped &&
or ||
, which will lead to unexpected behavior.
var x = y | z;
Rule Details
This rule disallows bitwise operators.
Examples of incorrect code for this rule:
/*eslint no-bitwise: "error"*/
var x = y | z;
var x = y & z;
var x = y ^ z;
var x = ~ z;
var x = y << z;
var x = y >> z;
var x = y >>> z;
x |= y;
x &= y;
x ^= y;
x <<= y;
x >>= y;
x >>>= y;
Examples of correct code for this rule:
/*eslint no-bitwise: "error"*/
var x = y || z;
var x = y && z;
var x = y > z;
var x = y < z;
x += y;
Options
This rule has an object option:
-
"allow"
: Allows a list of bitwise operators to be used as exceptions. -
"int32Hint"
: Allows the use of bitwise OR in|0
pattern for type casting.
allow
Examples of correct code for this rule with the { "allow": ["~"] }
option:
/*eslint no-bitwise: ["error", { "allow": ["~"] }] */
~[1,2,3].indexOf(1) === -1;
int32Hint
Examples of correct code for this rule with the { "int32Hint": true }
option:
/*eslint no-bitwise: ["error", { "int32Hint": true }] */
var b = a|0;
Source: http://eslint.org/docs/rules/
Multiple spaces found before '='. Open
var days = ~~(val / 86400);
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow multiple spaces (no-multi-spaces)
Multiple spaces in a row that are not used for indentation are typically mistakes. For example:
if(foo === "bar") {}
It's hard to tell, but there are two spaces between foo
and ===
. Multiple spaces such as this are generally frowned upon in favor of single spaces:
if(foo === "bar") {}
Rule Details
This rule aims to disallow multiple whitespace around logical expressions, conditional expressions, declarations, array elements, object properties, sequences and function parameters.
Examples of incorrect code for this rule:
/*eslint no-multi-spaces: "error"*/
var a = 1;
if(foo === "bar") {}
a << b
var arr = [1, 2];
a ? b: c
Examples of correct code for this rule:
/*eslint no-multi-spaces: "error"*/
var a = 1;
if(foo === "bar") {}
a << b
var arr = [1, 2];
a ? b: c
Options
This rule's configuration consists of an object with the following properties:
-
"ignoreEOLComments": true
(defaults tofalse
) ignores multiple spaces before comments that occur at the end of lines -
"exceptions": { "Property": true }
("Property"
is the only node specified by default) specifies nodes to ignore
ignoreEOLComments
Examples of incorrect code for this rule with the { "ignoreEOLComments": false }
(default) option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: false }]*/
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
Examples of correct code for this rule with the { "ignoreEOLComments": false }
(default) option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: false }]*/
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
Examples of correct code for this rule with the { "ignoreEOLComments": true }
option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: true }]*/
var x = 5; // comment
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
var x = 5; /* multiline
* comment
*/
exceptions
To avoid contradictions with other rules that require multiple spaces, this rule has an exceptions
option to ignore certain nodes.
This option is an object that expects property names to be AST node types as defined by ESTree. The easiest way to determine the node types for exceptions
is to use the online demo.
Only the Property
node type is ignored by default, because for the [key-spacing](key-spacing.md) rule some alignment options require multiple spaces in properties of object literals.
Examples of correct code for the default "exceptions": { "Property": true }
option:
/*eslint no-multi-spaces: "error"*/
/*eslint key-spacing: ["error", { align: "value" }]*/
var obj = {
first: "first",
second: "second"
};
Examples of incorrect code for the "exceptions": { "Property": false }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "Property": false } }]*/
/*eslint key-spacing: ["error", { align: "value" }]*/
var obj = {
first: "first",
second: "second"
};
Examples of correct code for the "exceptions": { "BinaryExpression": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "BinaryExpression": true } }]*/
var a = 1 * 2;
Examples of correct code for the "exceptions": { "VariableDeclarator": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "VariableDeclarator": true } }]*/
var someVar = 'foo';
var someOtherVar = 'barBaz';
Examples of correct code for the "exceptions": { "ImportDeclaration": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "ImportDeclaration": true } }]*/
import mod from 'mod';
import someOtherMod from 'some-other-mod';
When Not To Use It
If you don't want to check and disallow multiple spaces, then you should turn this rule off.
Related Rules
- [key-spacing](key-spacing.md)
- [space-infix-ops](space-infix-ops.md)
- [space-in-brackets](space-in-brackets.md) (deprecated)
- [space-in-parens](space-in-parens.md)
- [space-after-keywords](space-after-keywords.md)
- [space-unary-ops](space-unary-ops.md)
- [space-return-throw-case](space-return-throw-case.md) Source: http://eslint.org/docs/rules/
Unary operator '--' used. Open
while (p-- > 0) {
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
disallow the unary operators ++
and --
(no-plusplus)
Because the unary ++
and --
operators are subject to automatic semicolon insertion, differences in whitespace can change semantics of source code.
var i = 10;
var j = 20;
i ++
j
// i = 11, j = 20
var i = 10;
var j = 20;
i
++
j
// i = 10, j = 21
Rule Details
This rule disallows the unary operators ++
and --
.
Examples of incorrect code for this rule:
/*eslint no-plusplus: "error"*/
var foo = 0;
foo++;
var bar = 42;
bar--;
for (i = 0; i < l; i++) {
return;
}
Examples of correct code for this rule:
/*eslint no-plusplus: "error"*/
var foo = 0;
foo += 1;
var bar = 42;
bar -= 1;
for (i = 0; i < l; i += 1) {
return;
}
Options
This rule has an object option.
-
"allowForLoopAfterthoughts": true
allows unary operators++
and--
in the afterthought (final expression) of afor
loop.
allowForLoopAfterthoughts
Examples of correct code for this rule with the { "allowForLoopAfterthoughts": true }
option:
/*eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }]*/
for (i = 0; i < l; i++) {
return;
}
for (i = 0; i < l; i--) {
return;
}
Source: http://eslint.org/docs/rules/
Multiple spaces found before '// Precision o...'. Open
var av_options = { precision: options.precision || 0 }; // Precision of 0 returns the significant digits
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow multiple spaces (no-multi-spaces)
Multiple spaces in a row that are not used for indentation are typically mistakes. For example:
if(foo === "bar") {}
It's hard to tell, but there are two spaces between foo
and ===
. Multiple spaces such as this are generally frowned upon in favor of single spaces:
if(foo === "bar") {}
Rule Details
This rule aims to disallow multiple whitespace around logical expressions, conditional expressions, declarations, array elements, object properties, sequences and function parameters.
Examples of incorrect code for this rule:
/*eslint no-multi-spaces: "error"*/
var a = 1;
if(foo === "bar") {}
a << b
var arr = [1, 2];
a ? b: c
Examples of correct code for this rule:
/*eslint no-multi-spaces: "error"*/
var a = 1;
if(foo === "bar") {}
a << b
var arr = [1, 2];
a ? b: c
Options
This rule's configuration consists of an object with the following properties:
-
"ignoreEOLComments": true
(defaults tofalse
) ignores multiple spaces before comments that occur at the end of lines -
"exceptions": { "Property": true }
("Property"
is the only node specified by default) specifies nodes to ignore
ignoreEOLComments
Examples of incorrect code for this rule with the { "ignoreEOLComments": false }
(default) option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: false }]*/
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
Examples of correct code for this rule with the { "ignoreEOLComments": false }
(default) option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: false }]*/
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
Examples of correct code for this rule with the { "ignoreEOLComments": true }
option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: true }]*/
var x = 5; // comment
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
var x = 5; /* multiline
* comment
*/
exceptions
To avoid contradictions with other rules that require multiple spaces, this rule has an exceptions
option to ignore certain nodes.
This option is an object that expects property names to be AST node types as defined by ESTree. The easiest way to determine the node types for exceptions
is to use the online demo.
Only the Property
node type is ignored by default, because for the [key-spacing](key-spacing.md) rule some alignment options require multiple spaces in properties of object literals.
Examples of correct code for the default "exceptions": { "Property": true }
option:
/*eslint no-multi-spaces: "error"*/
/*eslint key-spacing: ["error", { align: "value" }]*/
var obj = {
first: "first",
second: "second"
};
Examples of incorrect code for the "exceptions": { "Property": false }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "Property": false } }]*/
/*eslint key-spacing: ["error", { align: "value" }]*/
var obj = {
first: "first",
second: "second"
};
Examples of correct code for the "exceptions": { "BinaryExpression": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "BinaryExpression": true } }]*/
var a = 1 * 2;
Examples of correct code for the "exceptions": { "VariableDeclarator": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "VariableDeclarator": true } }]*/
var someVar = 'foo';
var someOtherVar = 'barBaz';
Examples of correct code for the "exceptions": { "ImportDeclaration": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "ImportDeclaration": true } }]*/
import mod from 'mod';
import someOtherMod from 'some-other-mod';
When Not To Use It
If you don't want to check and disallow multiple spaces, then you should turn this rule off.
Related Rules
- [key-spacing](key-spacing.md)
- [space-infix-ops](space-infix-ops.md)
- [space-in-brackets](space-in-brackets.md) (deprecated)
- [space-in-parens](space-in-parens.md)
- [space-after-keywords](space-after-keywords.md)
- [space-unary-ops](space-unary-ops.md)
- [space-return-throw-case](space-return-throw-case.md) Source: http://eslint.org/docs/rules/
Multiple spaces found before '='. Open
var hours = ~~((val / 3600) - (days * 24));
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow multiple spaces (no-multi-spaces)
Multiple spaces in a row that are not used for indentation are typically mistakes. For example:
if(foo === "bar") {}
It's hard to tell, but there are two spaces between foo
and ===
. Multiple spaces such as this are generally frowned upon in favor of single spaces:
if(foo === "bar") {}
Rule Details
This rule aims to disallow multiple whitespace around logical expressions, conditional expressions, declarations, array elements, object properties, sequences and function parameters.
Examples of incorrect code for this rule:
/*eslint no-multi-spaces: "error"*/
var a = 1;
if(foo === "bar") {}
a << b
var arr = [1, 2];
a ? b: c
Examples of correct code for this rule:
/*eslint no-multi-spaces: "error"*/
var a = 1;
if(foo === "bar") {}
a << b
var arr = [1, 2];
a ? b: c
Options
This rule's configuration consists of an object with the following properties:
-
"ignoreEOLComments": true
(defaults tofalse
) ignores multiple spaces before comments that occur at the end of lines -
"exceptions": { "Property": true }
("Property"
is the only node specified by default) specifies nodes to ignore
ignoreEOLComments
Examples of incorrect code for this rule with the { "ignoreEOLComments": false }
(default) option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: false }]*/
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
Examples of correct code for this rule with the { "ignoreEOLComments": false }
(default) option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: false }]*/
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
Examples of correct code for this rule with the { "ignoreEOLComments": true }
option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: true }]*/
var x = 5; // comment
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
var x = 5; /* multiline
* comment
*/
exceptions
To avoid contradictions with other rules that require multiple spaces, this rule has an exceptions
option to ignore certain nodes.
This option is an object that expects property names to be AST node types as defined by ESTree. The easiest way to determine the node types for exceptions
is to use the online demo.
Only the Property
node type is ignored by default, because for the [key-spacing](key-spacing.md) rule some alignment options require multiple spaces in properties of object literals.
Examples of correct code for the default "exceptions": { "Property": true }
option:
/*eslint no-multi-spaces: "error"*/
/*eslint key-spacing: ["error", { align: "value" }]*/
var obj = {
first: "first",
second: "second"
};
Examples of incorrect code for the "exceptions": { "Property": false }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "Property": false } }]*/
/*eslint key-spacing: ["error", { align: "value" }]*/
var obj = {
first: "first",
second: "second"
};
Examples of correct code for the "exceptions": { "BinaryExpression": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "BinaryExpression": true } }]*/
var a = 1 * 2;
Examples of correct code for the "exceptions": { "VariableDeclarator": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "VariableDeclarator": true } }]*/
var someVar = 'foo';
var someOtherVar = 'barBaz';
Examples of correct code for the "exceptions": { "ImportDeclaration": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "ImportDeclaration": true } }]*/
import mod from 'mod';
import someOtherMod from 'some-other-mod';
When Not To Use It
If you don't want to check and disallow multiple spaces, then you should turn this rule off.
Related Rules
- [key-spacing](key-spacing.md)
- [space-infix-ops](space-infix-ops.md)
- [space-in-brackets](space-in-brackets.md) (deprecated)
- [space-in-parens](space-in-parens.md)
- [space-after-keywords](space-after-keywords.md)
- [space-unary-ops](space-unary-ops.md)
- [space-return-throw-case](space-return-throw-case.md) Source: http://eslint.org/docs/rules/
Multiple spaces found before '='. Open
var sep = '';
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow multiple spaces (no-multi-spaces)
Multiple spaces in a row that are not used for indentation are typically mistakes. For example:
if(foo === "bar") {}
It's hard to tell, but there are two spaces between foo
and ===
. Multiple spaces such as this are generally frowned upon in favor of single spaces:
if(foo === "bar") {}
Rule Details
This rule aims to disallow multiple whitespace around logical expressions, conditional expressions, declarations, array elements, object properties, sequences and function parameters.
Examples of incorrect code for this rule:
/*eslint no-multi-spaces: "error"*/
var a = 1;
if(foo === "bar") {}
a << b
var arr = [1, 2];
a ? b: c
Examples of correct code for this rule:
/*eslint no-multi-spaces: "error"*/
var a = 1;
if(foo === "bar") {}
a << b
var arr = [1, 2];
a ? b: c
Options
This rule's configuration consists of an object with the following properties:
-
"ignoreEOLComments": true
(defaults tofalse
) ignores multiple spaces before comments that occur at the end of lines -
"exceptions": { "Property": true }
("Property"
is the only node specified by default) specifies nodes to ignore
ignoreEOLComments
Examples of incorrect code for this rule with the { "ignoreEOLComments": false }
(default) option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: false }]*/
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
Examples of correct code for this rule with the { "ignoreEOLComments": false }
(default) option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: false }]*/
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
Examples of correct code for this rule with the { "ignoreEOLComments": true }
option:
/*eslint no-multi-spaces: ["error", { ignoreEOLComments: true }]*/
var x = 5; // comment
var x = 5; // comment
var x = 5; /* multiline
* comment
*/
var x = 5; /* multiline
* comment
*/
exceptions
To avoid contradictions with other rules that require multiple spaces, this rule has an exceptions
option to ignore certain nodes.
This option is an object that expects property names to be AST node types as defined by ESTree. The easiest way to determine the node types for exceptions
is to use the online demo.
Only the Property
node type is ignored by default, because for the [key-spacing](key-spacing.md) rule some alignment options require multiple spaces in properties of object literals.
Examples of correct code for the default "exceptions": { "Property": true }
option:
/*eslint no-multi-spaces: "error"*/
/*eslint key-spacing: ["error", { align: "value" }]*/
var obj = {
first: "first",
second: "second"
};
Examples of incorrect code for the "exceptions": { "Property": false }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "Property": false } }]*/
/*eslint key-spacing: ["error", { align: "value" }]*/
var obj = {
first: "first",
second: "second"
};
Examples of correct code for the "exceptions": { "BinaryExpression": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "BinaryExpression": true } }]*/
var a = 1 * 2;
Examples of correct code for the "exceptions": { "VariableDeclarator": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "VariableDeclarator": true } }]*/
var someVar = 'foo';
var someOtherVar = 'barBaz';
Examples of correct code for the "exceptions": { "ImportDeclaration": true }
option:
/*eslint no-multi-spaces: ["error", { exceptions: { "ImportDeclaration": true } }]*/
import mod from 'mod';
import someOtherMod from 'some-other-mod';
When Not To Use It
If you don't want to check and disallow multiple spaces, then you should turn this rule off.
Related Rules
- [key-spacing](key-spacing.md)
- [space-infix-ops](space-infix-ops.md)
- [space-in-brackets](space-in-brackets.md) (deprecated)
- [space-in-parens](space-in-parens.md)
- [space-after-keywords](space-after-keywords.md)
- [space-unary-ops](space-unary-ops.md)
- [space-return-throw-case](space-return-throw-case.md) Source: http://eslint.org/docs/rules/
Similar blocks of code found in 2 locations. Consider refactoring. Open
currency_with_delimiter: function(val, options) {
options = options || {};
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
val = apply_format_precision(val, options.precision);
val = number_to_currency(val, av_options);
- Read upRead up
- Create a ticketCreate a ticket
Duplicated Code
Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).
Tuning
This issue has a mass of 79.
We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.
The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.
If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.
See codeclimate-duplication
's documentation for more information about tuning the mass threshold in your .codeclimate.yml
.
Refactorings
- Extract Method
- Extract Class
- Form Template Method
- Introduce Null Object
- Pull Up Method
- Pull Up Field
- Substitute Algorithm
Further Reading
- Don't Repeat Yourself on the C2 Wiki
- Duplicated Code on SourceMaking
- Refactoring: Improving the Design of Existing Code by Martin Fowler. Duplicated Code, p76
Similar blocks of code found in 2 locations. Consider refactoring. Open
number_with_delimiter: function(val, options) {
options = options || {};
var av_options = _.pick(options, [ 'delimiter', 'separator' ]);
val = apply_format_precision(val, options.precision);
val = number_with_delimiter(val, av_options);
- Read upRead up
- Create a ticketCreate a ticket
Duplicated Code
Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:
Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.
When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).
Tuning
This issue has a mass of 79.
We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.
The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.
If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.
See codeclimate-duplication
's documentation for more information about tuning the mass threshold in your .codeclimate.yml
.
Refactorings
- Extract Method
- Extract Class
- Form Template Method
- Introduce Null Object
- Pull Up Method
- Pull Up Field
- Substitute Algorithm
Further Reading
- Don't Repeat Yourself on the C2 Wiki
- Duplicated Code on SourceMaking
- Refactoring: Improving the Design of Existing Code by Martin Fowler. Duplicated Code, p76