Unexpected function expression. Open
$.post('retrieve_git_datastore', $('#retrieve-git-datastore-form').serialize(), function(data) {
- 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 use of 'parent'. Open
parent.postMessage({message: data.message}, '*');
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow specific global variables (no-restricted-globals)
Disallowing usage of specific global variables can be useful if you want to allow a set of global variables by enabling an environment, but still want to disallow some of those.
For instance, early Internet Explorer versions exposed the current DOM event as a global variable
event
, but using this variable has been considered as a bad practice for a long time. Restricting
this will make sure this variable isn't used in browser code.
Rule Details
This rule allows you to specify global variable names that you don't want to use in your application.
Options
This rule takes a list of strings, where each string is a global to be restricted:
{
"rules": {
"no-restricted-globals": ["error", "event", "fdescribe"]
}
}
Alternatively, the rule also accepts objects, where the global name and an optional custom message are specified:
{
"rules": {
"no-restricted-globals": [
"error",
{
"name": "event",
"message": "Use local parameter instead."
},
{
"name": "fdescribe",
"message": "Do not commit fdescribe. Use describe instead."
}
]
}
}
Examples of incorrect code for sample "event", "fdescribe"
global variable names:
/*global event, fdescribe*/
/*eslint no-restricted-globals: ["error", "event", "fdescribe"]*/
function onClick() {
console.log(event);
}
fdescribe("foo", function() {
});
Examples of correct code for a sample "event"
global variable name:
/*global event*/
/*eslint no-restricted-globals: ["error", "event"]*/
import event from "event-module";
/*global event*/
/*eslint no-restricted-globals: ["error", "event"]*/
var event = 1;
Examples of incorrect code for a sample "event"
global variable name, along with a custom error message:
/*global event*/
/* eslint no-restricted-globals: ["error", { name: "error", message: "Use local parameter instead." }] */
function onClick() {
console.log(event); // Unexpected global variable 'event'. Use local parameter instead.
}
Related Rules
- [no-restricted-properties](no-restricted-properties.md)
- [no-restricted-syntax](no-restricted-syntax.md) Source: http://eslint.org/docs/rules/
Unexpected use of 'parent'. Open
parent.postMessage(postMessageData, '*');
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
Disallow specific global variables (no-restricted-globals)
Disallowing usage of specific global variables can be useful if you want to allow a set of global variables by enabling an environment, but still want to disallow some of those.
For instance, early Internet Explorer versions exposed the current DOM event as a global variable
event
, but using this variable has been considered as a bad practice for a long time. Restricting
this will make sure this variable isn't used in browser code.
Rule Details
This rule allows you to specify global variable names that you don't want to use in your application.
Options
This rule takes a list of strings, where each string is a global to be restricted:
{
"rules": {
"no-restricted-globals": ["error", "event", "fdescribe"]
}
}
Alternatively, the rule also accepts objects, where the global name and an optional custom message are specified:
{
"rules": {
"no-restricted-globals": [
"error",
{
"name": "event",
"message": "Use local parameter instead."
},
{
"name": "fdescribe",
"message": "Do not commit fdescribe. Use describe instead."
}
]
}
}
Examples of incorrect code for sample "event", "fdescribe"
global variable names:
/*global event, fdescribe*/
/*eslint no-restricted-globals: ["error", "event", "fdescribe"]*/
function onClick() {
console.log(event);
}
fdescribe("foo", function() {
});
Examples of correct code for a sample "event"
global variable name:
/*global event*/
/*eslint no-restricted-globals: ["error", "event"]*/
import event from "event-module";
/*global event*/
/*eslint no-restricted-globals: ["error", "event"]*/
var event = 1;
Examples of incorrect code for a sample "event"
global variable name, along with a custom error message:
/*global event*/
/* eslint no-restricted-globals: ["error", { name: "error", message: "Use local parameter instead." }] */
function onClick() {
console.log(event); // Unexpected global variable 'event'. Use local parameter instead.
}
Related Rules
- [no-restricted-properties](no-restricted-properties.md)
- [no-restricted-syntax](no-restricted-syntax.md) Source: http://eslint.org/docs/rules/
A space is required before '}'. Open
parent.postMessage({message: data.message}, '*');
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
enforce consistent spacing inside braces (object-curly-spacing)
While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces in the following situations:
// simple object literals
var obj = { foo: "bar" };
// nested object literals
var obj = { foo: { zoo: "bar" } };
// destructuring assignment (EcmaScript 6)
var { x, y } = y;
// import/export declarations (EcmaScript 6)
import { foo } from "bar";
export { foo };
Rule Details
This rule enforces consistent spacing inside braces of object literals, destructuring assignments, and import/export specifiers.
Options
This rule has two options, a string option and an object option.
String option:
-
"never"
(default) disallows spacing inside of braces -
"always"
requires spacing inside of braces (except{}
)
Object option:
-
"arraysInObjects": true
requires spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set tonever
) -
"arraysInObjects": false
disallows spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set toalways
) -
"objectsInObjects": true
requires spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set tonever
) -
"objectsInObjects": false
disallows spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set toalways
)
never
Examples of incorrect code for this rule with the default "never"
option:
/*eslint object-curly-spacing: ["error", "never"]*/
var obj = { 'foo': 'bar' };
var obj = {'foo': 'bar' };
var obj = { baz: {'foo': 'qux'}, bar};
var obj = {baz: { 'foo': 'qux'}, bar};
var {x } = y;
import { foo } from 'bar';
Examples of correct code for this rule with the default "never"
option:
/*eslint object-curly-spacing: ["error", "never"]*/
var obj = {'foo': 'bar'};
var obj = {'foo': {'bar': 'baz'}, 'qux': 'quxx'};
var obj = {
'foo': 'bar'
};
var obj = {'foo': 'bar'
};
var obj = {
'foo':'bar'};
var obj = {};
var {x} = y;
import {foo} from 'bar';
always
Examples of incorrect code for this rule with the "always"
option:
/*eslint object-curly-spacing: ["error", "always"]*/
var obj = {'foo': 'bar'};
var obj = {'foo': 'bar' };
var obj = { baz: {'foo': 'qux'}, bar};
var obj = {baz: { 'foo': 'qux' }, bar};
var obj = {'foo': 'bar'
};
var obj = {
'foo':'bar'};
var {x} = y;
import {foo } from 'bar';
Examples of correct code for this rule with the "always"
option:
/*eslint object-curly-spacing: ["error", "always"]*/
var obj = {};
var obj = { 'foo': 'bar' };
var obj = { 'foo': { 'bar': 'baz' }, 'qux': 'quxx' };
var obj = {
'foo': 'bar'
};
var { x } = y;
import { foo } from 'bar';
arraysInObjects
Examples of additional correct code for this rule with the "never", { "arraysInObjects": true }
options:
/*eslint object-curly-spacing: ["error", "never", { "arraysInObjects": true }]*/
var obj = {"foo": [ 1, 2 ] };
var obj = {"foo": [ "baz", "bar" ] };
Examples of additional correct code for this rule with the "always", { "arraysInObjects": false }
options:
/*eslint object-curly-spacing: ["error", "always", { "arraysInObjects": false }]*/
var obj = { "foo": [ 1, 2 ]};
var obj = { "foo": [ "baz", "bar" ]};
objectsInObjects
Examples of additional correct code for this rule with the "never", { "objectsInObjects": true }
options:
/*eslint object-curly-spacing: ["error", "never", { "objectsInObjects": true }]*/
var obj = {"foo": {"baz": 1, "bar": 2} };
Examples of additional correct code for this rule with the "always", { "objectsInObjects": false }
options:
/*eslint object-curly-spacing: ["error", "always", { "objectsInObjects": false }]*/
var obj = { "foo": { "baz": 1, "bar": 2 }};
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between curly braces.
Related Rules
- [array-bracket-spacing](array-bracket-spacing.md)
- [comma-spacing](comma-spacing.md)
- [computed-property-spacing](computed-property-spacing.md)
- [space-in-parens](space-in-parens.md) Source: http://eslint.org/docs/rules/
A space is required after '{'. Open
parent.postMessage({message: data.message}, '*');
- Read upRead up
- Create a ticketCreate a ticket
- Exclude checks
enforce consistent spacing inside braces (object-curly-spacing)
While formatting preferences are very personal, a number of style guides require or disallow spaces between curly braces in the following situations:
// simple object literals
var obj = { foo: "bar" };
// nested object literals
var obj = { foo: { zoo: "bar" } };
// destructuring assignment (EcmaScript 6)
var { x, y } = y;
// import/export declarations (EcmaScript 6)
import { foo } from "bar";
export { foo };
Rule Details
This rule enforces consistent spacing inside braces of object literals, destructuring assignments, and import/export specifiers.
Options
This rule has two options, a string option and an object option.
String option:
-
"never"
(default) disallows spacing inside of braces -
"always"
requires spacing inside of braces (except{}
)
Object option:
-
"arraysInObjects": true
requires spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set tonever
) -
"arraysInObjects": false
disallows spacing inside of braces of objects beginning and/or ending with an array element (applies when the first option is set toalways
) -
"objectsInObjects": true
requires spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set tonever
) -
"objectsInObjects": false
disallows spacing inside of braces of objects beginning and/or ending with an object element (applies when the first option is set toalways
)
never
Examples of incorrect code for this rule with the default "never"
option:
/*eslint object-curly-spacing: ["error", "never"]*/
var obj = { 'foo': 'bar' };
var obj = {'foo': 'bar' };
var obj = { baz: {'foo': 'qux'}, bar};
var obj = {baz: { 'foo': 'qux'}, bar};
var {x } = y;
import { foo } from 'bar';
Examples of correct code for this rule with the default "never"
option:
/*eslint object-curly-spacing: ["error", "never"]*/
var obj = {'foo': 'bar'};
var obj = {'foo': {'bar': 'baz'}, 'qux': 'quxx'};
var obj = {
'foo': 'bar'
};
var obj = {'foo': 'bar'
};
var obj = {
'foo':'bar'};
var obj = {};
var {x} = y;
import {foo} from 'bar';
always
Examples of incorrect code for this rule with the "always"
option:
/*eslint object-curly-spacing: ["error", "always"]*/
var obj = {'foo': 'bar'};
var obj = {'foo': 'bar' };
var obj = { baz: {'foo': 'qux'}, bar};
var obj = {baz: { 'foo': 'qux' }, bar};
var obj = {'foo': 'bar'
};
var obj = {
'foo':'bar'};
var {x} = y;
import {foo } from 'bar';
Examples of correct code for this rule with the "always"
option:
/*eslint object-curly-spacing: ["error", "always"]*/
var obj = {};
var obj = { 'foo': 'bar' };
var obj = { 'foo': { 'bar': 'baz' }, 'qux': 'quxx' };
var obj = {
'foo': 'bar'
};
var { x } = y;
import { foo } from 'bar';
arraysInObjects
Examples of additional correct code for this rule with the "never", { "arraysInObjects": true }
options:
/*eslint object-curly-spacing: ["error", "never", { "arraysInObjects": true }]*/
var obj = {"foo": [ 1, 2 ] };
var obj = {"foo": [ "baz", "bar" ] };
Examples of additional correct code for this rule with the "always", { "arraysInObjects": false }
options:
/*eslint object-curly-spacing: ["error", "always", { "arraysInObjects": false }]*/
var obj = { "foo": [ 1, 2 ]};
var obj = { "foo": [ "baz", "bar" ]};
objectsInObjects
Examples of additional correct code for this rule with the "never", { "objectsInObjects": true }
options:
/*eslint object-curly-spacing: ["error", "never", { "objectsInObjects": true }]*/
var obj = {"foo": {"baz": 1, "bar": 2} };
Examples of additional correct code for this rule with the "always", { "objectsInObjects": false }
options:
/*eslint object-curly-spacing: ["error", "always", { "objectsInObjects": false }]*/
var obj = { "foo": { "baz": 1, "bar": 2 }};
When Not To Use It
You can turn this rule off if you are not concerned with the consistency of spacing between curly braces.
Related Rules
- [array-bracket-spacing](array-bracket-spacing.md)
- [comma-spacing](comma-spacing.md)
- [computed-property-spacing](computed-property-spacing.md)
- [space-in-parens](space-in-parens.md) Source: http://eslint.org/docs/rules/
Unexpected var, use let or const instead. Open
var postMessageData = {
- 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
pollForGitTaskCompletion: function(gitData) {
- 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 function expression. Open
$('.git-retrieve-datastore').click(function(event) {
- 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 messages = data.message;
- 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
retrieveDatastoreClickHandler: function() {
- 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
gitTaskCompleted: function(data) {
- 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 function expression. Open
$.get('check_git_task', gitData, function(data) {
- 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
All 'var' declarations must be at the top of the function scope. Open
var postMessageData = {
- 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
}