Close

Require or disallow named function expressions (func-names)

A pattern that's becoming more common is to give function expressions names to aid in debugging. For example:

Foo.prototype.bar = function bar() {};

Adding the second bar in the above example is optional. If you leave off the function name then when the function throws an exception you are likely to get something similar to anonymous function in the stack trace. If you provide the optional name for a function expression then you will get the name of the function expression in the stack trace.

Rule Details

This rule can enforce or disallow the use of named function expressions.

Options

This rule has a string option:

• "always" (default) requires function expressions to have a name
• "as-needed" requires function expressions to have a name, if the name cannot be assigned automatically in an ES6 environment
• "never" disallows named function expressions, except in recursive functions, where a name is needed

always

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

/*eslint func-names: ["error", "always"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

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

/*eslint func-names: ["error", "always"]*/
 
Foo.prototype.bar = function bar() {};
 
(function bar() {
    // ...
}())

as-needed

ECMAScript 6 introduced a name property on all functions. The value of name is determined by evaluating the code around the function to see if a name can be inferred. For example, a function assigned to a variable will automatically have a name property equal to the name of the variable. The value of name is then used in stack traces for easier debugging.

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

/*eslint func-names: ["error", "as-needed"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

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

/*eslint func-names: ["error", "as-needed"]*/
 
var bar = function() {};
 
(function bar() {
    // ...
}())

never

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

/*eslint func-names: ["error", "never"]*/
 
Foo.prototype.bar = function bar() {};
 
(function bar() {
    // ...
}())

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

/*eslint func-names: ["error", "never"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

Further Reading

• Functions Explained
• Function Names in ES6

Compatibility

• JSCS: requireAnonymousFunctions
• JSCS: disallowAnonymousFunctions Source: http://eslint.org/docs/rules/

Close

Require Brace Style (brace-style)

Brace style is closely related to indent style in programming and describes the placement of braces relative to their control statement and body. There are probably a dozen, if not more, brace styles in the world.

The one true brace style is one of the most common brace styles in JavaScript, in which the opening brace of a block is placed on the same line as its corresponding statement or declaration. For example:

if (foo) {
  bar();
} else {
  baz();
}

One common variant of one true brace style is called Stroustrup, in which the else statements in an if-else construct, as well as catch and finally, must be on its own line after the preceding closing brace. For example:

if (foo) {
  bar();
}
else {
  baz();
}

Another style is called Allman, in which all the braces are expected to be on their own lines without any extra indentation. For example:

if (foo)
{
  bar();
}
else
{
  baz();
}

While no style is considered better than the other, most developers agree that having a consistent style throughout a project is important for its long-term maintainability.

Rule Details

This rule enforces consistent brace style for blocks.

Options

This rule has a string option:

• "1tbs" (default) enforces one true brace style
• "stroustrup" enforces Stroustrup style
• "allman" enforces Allman style

This rule has an object option for an exception:

• "allowSingleLine": true (default false) allows the opening and closing braces for a block to be on the same line

1tbs

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

/*eslint brace-style: "error"*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
}
else {
  baz();
}

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

/*eslint brace-style: "error"*/
 
function foo() {
  return true;
}
 
if (foo) {
  bar();
}
 
if (foo) {
  bar();
} else {
  baz();
}
 
try {
  somethingRisky();
} catch(e) {
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "1tbs", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "1tbs", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); } else { baz(); }
 
try { somethingRisky(); } catch(e) { handleError(); }

stroustrup

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

/*eslint brace-style: ["error", "stroustrup"]*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
} else {
  baz();
}

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

/*eslint brace-style: ["error", "stroustrup"]*/
 
function foo() {
  return true;
}
 
if (foo) {
  bar();
}
 
if (foo) {
  bar();
}
else {
  baz();
}
 
try {
  somethingRisky();
}
catch(e) {
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "stroustrup", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "stroustrup", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); }
else { baz(); }
 
try { somethingRisky(); }
catch(e) { handleError(); }

allman

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

/*eslint brace-style: ["error", "allman"]*/
 
function foo() {
  return true;
}
 
if (foo)
{
  bar(); }
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
} else {
  baz();
}

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

/*eslint brace-style: ["error", "allman"]*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
if (foo)
{
  bar();
}
else
{
  baz();
}
 
try
{
  somethingRisky();
}
catch(e)
{
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "allman", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "allman", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); }
else { baz(); }
 
try { somethingRisky(); }
catch(e) { handleError(); }

When Not To Use It

If you don't want to enforce a particular brace style, don't enable this rule.

Further Reading

• Indent style Source: http://eslint.org/docs/rules/

Close

Require or disallow named function expressions (func-names)

A pattern that's becoming more common is to give function expressions names to aid in debugging. For example:

Foo.prototype.bar = function bar() {};

Adding the second bar in the above example is optional. If you leave off the function name then when the function throws an exception you are likely to get something similar to anonymous function in the stack trace. If you provide the optional name for a function expression then you will get the name of the function expression in the stack trace.

Rule Details

This rule can enforce or disallow the use of named function expressions.

Options

This rule has a string option:

• "always" (default) requires function expressions to have a name
• "as-needed" requires function expressions to have a name, if the name cannot be assigned automatically in an ES6 environment
• "never" disallows named function expressions, except in recursive functions, where a name is needed

always

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

/*eslint func-names: ["error", "always"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

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

/*eslint func-names: ["error", "always"]*/
 
Foo.prototype.bar = function bar() {};
 
(function bar() {
    // ...
}())

as-needed

ECMAScript 6 introduced a name property on all functions. The value of name is determined by evaluating the code around the function to see if a name can be inferred. For example, a function assigned to a variable will automatically have a name property equal to the name of the variable. The value of name is then used in stack traces for easier debugging.

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

/*eslint func-names: ["error", "as-needed"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

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

/*eslint func-names: ["error", "as-needed"]*/
 
var bar = function() {};
 
(function bar() {
    // ...
}())

never

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

/*eslint func-names: ["error", "never"]*/
 
Foo.prototype.bar = function bar() {};
 
(function bar() {
    // ...
}())

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

/*eslint func-names: ["error", "never"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

Further Reading

• Functions Explained
• Function Names in ES6

Compatibility

• JSCS: requireAnonymousFunctions
• JSCS: disallowAnonymousFunctions Source: http://eslint.org/docs/rules/

Close

Disallow Undeclared Variables (no-undef)

This rule can help you locate potential ReferenceErrors resulting from misspellings of variable and parameter names, or accidental implicit globals (for example, from forgetting the var keyword in a for loop initializer).

Rule Details

Any reference to an undeclared variable causes a warning, unless the variable is explicitly mentioned in a /*global ...*/ comment.

Examples of incorrect code for this rule:

/*eslint no-undef: "error"*/
 
var a = someFunction();
b = 10;

Examples of correct code for this rule with global declaration:

/*global someFunction b:true*/
/*eslint no-undef: "error"*/
 
var a = someFunction();
b = 10;

The b:true syntax in /*global */ indicates that assignment to b is correct.

Examples of incorrect code for this rule with global declaration:

/*global b*/
/*eslint no-undef: "error"*/
 
b = 10;

By default, variables declared in /*global */ are read-only, therefore assignment is incorrect.

Options

• typeof set to true will warn for variables used inside typeof check (Default false).

typeof

Examples of correct code for the default { "typeof": false } option:

/*eslint no-undef: "error"*/
 
if (typeof UndefinedIdentifier === "undefined") {
    // do something ...
}

You can use this option if you want to prevent typeof check on a variable which has not been declared.

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

/*eslint no-undef: ["error", { "typeof": true }] */
 
if(typeof a === "string"){}

Examples of correct code for the { "typeof": true } option with global declaration:

/*global a*/
/*eslint no-undef: ["error", { "typeof": true }] */
 
if(typeof a === "string"){}

Environments

For convenience, ESLint provides shortcuts that pre-define global variables exposed by popular libraries and runtime environments. This rule supports these environments, as listed in Specifying Environments. A few examples are given below.

browser

Examples of correct code for this rule with browser environment:

/*eslint no-undef: "error"*/
/*eslint-env browser*/
 
setTimeout(function() {
    alert("Hello");
});

node

Examples of correct code for this rule with node environment:

/*eslint no-undef: "error"*/
/*eslint-env node*/
 
var fs = require("fs");
module.exports = function() {
    console.log(fs);
};

When Not To Use It

If explicit declaration of global variables is not to your taste.

Compatibility

This rule provides compatibility with treatment of global variables in JSHint and JSLint. Source: http://eslint.org/docs/rules/

Close

Enforces spacing around commas (comma-spacing)

Spacing around commas improve readability of a list of items. Although most of the style guidelines for languages prescribe adding a space after a comma and not before it, it is subjective to the preferences of a project.

var foo = 1, bar = 2;
var foo = 1 ,bar = 2;

Rule Details

This rule enforces consistent spacing before and after commas in variable declarations, array literals, object literals, function parameters, and sequences.

This rule does not apply in an ArrayExpression or ArrayPattern in either of the following cases:

• adjacent null elements
• an initial null element, to avoid conflicts with the [array-bracket-spacing](array-bracket-spacing.md) rule

Options

This rule has an object option:

• "before": false (default) disallows spaces before commas
• "before": true requires one or more spaces before commas
• "after": true (default) requires one or more spaces after commas
• "after": false disallows spaces after commas

after

Examples of incorrect code for this rule with the default { "before": false, "after": true } options:

/*eslint comma-spacing: ["error", { "before": false, "after": true }]*/
 
var foo = 1 ,bar = 2;
var arr = [1 , 2];
var obj = {"foo": "bar" ,"baz": "qur"};
foo(a ,b);
new Foo(a ,b);
function foo(a ,b){}
a ,b

Examples of correct code for this rule with the default { "before": false, "after": true } options:

/*eslint comma-spacing: ["error", { "before": false, "after": true }]*/
 
var foo = 1, bar = 2
    , baz = 3;
var arr = [1, 2];
var arr = [1,, 3]
var obj = {"foo": "bar", "baz": "qur"};
foo(a, b);
new Foo(a, b);
function foo(a, b){}
a, b

Example of correct code for this rule with initial null element for the default { "before": false, "after": true } options:

/*eslint comma-spacing: ["error", { "before": false, "after": true }]*/
/*eslint array-bracket-spacing: ["error", "always"]*/
 
var arr = [ , 2, 3 ]

before

Examples of incorrect code for this rule with the { "before": true, "after": false } options:

/*eslint comma-spacing: ["error", { "before": true, "after": false }]*/
 
var foo = 1, bar = 2;
var arr = [1 , 2];
var obj = {"foo": "bar", "baz": "qur"};
new Foo(a,b);
function foo(a,b){}
a, b

Examples of correct code for this rule with the { "before": true, "after": false } options:

/*eslint comma-spacing: ["error", { "before": true, "after": false }]*/
 
var foo = 1 ,bar = 2 ,
    baz = true;
var arr = [1 ,2];
var arr = [1 ,,3]
var obj = {"foo": "bar" ,"baz": "qur"};
foo(a ,b);
new Foo(a ,b);
function foo(a ,b){}
a ,b

Examples of correct code for this rule with initial null element for the { "before": true, "after": false } options:

/*eslint comma-spacing: ["error", { "before": true, "after": false }]*/
/*eslint array-bracket-spacing: ["error", "never"]*/
 
var arr = [,2 ,3]

When Not To Use It

If your project will not be following a consistent comma-spacing pattern, turn this rule off.

Further Reading

• Javascript
• Dojo Style Guide

Related Rules

• [array-bracket-spacing](array-bracket-spacing.md)
• [comma-style](comma-style.md)
• [space-in-brackets](space-in-brackets.md) (deprecated)
• [space-in-parens](space-in-parens.md)
• [space-infix-ops](space-infix-ops.md)
• [space-after-keywords](space-after-keywords)
• [space-unary-ops](space-unary-ops)
• [space-return-throw-case](space-return-throw-case) Source: http://eslint.org/docs/rules/

Close

enforce consistent spacing before and after keywords (keyword-spacing)

Keywords are syntax elements of JavaScript, such as function and if. These identifiers have special meaning to the language and so often appear in a different color in code editors. As an important part of the language, style guides often refer to the spacing that should be used around keywords. For example, you might have a style guide that says keywords should be always surrounded by spaces, which would mean if-else statements must look like this:

if (foo) {
    // ...
} else {
    // ...
}

Of course, you could also have a style guide that disallows spaces around keywords.

Rule Details

This rule enforces consistent spacing around keywords and keyword-like tokens: as (in module declarations), async (of async functions), await (of await expressions), break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, from (in module declarations), function, get (of getters), if, import, in, instanceof, let, new, of (in for-of statements), return, set (of setters), static, super, switch, this, throw, try, typeof, var, void, while, with, and yield. This rule is designed carefully not to conflict with other spacing rules: it does not apply to spacing where other rules report problems.

Options

This rule has an object option:

• "before": true (default) requires at least one space before keywords
• "before": false disallows spaces before keywords
• "after": true (default) requires at least one space after keywords
• "after": false disallows spaces after keywords
• "overrides" allows overriding spacing style for specified keywords

before

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

/*eslint keyword-spacing: ["error", { "before": true }]*/
 
if (foo) {
    //...
}else if (bar) {
    //...
}else {
    //...
}

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

/*eslint keyword-spacing: ["error", { "before": true }]*/
/*eslint-env es6*/
 
if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}
 
// no conflict with `array-bracket-spacing`
let a = [this];
let b = [function() {}];
 
// no conflict with `arrow-spacing`
let a = ()=> this.foo;
 
// no conflict with `block-spacing`
{function foo() {}}
 
// no conflict with `comma-spacing`
let a = [100,this.foo, this.bar];
 
// not conflict with `computed-property-spacing`
obj[this.foo] = 0;
 
// no conflict with `generator-star-spacing`
function *foo() {}
 
// no conflict with `key-spacing`
let obj = {
    foo:function() {}
};
 
// no conflict with `object-curly-spacing`
let obj = {foo: this};
 
// no conflict with `semi-spacing`
let a = this;function foo() {}
 
// no conflict with `space-in-parens`
(function () {})();
 
// no conflict with `space-infix-ops`
if ("foo"in {foo: 0}) {}
if (10+this.foo<= this.bar) {}
 
// no conflict with `jsx-curly-spacing`
let a = 

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

/*eslint keyword-spacing: ["error", { "before": false }]*/
 
if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}

Examples of correct code for this rule with the { "before": false } option:

/*eslint keyword-spacing: ["error", { "before": false }]*/
 
if (foo) {
    //...
}else if (bar) {
    //...
}else {
    //...
}

after

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

/*eslint keyword-spacing: ["error", { "after": true }]*/
 
if(foo) {
    //...
} else if(bar) {
    //...
} else{
    //...
}

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

/*eslint keyword-spacing: ["error", { "after": true }]*/
 
if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}
 
// not conflict with `array-bracket-spacing`
let a = [this];
 
// not conflict with `arrow-spacing`
let a = ()=> this.foo;
 
// not conflict with `comma-spacing`
let a = [100, this.foo, this.bar];
 
// not conflict with `computed-property-spacing`
obj[this.foo] = 0;
 
// not conflict with `generator-star-spacing`
function* foo() {}
 
// not conflict with `key-spacing`
let obj = {
    foo:function() {}
};
 
// not conflict with `func-call-spacing`
class A {
    constructor() {
        super();
    }
}
 
// not conflict with `object-curly-spacing`
let obj = {foo: this};
 
// not conflict with `semi-spacing`
let a = this;function foo() {}
 
// not conflict with `space-before-function-paren`
function() {}
 
// no conflict with `space-infix-ops`
if ("foo"in{foo: 0}) {}
if (10+this.foo<= this.bar) {}
 
// no conflict with `space-unary-ops`
function* foo(a) {
    return yield+a;
}
 
// no conflict with `yield-star-spacing`
function* foo(a) {
    return yield* a;
}
 
// no conflict with `jsx-curly-spacing`
let a = 

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

/*eslint keyword-spacing: ["error", { "after": false }]*/
 
if (foo) {
    //...
} else if (bar) {
    //...
} else {
    //...
}

Examples of correct code for this rule with the { "after": false } option:

/*eslint keyword-spacing: ["error", { "after": false }]*/
 
if(foo) {
    //...
} else if(bar) {
    //...
} else{
    //...
}

overrides

Examples of correct code for this rule with the { "overrides": { "if": { "after": false }, "for": { "after": false }, "while": { "after": false } } } option:

/*eslint keyword-spacing: ["error", { "overrides": {
  "if": { "after": false },
  "for": { "after": false },
  "while": { "after": false }
} }]*/
 
if(foo) {
    //...
} else if(bar) {
    //...
} else {
    //...
}
 
for(;;);
 
while(true) {
  //...
}

When Not To Use It

If you don't want to enforce consistency on keyword spacing, then it's safe to disable this rule. Source: http://eslint.org/docs/rules/

Close

Treat var as Block Scoped (block-scoped-var)

The block-scoped-var rule generates warnings when variables are used outside of the block in which they were defined. This emulates C-style block scope.

Rule Details

This rule aims to reduce the usage of variables outside of their binding context and emulate traditional block scope from other languages. This is to help newcomers to the language avoid difficult bugs with variable hoisting.

Examples of incorrect code for this rule:

/*eslint block-scoped-var: "error"*/
 
function doIf() {
    if (true) {
        var build = true;
    }
 
    console.log(build);
}
 
function doIfElse() {
    if (true) {
        var build = true;
    } else {
        var build = false;
    }
}
 
function doTryCatch() {
    try {
        var build = 1;
    } catch (e) {
        var f = build;
    }
}

Examples of correct code for this rule:

/*eslint block-scoped-var: "error"*/
 
function doIf() {
    var build;
 
    if (true) {
        build = true;
    }
 
    console.log(build);
}
 
function doIfElse() {
    var build;
 
    if (true) {
        build = true;
    } else {
        build = false;
    }
}
 
function doTryCatch() {
    var build;
    var f;
 
    try {
        build = 1;
    } catch (e) {
        f = build;
    }
}

Further Reading

• JavaScript Scoping and Hoisting
• var Hoisting Source: http://eslint.org/docs/rules/

Close

enforce consistent spacing between keys and values in object literal properties (key-spacing)

This rule enforces spacing around the colon in object literal properties. It can verify each property individually, or it can ensure horizontal alignment of adjacent properties in an object literal.

Rule Details

This rule enforces consistent spacing between keys and values in object literal properties. In the case of long lines, it is acceptable to add a new line wherever whitespace is allowed.

Options

This rule has an object option:

• "beforeColon": false (default) disallows spaces between the key and the colon in object literals.
• "beforeColon": true requires at least one space between the key and the colon in object literals.
• "afterColon": true (default) requires at least one space between the colon and the value in object literals.
• "afterColon": false disallows spaces between the colon and the value in object literals.
• "mode": "strict" (default) enforces exactly one space before or after colons in object literals.
• "mode": "minimum" enforces one or more spaces before or after colons in object literals.
• "align": "value" enforces horizontal alignment of values in object literals.
• "align": "colon" enforces horizontal alignment of both colons and values in object literals.
• "align" with an object value allows for fine-grained spacing when values are being aligned in object literals.
• "singleLine" specifies a spacing style for single-line object literals.
• "multiLine" specifies a spacing style for multi-line object literals.

Please note that you can either use the top-level options or the grouped options (singleLine and multiLine) but not both.

beforeColon

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

/*eslint key-spacing: ["error", { "beforeColon": false }]*/
 
var obj = { "foo" : 42 };

Examples of correct code for this rule with the default { "beforeColon": false } option:

/*eslint key-spacing: ["error", { "beforeColon": false }]*/
 
var obj = { "foo": 42 };

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

/*eslint key-spacing: ["error", { "beforeColon": true }]*/
 
var obj = { "foo": 42 };

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

/*eslint key-spacing: ["error", { "beforeColon": true }]*/
 
var obj = { "foo" : 42 };

afterColon

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

/*eslint key-spacing: ["error", { "afterColon": true }]*/
 
var obj = { "foo":42 };

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

/*eslint key-spacing: ["error", { "afterColon": true }]*/
 
var obj = { "foo": 42 };

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

/*eslint key-spacing: ["error", { "afterColon": false }]*/
 
var obj = { "foo": 42 };

Examples of correct code for this rule with the { "afterColon": false } option:

/*eslint key-spacing: ["error", { "afterColon": false }]*/
 
var obj = { "foo":42 };

mode

Examples of incorrect code for this rule with the default { "mode": "strict" } option:

/*eslint key-spacing: ["error", { "mode": "strict" }]*/
 
call({
    foobar: 42,
    bat:    2 * 2
});

Examples of correct code for this rule with the default { "mode": "strict" } option:

/*eslint key-spacing: ["error", { "mode": "strict" }]*/
 
call({
    foobar: 42,
    bat: 2 * 2
});

Examples of correct code for this rule with the { "mode": "minimum" } option:

/*eslint key-spacing: ["error", { "mode": "minimum" }]*/
 
call({
    foobar: 42,
    bat:    2 * 2
});

align

Examples of incorrect code for this rule with the { "align": "value" } option:

/*eslint key-spacing: ["error", { "align": "value" }]*/
 
var obj = {
    a: value,
    bcde:  42,
    fg :   foo()
};

Examples of correct code for this rule with the { "align": "value" } option:

/*eslint key-spacing: ["error", { "align": "value" }]*/
 
var obj = {
    a:    value,
    bcde: 42,
 
    fg: foo(),
    h:  function() {
        return this.a;
    },
    ijkl: 'Non-consecutive lines form a new group'
};
 
var obj = { a: "foo", longPropertyName: "bar" };

Examples of incorrect code for this rule with the { "align": "colon" } option:

/*eslint key-spacing: ["error", { "align": "colon" }]*/
 
call({
    foobar: 42,
    bat:    2 * 2
});

Examples of correct code for this rule with the { "align": "colon" } option:

/*eslint key-spacing: ["error", { "align": "colon" }]*/
 
call({
    foobar: 42,
    bat   : 2 * 2
});

align

The align option can take additional configuration through the beforeColon, afterColon, mode, and on options.

If align is defined as an object, but not all of the parameters are provided, undefined parameters will default to the following:

// Defaults
align: {
    "beforeColon": false,
    "afterColon": true,
    "on": "colon",
    "mode": "strict"
}

Examples of correct code for this rule with sample { "align": { } } options:

/*eslint key-spacing: ["error", {
    "align": {
        "beforeColon": true,
        "afterColon": true,
        "on": "colon"
    }
}]*/
 
var obj = {
    "one"   : 1,
    "seven" : 7
}

/*eslint key-spacing: ["error", {
    "align": {
        "beforeColon": false,
        "afterColon": false,
        "on": "value"
    }
}]*/
 
var obj = {
    "one":  1,
    "seven":7
}

align and multiLine

The multiLine and align options can differ, which allows for fine-tuned control over the key-spacing of your files. align will not inherit from multiLine if align is configured as an object.

multiLine is used any time an object literal spans multiple lines. The align configuration is used when there is a group of properties in the same object. For example:

var myObj = {
  key1: 1, // uses multiLine
 
  key2: 2, // uses align (when defined)
  key3: 3, // uses align (when defined)
 
  key4: 4 // uses multiLine
}

Examples of incorrect code for this rule with sample { "align": { }, "multiLine": { } } options:

/*eslint key-spacing: ["error", {
    "multiLine": {
        "beforeColon": false,
        "afterColon":true
    },
    "align": {
        "beforeColon": true,
        "afterColon": true,
        "on": "colon"
    }
}]*/
 
var obj = {
    "myObjectFunction": function() {
        // Do something
    },
    "one"             : 1,
    "seven"           : 7
}

Examples of correct code for this rule with sample { "align": { }, "multiLine": { } } options:

/*eslint key-spacing: ["error", {
    "multiLine": {
        "beforeColon": false,
        "afterColon": true
 
    },
    "align": {
        "beforeColon": true,
        "afterColon": true,
        "on": "colon"
    }
}]*/
 
var obj = {
    "myObjectFunction": function() {
        // Do something
        //
    }, // These are two separate groups, so no alignment between `myObjectFuction` and `one`
    "one"   : 1,
    "seven" : 7 // `one` and `seven` are in their own group, and therefore aligned
}

singleLine and multiLine

Examples of correct code for this rule with sample { "singleLine": { }, "multiLine": { } } options:

/*eslint "key-spacing": [2, {
    "singleLine": {
        "beforeColon": false,
        "afterColon": true
    },
    "multiLine": {
        "beforeColon": true,
        "afterColon": true,
        "align": "colon"
    }
}]*/
var obj = { one: 1, "two": 2, three: 3 };
var obj2 = {
    "two" : 2,
    three : 3
};

When Not To Use It

If you have another convention for property spacing that might not be consistent with the available options, or if you want to permit multiple styles concurrently you can safely disable this rule. Source: http://eslint.org/docs/rules/

Close

Require or disallow named function expressions (func-names)

A pattern that's becoming more common is to give function expressions names to aid in debugging. For example:

Foo.prototype.bar = function bar() {};

Adding the second bar in the above example is optional. If you leave off the function name then when the function throws an exception you are likely to get something similar to anonymous function in the stack trace. If you provide the optional name for a function expression then you will get the name of the function expression in the stack trace.

Rule Details

This rule can enforce or disallow the use of named function expressions.

Options

This rule has a string option:

• "always" (default) requires function expressions to have a name
• "as-needed" requires function expressions to have a name, if the name cannot be assigned automatically in an ES6 environment
• "never" disallows named function expressions, except in recursive functions, where a name is needed

always

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

/*eslint func-names: ["error", "always"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

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

/*eslint func-names: ["error", "always"]*/
 
Foo.prototype.bar = function bar() {};
 
(function bar() {
    // ...
}())

as-needed

ECMAScript 6 introduced a name property on all functions. The value of name is determined by evaluating the code around the function to see if a name can be inferred. For example, a function assigned to a variable will automatically have a name property equal to the name of the variable. The value of name is then used in stack traces for easier debugging.

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

/*eslint func-names: ["error", "as-needed"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

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

/*eslint func-names: ["error", "as-needed"]*/
 
var bar = function() {};
 
(function bar() {
    // ...
}())

never

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

/*eslint func-names: ["error", "never"]*/
 
Foo.prototype.bar = function bar() {};
 
(function bar() {
    // ...
}())

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

/*eslint func-names: ["error", "never"]*/
 
Foo.prototype.bar = function() {};
 
(function() {
    // ...
}())

Further Reading

• Functions Explained
• Function Names in ES6

Compatibility

• JSCS: requireAnonymousFunctions
• JSCS: disallowAnonymousFunctions Source: http://eslint.org/docs/rules/

Close

Require or disallow a space before function parenthesis (space-before-function-paren)

When formatting a function, whitespace is allowed between the function name or function keyword and the opening paren. Named functions also require a space between the function keyword and the function name, but anonymous functions require no whitespace. For example:

function withoutSpace(x) {
    // ...
}
 
function withSpace (x) {
    // ...
}
 
var anonymousWithoutSpace = function() {};
 
var anonymousWithSpace = function () {};

Style guides may require a space after the function keyword for anonymous functions, while others specify no whitespace. Similarly, the space after a function name may or may not be required.

Rule Details

This rule aims to enforce consistent spacing before function parentheses and as such, will warn whenever whitespace doesn't match the preferences specified.

Options

This rule has a string option or an object option:

{
    "space-before-function-paren": ["error", "always"],
    // or
    "space-before-function-paren": ["error", {
        "anonymous": "always",
        "named": "always",
        "asyncArrow": "ignore"
    }],
}

• always (default) requires a space followed by the ( of arguments.
• never disallows any space followed by the ( of arguments.

The string option does not check async arrow function expressions for backward compatibility.

You can also use a separate option for each type of function. Each of the following options can be set to "always", "never", or "ignore". Default is "always" basically.

• anonymous is for anonymous function expressions (e.g. function () {}).
• named is for named function expressions (e.g. function foo () {}).
• asyncArrow is for async arrow function expressions (e.g. async () => {}). asyncArrow is set to "ignore" by default for backwards compatibility.

"always"

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

/*eslint space-before-function-paren: "error"*/
/*eslint-env es6*/
 
function foo() {
    // ...
}
 
var bar = function() {
    // ...
};
 
var bar = function foo() {
    // ...
};
 
class Foo {
    constructor() {
        // ...
    }
}
 
var foo = {
    bar() {
        // ...
    }
};

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

/*eslint space-before-function-paren: "error"*/
/*eslint-env es6*/
 
function foo () {
    // ...
}
 
var bar = function () {
    // ...
};
 
var bar = function foo () {
    // ...
};
 
class Foo {
    constructor () {
        // ...
    }
}
 
var foo = {
    bar () {
        // ...
    }
};
 
// async arrow function expressions are ignored by default.
var foo = async () => 1
var foo = async() => 1

"never"

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

/*eslint space-before-function-paren: ["error", "never"]*/
/*eslint-env es6*/
 
function foo () {
    // ...
}
 
var bar = function () {
    // ...
};
 
var bar = function foo () {
    // ...
};
 
class Foo {
    constructor () {
        // ...
    }
}
 
var foo = {
    bar () {
        // ...
    }
};

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

/*eslint space-before-function-paren: ["error", "never"]*/
/*eslint-env es6*/
 
function foo() {
    // ...
}
 
var bar = function() {
    // ...
};
 
var bar = function foo() {
    // ...
};
 
class Foo {
    constructor() {
        // ...
    }
}
 
var foo = {
    bar() {
        // ...
    }
};
 
// async arrow function expressions are ignored by default.
var foo = async () => 1
var foo = async() => 1

{"anonymous": "always", "named": "never", "asyncArrow": "always"}

Examples of incorrect code for this rule with the {"anonymous": "always", "named": "never", "asyncArrow": "always"} option:

/*eslint space-before-function-paren: ["error", {"anonymous": "always", "named": "never", "asyncArrow": "always"}]*/
/*eslint-env es6*/
 
function foo () {
    // ...
}
 
var bar = function() {
    // ...
};
 
class Foo {
    constructor () {
        // ...
    }
}
 
var foo = {
    bar () {
        // ...
    }
};
 
var foo = async(a) => await a

Examples of correct code for this rule with the {"anonymous": "always", "named": "never", "asyncArrow": "always"} option:

/*eslint space-before-function-paren: ["error", {"anonymous": "always", "named": "never", "asyncArrow": "always"}]*/
/*eslint-env es6*/
 
function foo() {
    // ...
}
 
var bar = function () {
    // ...
};
 
class Foo {
    constructor() {
        // ...
    }
}
 
var foo = {
    bar() {
        // ...
    }
};
 
var foo = async (a) => await a

{"anonymous": "never", "named": "always"}

Examples of incorrect code for this rule with the {"anonymous": "never", "named": "always"} option:

/*eslint space-before-function-paren: ["error", { "anonymous": "never", "named": "always" }]*/
/*eslint-env es6*/
 
function foo() {
    // ...
}
 
var bar = function () {
    // ...
};
 
class Foo {
    constructor() {
        // ...
    }
}
 
var foo = {
    bar() {
        // ...
    }
};

Examples of correct code for this rule with the {"anonymous": "never", "named": "always"} option:

/*eslint space-before-function-paren: ["error", { "anonymous": "never", "named": "always" }]*/
/*eslint-env es6*/
 
function foo () {
    // ...
}
 
var bar = function() {
    // ...
};
 
class Foo {
    constructor () {
        // ...
    }
}
 
var foo = {
    bar () {
        // ...
    }
};

{"anonymous": "ignore", "named": "always"}

Examples of incorrect code for this rule with the {"anonymous": "ignore", "named": "always"} option:

/*eslint space-before-function-paren: ["error", { "anonymous": "ignore", "named": "always" }]*/
/*eslint-env es6*/
 
function foo() {
    // ...
}
 
class Foo {
    constructor() {
        // ...
    }
}
 
var foo = {
    bar() {
        // ...
    }
};

Examples of correct code for this rule with the {"anonymous": "ignore", "named": "always"} option:

/*eslint space-before-function-paren: ["error", { "anonymous": "ignore", "named": "always" }]*/
/*eslint-env es6*/
 
var bar = function() {
    // ...
};
 
var bar = function () {
    // ...
};
 
function foo () {
    // ...
}
 
class Foo {
    constructor () {
        // ...
    }
}
 
var foo = {
    bar () {
        // ...
    }
};

When Not To Use It

You can turn this rule off if you are not concerned with the consistency of spacing before function parenthesis.

Related Rules

• [space-after-keywords](space-after-keywords.md)
• [space-return-throw-case](space-return-throw-case.md) Source: http://eslint.org/docs/rules/

Close

Require Brace Style (brace-style)

Brace style is closely related to indent style in programming and describes the placement of braces relative to their control statement and body. There are probably a dozen, if not more, brace styles in the world.

The one true brace style is one of the most common brace styles in JavaScript, in which the opening brace of a block is placed on the same line as its corresponding statement or declaration. For example:

if (foo) {
  bar();
} else {
  baz();
}

One common variant of one true brace style is called Stroustrup, in which the else statements in an if-else construct, as well as catch and finally, must be on its own line after the preceding closing brace. For example:

if (foo) {
  bar();
}
else {
  baz();
}

Another style is called Allman, in which all the braces are expected to be on their own lines without any extra indentation. For example:

if (foo)
{
  bar();
}
else
{
  baz();
}

While no style is considered better than the other, most developers agree that having a consistent style throughout a project is important for its long-term maintainability.

Rule Details

This rule enforces consistent brace style for blocks.

Options

This rule has a string option:

• "1tbs" (default) enforces one true brace style
• "stroustrup" enforces Stroustrup style
• "allman" enforces Allman style

This rule has an object option for an exception:

• "allowSingleLine": true (default false) allows the opening and closing braces for a block to be on the same line

1tbs

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

/*eslint brace-style: "error"*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
}
else {
  baz();
}

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

/*eslint brace-style: "error"*/
 
function foo() {
  return true;
}
 
if (foo) {
  bar();
}
 
if (foo) {
  bar();
} else {
  baz();
}
 
try {
  somethingRisky();
} catch(e) {
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "1tbs", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "1tbs", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); } else { baz(); }
 
try { somethingRisky(); } catch(e) { handleError(); }

stroustrup

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

/*eslint brace-style: ["error", "stroustrup"]*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
} else {
  baz();
}

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

/*eslint brace-style: ["error", "stroustrup"]*/
 
function foo() {
  return true;
}
 
if (foo) {
  bar();
}
 
if (foo) {
  bar();
}
else {
  baz();
}
 
try {
  somethingRisky();
}
catch(e) {
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "stroustrup", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "stroustrup", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); }
else { baz(); }
 
try { somethingRisky(); }
catch(e) { handleError(); }

allman

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

/*eslint brace-style: ["error", "allman"]*/
 
function foo() {
  return true;
}
 
if (foo)
{
  bar(); }
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
} else {
  baz();
}

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

/*eslint brace-style: ["error", "allman"]*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
if (foo)
{
  bar();
}
else
{
  baz();
}
 
try
{
  somethingRisky();
}
catch(e)
{
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "allman", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "allman", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); }
else { baz(); }
 
try { somethingRisky(); }
catch(e) { handleError(); }

When Not To Use It

If you don't want to enforce a particular brace style, don't enable this rule.

Further Reading

• Indent style Source: http://eslint.org/docs/rules/

Close

Treat var as Block Scoped (block-scoped-var)

The block-scoped-var rule generates warnings when variables are used outside of the block in which they were defined. This emulates C-style block scope.

Rule Details

This rule aims to reduce the usage of variables outside of their binding context and emulate traditional block scope from other languages. This is to help newcomers to the language avoid difficult bugs with variable hoisting.

Examples of incorrect code for this rule:

/*eslint block-scoped-var: "error"*/
 
function doIf() {
    if (true) {
        var build = true;
    }
 
    console.log(build);
}
 
function doIfElse() {
    if (true) {
        var build = true;
    } else {
        var build = false;
    }
}
 
function doTryCatch() {
    try {
        var build = 1;
    } catch (e) {
        var f = build;
    }
}

Examples of correct code for this rule:

/*eslint block-scoped-var: "error"*/
 
function doIf() {
    var build;
 
    if (true) {
        build = true;
    }
 
    console.log(build);
}
 
function doIfElse() {
    var build;
 
    if (true) {
        build = true;
    } else {
        build = false;
    }
}
 
function doTryCatch() {
    var build;
    var f;
 
    try {
        build = 1;
    } catch (e) {
        f = build;
    }
}

Further Reading

• JavaScript Scoping and Hoisting
• var Hoisting Source: http://eslint.org/docs/rules/

Close

Treat var as Block Scoped (block-scoped-var)

The block-scoped-var rule generates warnings when variables are used outside of the block in which they were defined. This emulates C-style block scope.

Rule Details

This rule aims to reduce the usage of variables outside of their binding context and emulate traditional block scope from other languages. This is to help newcomers to the language avoid difficult bugs with variable hoisting.

Examples of incorrect code for this rule:

/*eslint block-scoped-var: "error"*/
 
function doIf() {
    if (true) {
        var build = true;
    }
 
    console.log(build);
}
 
function doIfElse() {
    if (true) {
        var build = true;
    } else {
        var build = false;
    }
}
 
function doTryCatch() {
    try {
        var build = 1;
    } catch (e) {
        var f = build;
    }
}

Examples of correct code for this rule:

/*eslint block-scoped-var: "error"*/
 
function doIf() {
    var build;
 
    if (true) {
        build = true;
    }
 
    console.log(build);
}
 
function doIfElse() {
    var build;
 
    if (true) {
        build = true;
    } else {
        build = false;
    }
}
 
function doTryCatch() {
    var build;
    var f;
 
    try {
        build = 1;
    } catch (e) {
        f = build;
    }
}

Further Reading

• JavaScript Scoping and Hoisting
• var Hoisting Source: http://eslint.org/docs/rules/

Close

Require Brace Style (brace-style)

Brace style is closely related to indent style in programming and describes the placement of braces relative to their control statement and body. There are probably a dozen, if not more, brace styles in the world.

The one true brace style is one of the most common brace styles in JavaScript, in which the opening brace of a block is placed on the same line as its corresponding statement or declaration. For example:

if (foo) {
  bar();
} else {
  baz();
}

One common variant of one true brace style is called Stroustrup, in which the else statements in an if-else construct, as well as catch and finally, must be on its own line after the preceding closing brace. For example:

if (foo) {
  bar();
}
else {
  baz();
}

Another style is called Allman, in which all the braces are expected to be on their own lines without any extra indentation. For example:

if (foo)
{
  bar();
}
else
{
  baz();
}

While no style is considered better than the other, most developers agree that having a consistent style throughout a project is important for its long-term maintainability.

Rule Details

This rule enforces consistent brace style for blocks.

Options

This rule has a string option:

• "1tbs" (default) enforces one true brace style
• "stroustrup" enforces Stroustrup style
• "allman" enforces Allman style

This rule has an object option for an exception:

• "allowSingleLine": true (default false) allows the opening and closing braces for a block to be on the same line

1tbs

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

/*eslint brace-style: "error"*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
}
else {
  baz();
}

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

/*eslint brace-style: "error"*/
 
function foo() {
  return true;
}
 
if (foo) {
  bar();
}
 
if (foo) {
  bar();
} else {
  baz();
}
 
try {
  somethingRisky();
} catch(e) {
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "1tbs", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "1tbs", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); } else { baz(); }
 
try { somethingRisky(); } catch(e) { handleError(); }

stroustrup

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

/*eslint brace-style: ["error", "stroustrup"]*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
} else {
  baz();
}

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

/*eslint brace-style: ["error", "stroustrup"]*/
 
function foo() {
  return true;
}
 
if (foo) {
  bar();
}
 
if (foo) {
  bar();
}
else {
  baz();
}
 
try {
  somethingRisky();
}
catch(e) {
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "stroustrup", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "stroustrup", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); }
else { baz(); }
 
try { somethingRisky(); }
catch(e) { handleError(); }

allman

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

/*eslint brace-style: ["error", "allman"]*/
 
function foo() {
  return true;
}
 
if (foo)
{
  bar(); }
 
try
{
  somethingRisky();
} catch(e)
{
  handleError();
}
 
if (foo) {
  bar();
} else {
  baz();
}

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

/*eslint brace-style: ["error", "allman"]*/
 
function foo()
{
  return true;
}
 
if (foo)
{
  bar();
}
 
if (foo)
{
  bar();
}
else
{
  baz();
}
 
try
{
  somethingRisky();
}
catch(e)
{
  handleError();
}
 
// when there are no braces, there are no problems
if (foo) bar();
else if (baz) boom();

Examples of correct code for this rule with the "allman", { "allowSingleLine": true } options:

/*eslint brace-style: ["error", "allman", { "allowSingleLine": true }]*/
 
function nop() { return; }
 
if (foo) { bar(); }
 
if (foo) { bar(); }
else { baz(); }
 
try { somethingRisky(); }
catch(e) { handleError(); }

When Not To Use It

If you don't want to enforce a particular brace style, don't enable this rule.

Further Reading

• Indent style Source: http://eslint.org/docs/rules/