Cognitive Complexity

Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

A method's cognitive complexity is based on a few simple rules:

• Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
• Code is considered more complex for each "break in the linear flow of the code"
• Code is considered more complex when "flow breaking structures are nested"

Further reading

• Cognitive Complexity docs
• Cognitive Complexity: A new way of measuring understandability

Require === and !== (eqeqeq)

It is considered good practice to use the type-safe equality operators === and !== instead of their regular counterparts == and !=.

The reason for this is that == and != do type coercion which follows the rather obscure Abstract Equality Comparison Algorithm. For instance, the following statements are all considered true:

• [] == false
• [] == ![]
• 3 == "03"

If one of those occurs in an innocent-looking statement such as a == b the actual problem is very difficult to spot.

Rule Details

This rule is aimed at eliminating the type-unsafe equality operators.

Examples of incorrect code for this rule:

/*eslint eqeqeq: "error"*/

if (x == 42) { }

if ("" == text) { }

if (obj.getStuff() != undefined) { }

The --fix option on the command line automatically fixes some problems reported by this rule. A problem is only fixed if one of the operands is a typeof expression, or if both operands are literals with the same type.

Options

always

The "always" option (default) enforces the use of === and !== in every situation (except when you opt-in to more specific handling of null [see below]).

Examples of incorrect code for the "always" option:

/*eslint eqeqeq: ["error", "always"]*/

a == b
foo == true
bananas != 1
value == undefined
typeof foo == 'undefined'
'hello' != 'world'
0 == 0
true == true
foo == null

Examples of correct code for the "always" option:

/*eslint eqeqeq: ["error", "always"]*/

a === b
foo === true
bananas !== 1
value === undefined
typeof foo === 'undefined'
'hello' !== 'world'
0 === 0
true === true
foo === null

This rule optionally takes a second argument, which should be an object with the following supported properties:

• "null": Customize how this rule treats null literals. Possible values:
  • always (default) - Always use === or !==.
  • never - Never use === or !== with null.
  • ignore - Do not apply this rule to null.

smart

The "smart" option enforces the use of === and !== except for these cases:

• Comparing two literal values
• Evaluating the value of typeof
• Comparing against null

Examples of incorrect code for the "smart" option:

/*eslint eqeqeq: ["error", "smart"]*/

// comparing two variables requires ===
a == b

// only one side is a literal
foo == true
bananas != 1

// comparing to undefined requires ===
value == undefined

Examples of correct code for the "smart" option:

/*eslint eqeqeq: ["error", "smart"]*/

typeof foo == 'undefined'
'hello' != 'world'
0 == 0
true == true
foo == null

allow-null

Deprecated: Instead of using this option use "always" and pass a "null" option property with value "ignore". This will tell eslint to always enforce strict equality except when comparing with the null literal.

["error", "always", {"null": "ignore"}]

When Not To Use It

If you don't want to enforce a style for using equality operators, then it's safe to disable this rule. Source: http://eslint.org/docs/rules/

Disallow lexical declarations in case/default clauses (no-case-declarations)

This rule disallows lexical declarations (let, const, function and class) in case/default clauses. The reason is that the lexical declaration is visible in the entire switch block but it only gets initialized when it is assigned, which will only happen if the case where it is defined is reached.

To ensure that the lexical declaration only applies to the current case clause wrap your clauses in blocks.

Rule Details

This rule aims to prevent access to uninitialized lexical bindings as well as accessing hoisted functions across case clauses.

Examples of incorrect code for this rule:

/*eslint no-case-declarations: "error"*/
/*eslint-env es6*/

switch (foo) {
    case 1:
        let x = 1;
        break;
    case 2:
        const y = 2;
        break;
    case 3:
        function f() {}
        break;
    default:
        class C {}
}

Examples of correct code for this rule:

/*eslint no-case-declarations: "error"*/
/*eslint-env es6*/

// Declarations outside switch-statements are valid
const a = 0;

switch (foo) {
    // The following case clauses are wrapped into blocks using brackets
    case 1: {
        let x = 1;
        break;
    }
    case 2: {
        const y = 2;
        break;
    }
    case 3: {
        function f() {}
        break;
    }
    case 4:
        // Declarations using var without brackets are valid due to function-scope hoisting
        var z = 4;
        break;
    default: {
        class C {}
    }
}

When Not To Use It

If you depend on fall through behavior and want access to bindings introduced in the case block.

Related Rules

• [no-fallthrough](no-fallthrough.md) Source: http://eslint.org/docs/rules/

For more information visit Source: http://eslint.org/docs/rules/

Require === and !== (eqeqeq)

It is considered good practice to use the type-safe equality operators === and !== instead of their regular counterparts == and !=.

The reason for this is that == and != do type coercion which follows the rather obscure Abstract Equality Comparison Algorithm. For instance, the following statements are all considered true:

• [] == false
• [] == ![]
• 3 == "03"

If one of those occurs in an innocent-looking statement such as a == b the actual problem is very difficult to spot.

Rule Details

This rule is aimed at eliminating the type-unsafe equality operators.

Examples of incorrect code for this rule:

/*eslint eqeqeq: "error"*/

if (x == 42) { }

if ("" == text) { }

if (obj.getStuff() != undefined) { }

The --fix option on the command line automatically fixes some problems reported by this rule. A problem is only fixed if one of the operands is a typeof expression, or if both operands are literals with the same type.

Options

always

The "always" option (default) enforces the use of === and !== in every situation (except when you opt-in to more specific handling of null [see below]).

Examples of incorrect code for the "always" option:

/*eslint eqeqeq: ["error", "always"]*/

a == b
foo == true
bananas != 1
value == undefined
typeof foo == 'undefined'
'hello' != 'world'
0 == 0
true == true
foo == null

Examples of correct code for the "always" option:

/*eslint eqeqeq: ["error", "always"]*/

a === b
foo === true
bananas !== 1
value === undefined
typeof foo === 'undefined'
'hello' !== 'world'
0 === 0
true === true
foo === null

This rule optionally takes a second argument, which should be an object with the following supported properties:

• "null": Customize how this rule treats null literals. Possible values:
  • always (default) - Always use === or !==.
  • never - Never use === or !== with null.
  • ignore - Do not apply this rule to null.

smart

The "smart" option enforces the use of === and !== except for these cases:

• Comparing two literal values
• Evaluating the value of typeof
• Comparing against null

Examples of incorrect code for the "smart" option:

/*eslint eqeqeq: ["error", "smart"]*/

// comparing two variables requires ===
a == b

// only one side is a literal
foo == true
bananas != 1

// comparing to undefined requires ===
value == undefined

Examples of correct code for the "smart" option:

/*eslint eqeqeq: ["error", "smart"]*/

typeof foo == 'undefined'
'hello' != 'world'
0 == 0
true == true
foo == null

allow-null

Deprecated: Instead of using this option use "always" and pass a "null" option property with value "ignore". This will tell eslint to always enforce strict equality except when comparing with the null literal.

["error", "always", {"null": "ignore"}]

When Not To Use It

If you don't want to enforce a style for using equality operators, then it's safe to disable this rule. Source: http://eslint.org/docs/rules/

Disallow unnecessary concatenation of strings (no-useless-concat)

It's unnecessary to concatenate two strings together, such as:

var foo = "a" + "b";

This code is likely the result of refactoring where a variable was removed from the concatenation (such as "a" + b + "b"). In such a case, the concatenation isn't important and the code can be rewritten as:

var foo = "ab";

Rule Details

This rule aims to flag the concatenation of 2 literals when they could be combined into a single literal. Literals can be strings or template literals.

Examples of incorrect code for this rule:

/*eslint no-useless-concat: "error"*/
/*eslint-env es6*/

// these are the same as "10"
var a = `some` + `string`;
var a = '1' + '0';
var a = '1' + `0`;
var a = `1` + '0';
var a = `1` + `0`;

Examples of correct code for this rule:

/*eslint no-useless-concat: "error"*/

// when a non string is included
var c = a + b;
var c = '1' + a;
var a = 1 + '1';
var c = 1 - 2;
// when the string concatenation is multiline
var c = "foo" +
    "bar";

When Not To Use It

If you don't want to be notified about unnecessary string concatenation, you can safely disable this rule. Source: http://eslint.org/docs/rules/

For more information visit Source: http://eslint.org/docs/rules/

Require Guarding for-in (guard-for-in)

Looping over objects with a for in loop will include properties that are inherited through the prototype chain. This behavior can lead to unexpected items in your for loop.

for (key in foo) {
    doSomething(key);
}

Note that simply checking foo.hasOwnProperty(key) is likely to cause an error in some cases; see [no-prototype-builtins](no-prototype-builtins.md).

Rule Details

This rule is aimed at preventing unexpected behavior that could arise from using a for in loop without filtering the results in the loop. As such, it will warn when for in loops do not filter their results with an if statement.

Examples of incorrect code for this rule:

/*eslint guard-for-in: "error"*/

for (key in foo) {
    doSomething(key);
}

Examples of correct code for this rule:

/*eslint guard-for-in: "error"*/

for (key in foo) {
    if (Object.prototype.hasOwnProperty.call(foo, key)) {
        doSomething(key);
    }
    if ({}.hasOwnProperty.call(foo, key)) {
        doSomething(key);
    }
}

Related Rules

• [no-prototype-builtins](no-prototype-builtins.md)

Further Reading

• Exploring JavaScript for-in loops
• The pitfalls of using objects as maps in JavaScript Source: http://eslint.org/docs/rules/

Disallow eval() (no-eval)

JavaScript's eval() function is potentially dangerous and is often misused. Using eval() on untrusted code can open a program up to several different injection attacks. The use of eval() in most contexts can be substituted for a better, alternative approach to a problem.

var obj = { x: "foo" },
    key = "x",
    value = eval("obj." + key);

Rule Details

This rule is aimed at preventing potentially dangerous, unnecessary, and slow code by disallowing the use of the eval() function. As such, it will warn whenever the eval() function is used.

Examples of incorrect code for this rule:

/*eslint no-eval: "error"*/

var obj = { x: "foo" },
    key = "x",
    value = eval("obj." + key);

(0, eval)("var a = 0");

var foo = eval;
foo("var a = 0");

// This `this` is the global object.
this.eval("var a = 0");

Example of additional incorrect code for this rule when browser environment is set to true:

/*eslint no-eval: "error"*/
/*eslint-env browser*/

window.eval("var a = 0");

Example of additional incorrect code for this rule when node environment is set to true:

/*eslint no-eval: "error"*/
/*eslint-env node*/

global.eval("var a = 0");

Examples of correct code for this rule:

/*eslint no-eval: "error"*/
/*eslint-env es6*/

var obj = { x: "foo" },
    key = "x",
    value = obj[key];

class A {
    foo() {
        // This is a user-defined method.
        this.eval("var a = 0");
    }

    eval() {
    }
}

Options

This rule has an option to allow indirect calls to eval. Indirect calls to eval are less dangerous than direct calls to eval because they cannot dynamically change the scope. Because of this, they also will not negatively impact performance to the degree of direct eval.

{
    "no-eval": ["error", {"allowIndirect": true}] // default is false
}

Example of incorrect code for this rule with the {"allowIndirect": true} option:

/*eslint no-eval: "error"*/

var obj = { x: "foo" },
    key = "x",
    value = eval("obj." + key);

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

/*eslint no-eval: "error"*/

(0, eval)("var a = 0");

var foo = eval;
foo("var a = 0");

this.eval("var a = 0");

/*eslint no-eval: "error"*/
/*eslint-env browser*/

window.eval("var a = 0");

/*eslint no-eval: "error"*/
/*eslint-env node*/

global.eval("var a = 0");

Known Limitations

• This rule is warning every eval() even if the eval is not global's. This behavior is in order to detect calls of direct eval. Such as:

module.exports = function(eval) {
      // If the value of this `eval` is built-in `eval` function, this is a
      // call of direct `eval`.
      eval("var a = 0");
  };

• This rule cannot catch renaming the global object. Such as:

var foo = window;
  foo.eval("var a = 0");

Further Reading

• Eval is Evil, Part One
• How evil is eval

Related Rules

• [no-implied-eval](no-implied-eval.md) Source: http://eslint.org/docs/rules/

For more information visit Source: http://eslint.org/docs/rules/

Disallow Shadowing of Variables Inside of catch (no-catch-shadow)

In IE 8 and earlier, the catch clause parameter can overwrite the value of a variable in the outer scope, if that variable has the same name as the catch clause parameter.

var err = "x";

try {
    throw "problem";
} catch (err) {

}

console.log(err)    // err is 'problem', not 'x'

Rule Details

This rule is aimed at preventing unexpected behavior in your program that may arise from a bug in IE 8 and earlier, in which the catch clause parameter can leak into outer scopes. This rule will warn whenever it encounters a catch clause parameter that has the same name as a variable in an outer scope.

Examples of incorrect code for this rule:

/*eslint no-catch-shadow: "error"*/

var err = "x";

try {
    throw "problem";
} catch (err) {

}

function err() {
    // ...
};

try {
    throw "problem";
} catch (err) {

}

Examples of correct code for this rule:

/*eslint no-catch-shadow: "error"*/

var err = "x";

try {
    throw "problem";
} catch (e) {

}

function err() {
    // ...
};

try {
    throw "problem";
} catch (e) {

}

When Not To Use It

If you do not need to support IE 8 and earlier, you should turn this rule off. Source: http://eslint.org/docs/rules/

disallow empty block statements (no-empty)

Empty block statements, while not technically errors, usually occur due to refactoring that wasn't completed. They can cause confusion when reading code.

Rule Details

This rule disallows empty block statements. This rule ignores block statements which contain a comment (for example, in an empty catch or finally block of a try statement to indicate that execution should continue regardless of errors).

Examples of incorrect code for this rule:

/*eslint no-empty: "error"*/

if (foo) {
}

while (foo) {
}

switch(foo) {
}

try {
    doSomething();
} catch(ex) {

} finally {

}

Examples of correct code for this rule:

/*eslint no-empty: "error"*/

if (foo) {
    // empty
}

while (foo) {
    /* empty */
}

try {
    doSomething();
} catch (ex) {
    // continue regardless of error
}

try {
    doSomething();
} finally {
    /* continue regardless of error */
}

Options

This rule has an object option for exceptions:

• "allowEmptyCatch": true allows empty catch clauses (that is, which do not contain a comment)

allowEmptyCatch

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

/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
try {
    doSomething();
} catch (ex) {}

try {
    doSomething();
}
catch (ex) {}
finally {
    /* continue regardless of error */
}

When Not To Use It

If you intentionally use empty block statements then you can disable this rule.

Related Rules

• [no-empty-function](./no-empty-function.md) Source: http://eslint.org/docs/rules/

Disallow Shadowing of Variables Inside of catch (no-catch-shadow)

In IE 8 and earlier, the catch clause parameter can overwrite the value of a variable in the outer scope, if that variable has the same name as the catch clause parameter.

var err = "x";

try {
    throw "problem";
} catch (err) {

}

console.log(err)    // err is 'problem', not 'x'

Rule Details

This rule is aimed at preventing unexpected behavior in your program that may arise from a bug in IE 8 and earlier, in which the catch clause parameter can leak into outer scopes. This rule will warn whenever it encounters a catch clause parameter that has the same name as a variable in an outer scope.

Examples of incorrect code for this rule:

/*eslint no-catch-shadow: "error"*/

var err = "x";

try {
    throw "problem";
} catch (err) {

}

function err() {
    // ...
};

try {
    throw "problem";
} catch (err) {

}

Examples of correct code for this rule:

/*eslint no-catch-shadow: "error"*/

var err = "x";

try {
    throw "problem";
} catch (e) {

}

function err() {
    // ...
};

try {
    throw "problem";
} catch (e) {

}

When Not To Use It

If you do not need to support IE 8 and earlier, you should turn this rule off. Source: http://eslint.org/docs/rules/

For more information visit Source: http://eslint.org/docs/rules/

For more information visit Source: http://eslint.org/docs/rules/

Disallow lexical declarations in case/default clauses (no-case-declarations)

This rule disallows lexical declarations (let, const, function and class) in case/default clauses. The reason is that the lexical declaration is visible in the entire switch block but it only gets initialized when it is assigned, which will only happen if the case where it is defined is reached.

To ensure that the lexical declaration only applies to the current case clause wrap your clauses in blocks.

Rule Details

This rule aims to prevent access to uninitialized lexical bindings as well as accessing hoisted functions across case clauses.

Examples of incorrect code for this rule:

/*eslint no-case-declarations: "error"*/
/*eslint-env es6*/

switch (foo) {
    case 1:
        let x = 1;
        break;
    case 2:
        const y = 2;
        break;
    case 3:
        function f() {}
        break;
    default:
        class C {}
}

Examples of correct code for this rule:

/*eslint no-case-declarations: "error"*/
/*eslint-env es6*/

// Declarations outside switch-statements are valid
const a = 0;

switch (foo) {
    // The following case clauses are wrapped into blocks using brackets
    case 1: {
        let x = 1;
        break;
    }
    case 2: {
        const y = 2;
        break;
    }
    case 3: {
        function f() {}
        break;
    }
    case 4:
        // Declarations using var without brackets are valid due to function-scope hoisting
        var z = 4;
        break;
    default: {
        class C {}
    }
}

When Not To Use It

If you depend on fall through behavior and want access to bindings introduced in the case block.

Related Rules

• [no-fallthrough](no-fallthrough.md) Source: http://eslint.org/docs/rules/

disallow irregular whitespace (no-irregular-whitespace)

Invalid or irregular whitespace causes issues with ECMAScript 5 parsers and also makes code harder to debug in a similar nature to mixed tabs and spaces.

Various whitespace characters can be inputted by programmers by mistake for example from copying or keyboard shortcuts. Pressing Alt + Space on OS X adds in a non breaking space character for example.

Known issues these spaces cause:

• Zero Width Space
  • Is NOT considered a separator for tokens and is often parsed as an Unexpected token ILLEGAL
  • Is NOT shown in modern browsers making code repository software expected to resolve the visualisation
• Line Separator
  • Is NOT a valid character within JSON which would cause parse errors

Rule Details

This rule is aimed at catching invalid whitespace that is not a normal tab and space. Some of these characters may cause issues in modern browsers and others will be a debugging issue to spot.

This rule disallows the following characters except where the options allow:

\u000B - Line Tabulation (\v) - <vt>
\u000C - Form Feed (\f) - <ff>
\u00A0 - No-Break Space - <nbsp>
\u0085 - Next Line
\u1680 - Ogham Space Mark
\u180E - Mongolian Vowel Separator - <mvs>
\ufeff - Zero Width No-Break Space - <bom>
\u2000 - En Quad
\u2001 - Em Quad
\u2002 - En Space - <ensp>
\u2003 - Em Space - <emsp>
\u2004 - Tree-Per-Em
\u2005 - Four-Per-Em
\u2006 - Six-Per-Em
\u2007 - Figure Space
\u2008 - Punctuation Space - <puncsp>
\u2009 - Thin Space
\u200A - Hair Space
\u200B - Zero Width Space - <zwsp>
\u2028 - Line Separator
\u2029 - Paragraph Separator
\u202F - Narrow No-Break Space
\u205f - Medium Mathematical Space
\u3000 - Ideographic Space</zwsp></puncsp></emsp></ensp></bom></mvs></nbsp></ff></vt>

Options

This rule has an object option for exceptions:

• "skipStrings": true (default) allows any whitespace characters in string literals
• "skipComments": true allows any whitespace characters in comments
• "skipRegExps": true allows any whitespace characters in regular expression literals
• "skipTemplates": true allows any whitespace characters in template literals

skipStrings

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

/*eslint no-irregular-whitespace: "error"*/

function thing() /*<nbsp>*/{
    return 'test';
}

function thing( /*<nbsp>*/){
    return 'test';
}

function thing /*<nbsp>*/(){
    return 'test';
}

function thing᠎/*<mvs>*/(){
    return 'test';
}

function thing() {
    return 'test'; /*<ensp>*/
}

function thing() {
    return 'test'; /*<nbsp>*/
}

function thing() {
    // Description <nbsp>: some descriptive text
}

/*
Description <nbsp>: some descriptive text
*/

function thing() {
    return / <nbsp>regexp/;
}

/*eslint-env es6*/
function thing() {
    return `template <nbsp>string`;
}</nbsp></nbsp></nbsp></nbsp></nbsp></ensp></mvs></nbsp></nbsp></nbsp>

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

/*eslint no-irregular-whitespace: "error"*/

function thing() {
    return ' <nbsp>thing';
}

function thing() {
    return '​<zwsp>thing';
}

function thing() {
    return 'th <nbsp>ing';
}</nbsp></zwsp></nbsp>

skipComments

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

/*eslint no-irregular-whitespace: ["error", { "skipComments": true }]*/

function thing() {
    // Description <nbsp>: some descriptive text
}

/*
Description <nbsp>: some descriptive text
*/</nbsp></nbsp>

skipRegExps

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

/*eslint no-irregular-whitespace: ["error", { "skipRegExps": true }]*/

function thing() {
    return / <nbsp>regexp/;
}</nbsp>

skipTemplates

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

/*eslint no-irregular-whitespace: ["error", { "skipTemplates": true }]*/
/*eslint-env es6*/

function thing() {
    return `template <nbsp>string`;
}</nbsp>

When Not To Use It

If you decide that you wish to use whitespace other than tabs and spaces outside of strings in your application.

Further Reading

• ECMA whitespace
• JSON whitespace issues Source: http://eslint.org/docs/rules/

For more information visit Source: http://eslint.org/docs/rules/

disallow empty block statements (no-empty)

Empty block statements, while not technically errors, usually occur due to refactoring that wasn't completed. They can cause confusion when reading code.

Rule Details

This rule disallows empty block statements. This rule ignores block statements which contain a comment (for example, in an empty catch or finally block of a try statement to indicate that execution should continue regardless of errors).

Examples of incorrect code for this rule:

/*eslint no-empty: "error"*/

if (foo) {
}

while (foo) {
}

switch(foo) {
}

try {
    doSomething();
} catch(ex) {

} finally {

}

Examples of correct code for this rule:

/*eslint no-empty: "error"*/

if (foo) {
    // empty
}

while (foo) {
    /* empty */
}

try {
    doSomething();
} catch (ex) {
    // continue regardless of error
}

try {
    doSomething();
} finally {
    /* continue regardless of error */
}

Options

This rule has an object option for exceptions:

• "allowEmptyCatch": true allows empty catch clauses (that is, which do not contain a comment)

allowEmptyCatch

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

/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
try {
    doSomething();
} catch (ex) {}

try {
    doSomething();
}
catch (ex) {}
finally {
    /* continue regardless of error */
}

When Not To Use It

If you intentionally use empty block statements then you can disable this rule.

Related Rules

• [no-empty-function](./no-empty-function.md) Source: http://eslint.org/docs/rules/

For more information visit Source: http://eslint.org/docs/rules/