indent - ESLint - Pluggable JavaScript Linter (original) (raw)

Enforce consistent indentation

đź”§ Fixable

Some problems reported by this rule are automatically fixable by the --fix command line option

Table of Contents

  1. Rule Details
  2. Options
    1. tab
    2. ignoredNodes
    3. SwitchCase
    4. VariableDeclarator
    5. outerIIFEBody
    6. MemberExpression
    7. FunctionDeclaration
    8. FunctionExpression
    9. StaticBlock
    10. CallExpression
    11. ArrayExpression
    12. ObjectExpression
    13. ImportDeclaration
    14. flatTernaryExpressions
    15. offsetTernaryExpressions
    16. ignoreComments
  3. Compatibility
  4. Version
  5. Resources

There are several common guidelines which require specific indentation of nested blocks and statements, like:

function hello(indentSize, type) {
    if (indentSize === 4 && type !== 'tab') {
        console.log('Each next indentation will increase on 4 spaces');
    }
}

These are the most common scenarios recommended in different style guides:

Rule Details

This rule enforces a consistent indentation style. The default style is 4 spaces.

Options

This rule has a mixed option:

For example, for 2-space indentation:

{
    "indent": ["error", 2]
}

Or for tabbed indentation:

{
    "indent": ["error", "tab"]
}

Examples of incorrect code for this rule with the default options:

Examples of correct code for this rule with the default options:

This rule has an object option:

Level of indentation denotes the multiple of the indent specified. Example:

tab

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

Open in Playground

/*eslint indent: ["error", "tab"]*/

if (a) {
     b=c;
function foo(d) {
           e=f;
 }
}

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

Open in Playground

/*eslint indent: ["error", "tab"]*/

if (a) {
    b=c;
    function foo(d) {
        e=f;
    }
}

ignoredNodes

The following configuration ignores the indentation of ConditionalExpression (“ternary expression”) nodes:

Examples of correct code for this rule with the 4, { "ignoredNodes": ["ConditionalExpression"] } option:

Open in Playground

/*eslint indent: ["error", 4, { "ignoredNodes": ["ConditionalExpression"] }]*/

var a = foo
      ? bar
      : baz;

var a = foo
                ? bar
: baz;

The following configuration ignores indentation in the body of IIFEs.

Examples of correct code for this rule with the 4, { "ignoredNodes": ["CallExpression > FunctionExpression.callee > BlockStatement.body"] } option:

Open in Playground

/*eslint indent: ["error", 4, { "ignoredNodes": ["CallExpression > FunctionExpression.callee > BlockStatement.body"] }]*/

(function() {

foo();
bar();

})();

All AST node types can be found at ESTree specification. You can use AST Explorer with the espree parser to examine AST tree of a code snippet.

SwitchCase

Examples of incorrect code for this rule with the 2, { "SwitchCase": 1 } options:

Open in Playground

/*eslint indent: ["error", 2, { "SwitchCase": 1 }]*/

switch(a){
case "a":
    break;
case "b":
    break;
}

Examples of correct code for this rule with the 2, { "SwitchCase": 1 } option:

Open in Playground

/*eslint indent: ["error", 2, { "SwitchCase": 1 }]*/

switch(a){
  case "a":
    break;
  case "b":
    break;
}

VariableDeclarator

Examples of incorrect code for this rule with the 2, { "VariableDeclarator": 1 } options:

Open in Playground

/*eslint indent: ["error", 2, { "VariableDeclarator": 1 }]*/

var a,
    b,
    c;
let d,
    e,
    f;
const g = 1,
    h = 2,
    i = 3;

Examples of correct code for this rule with the 2, { "VariableDeclarator": 1 } options:

Open in Playground

/*eslint indent: ["error", 2, { "VariableDeclarator": 1 }]*/

var a,
  b,
  c;
let d,
  e,
  f;
const g = 1,
  h = 2,
  i = 3;

Examples of correct code for this rule with the 2, { "VariableDeclarator": 2 } options:

Open in Playground

/*eslint indent: ["error", 2, { "VariableDeclarator": 2 }]*/

var a,
    b,
    c;
let d,
    e,
    f;
const g = 1,
    h = 2,
    i = 3;

Examples of incorrect code for this rule with the 2, { "VariableDeclarator": "first" } options:

Open in Playground

/*eslint indent: ["error", 2, { "VariableDeclarator": "first" }]*/

var a,
  b,
  c;
let d,
  e,
  f;
const g = 1,
  h = 2,
  i = 3;

Examples of correct code for this rule with the 2, { "VariableDeclarator": "first" } options:

Open in Playground

/*eslint indent: ["error", 2, { "VariableDeclarator": "first" }]*/

var a,
    b,
    c;
let d,
    e,
    f;
const g = 1,
      h = 2,
      i = 3;

Examples of correct code for this rule with the 2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } } options:

Open in Playground

/*eslint indent: ["error", 2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }]*/

var a,
    b,
    c;
let d,
    e,
    f;
const g = 1,
      h = 2,
      i = 3;

outerIIFEBody

Examples of incorrect code for this rule with the options 2, { "outerIIFEBody": 0 }:

Open in Playground

/*eslint indent: ["error", 2, { "outerIIFEBody": 0 }]*/

(function() {

  function foo(x) {
    return x + 1;
  }

})();

if (y) {
console.log('foo');
}

Examples of correct code for this rule with the options 2, { "outerIIFEBody": 0 }:

Open in Playground

/*eslint indent: ["error", 2, { "outerIIFEBody": 0 }]*/

(function() {

function foo(x) {
  return x + 1;
}

})();

if (y) {
  console.log('foo');
}

Examples of correct code for this rule with the options 2, { "outerIIFEBody": "off" }:

Open in Playground

/*eslint indent: ["error", 2, { "outerIIFEBody": "off" }]*/

(function() {

function foo(x) {
  return x + 1;
}

})();

(function() {

  function foo(x) {
    return x + 1;
  }

})();

if (y) {
  console.log('foo');
}

MemberExpression

Examples of incorrect code for this rule with the 2, { "MemberExpression": 1 } options:

Open in Playground

/*eslint indent: ["error", 2, { "MemberExpression": 1 }]*/

foo
.bar
.baz()

Examples of correct code for this rule with the 2, { "MemberExpression": 1 } option:

Open in Playground

/*eslint indent: ["error", 2, { "MemberExpression": 1 }]*/

foo
  .bar
  .baz();

FunctionDeclaration

Examples of incorrect code for this rule with the 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} } option:

Open in Playground

/*eslint indent: ["error", 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }]*/

function foo(bar,
  baz,
  qux) {
    qux();
}

Examples of correct code for this rule with the 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} } option:

Open in Playground

/*eslint indent: ["error", 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }]*/

function foo(bar,
    baz,
    qux) {
  qux();
}

Examples of incorrect code for this rule with the 2, { "FunctionDeclaration": {"parameters": "first"} } option:

Open in Playground

/*eslint indent: ["error", 2, {"FunctionDeclaration": {"parameters": "first"}}]*/

function foo(bar, baz,
  qux, boop) {
  qux();
}

Examples of correct code for this rule with the 2, { "FunctionDeclaration": {"parameters": "first"} } option:

Open in Playground

/*eslint indent: ["error", 2, {"FunctionDeclaration": {"parameters": "first"}}]*/

function foo(bar, baz,
             qux, boop) {
  qux();
}

FunctionExpression

Examples of incorrect code for this rule with the 2, { "FunctionExpression": {"body": 1, "parameters": 2} } option:

Open in Playground

/*eslint indent: ["error", 2, { "FunctionExpression": {"body": 1, "parameters": 2} }]*/

var foo = function(bar,
  baz,
  qux) {
    qux();
}

Examples of correct code for this rule with the 2, { "FunctionExpression": {"body": 1, "parameters": 2} } option:

Open in Playground

/*eslint indent: ["error", 2, { "FunctionExpression": {"body": 1, "parameters": 2} }]*/

var foo = function(bar,
    baz,
    qux) {
  qux();
}

Examples of incorrect code for this rule with the 2, { "FunctionExpression": {"parameters": "first"} } option:

Open in Playground

/*eslint indent: ["error", 2, {"FunctionExpression": {"parameters": "first"}}]*/

var foo = function(bar, baz,
  qux, boop) {
  qux();
}

Examples of correct code for this rule with the 2, { "FunctionExpression": {"parameters": "first"} } option:

Open in Playground

/*eslint indent: ["error", 2, {"FunctionExpression": {"parameters": "first"}}]*/

var foo = function(bar, baz,
                   qux, boop) {
  qux();
}

StaticBlock

Examples of incorrect code for this rule with the 2, { "StaticBlock": {"body": 1} } option:

Open in Playground

/*eslint indent: ["error", 2, { "StaticBlock": {"body": 1} }]*/

class C {
  static {
      foo();
  }
}

Examples of correct code for this rule with the 2, { "StaticBlock": {"body": 1} } option:

Open in Playground

/*eslint indent: ["error", 2, { "StaticBlock": {"body": 1} }]*/

class C {
  static {
    foo();
  }
}

Examples of incorrect code for this rule with the 2, { "StaticBlock": {"body": 2} } option:

Open in Playground

/*eslint indent: ["error", 2, { "StaticBlock": {"body": 2} }]*/

class C {
  static {
    foo();
  }
}

Examples of correct code for this rule with the 2, { "StaticBlock": {"body": 2} } option:

Open in Playground

/*eslint indent: ["error", 2, { "StaticBlock": {"body": 2} }]*/

class C {
  static {
      foo();
  }
}

CallExpression

Examples of incorrect code for this rule with the 2, { "CallExpression": {"arguments": 1} } option:

Open in Playground

/*eslint indent: ["error", 2, { "CallExpression": {"arguments": 1} }]*/

foo(bar,
    baz,
      qux
);

Examples of correct code for this rule with the 2, { "CallExpression": {"arguments": 1} } option:

Open in Playground

/*eslint indent: ["error", 2, { "CallExpression": {"arguments": 1} }]*/

foo(bar,
  baz,
  qux
);

Examples of incorrect code for this rule with the 2, { "CallExpression": {"arguments": "first"} } option:

Open in Playground

/*eslint indent: ["error", 2, {"CallExpression": {"arguments": "first"}}]*/

foo(bar, baz,
  baz, boop, beep);

Examples of correct code for this rule with the 2, { "CallExpression": {"arguments": "first"} } option:

Open in Playground

/*eslint indent: ["error", 2, {"CallExpression": {"arguments": "first"}}]*/

foo(bar, baz,
    baz, boop, beep);

ArrayExpression

Examples of incorrect code for this rule with the 2, { "ArrayExpression": 1 } option:

Open in Playground

/*eslint indent: ["error", 2, { "ArrayExpression": 1 }]*/

var foo = [
    bar,
baz,
      qux
];

Examples of correct code for this rule with the 2, { "ArrayExpression": 1 } option:

Open in Playground

/*eslint indent: ["error", 2, { "ArrayExpression": 1 }]*/

var foo = [
  bar,
  baz,
  qux
];

Examples of incorrect code for this rule with the 2, { "ArrayExpression": "first" } option:

Open in Playground

/*eslint indent: ["error", 2, {"ArrayExpression": "first"}]*/

var foo = [bar,
  baz,
  qux
];

Examples of correct code for this rule with the 2, { "ArrayExpression": "first" } option:

Open in Playground

/*eslint indent: ["error", 2, {"ArrayExpression": "first"}]*/

var foo = [bar,
           baz,
           qux
];

ObjectExpression

Examples of incorrect code for this rule with the 2, { "ObjectExpression": 1 } option:

Open in Playground

/*eslint indent: ["error", 2, { "ObjectExpression": 1 }]*/

var foo = {
    bar: 1,
baz: 2,
      qux: 3
};

Examples of correct code for this rule with the 2, { "ObjectExpression": 1 } option:

Open in Playground

/*eslint indent: ["error", 2, { "ObjectExpression": 1 }]*/

var foo = {
  bar: 1,
  baz: 2,
  qux: 3
};

Examples of incorrect code for this rule with the 2, { "ObjectExpression": "first" } option:

Open in Playground

/*eslint indent: ["error", 2, {"ObjectExpression": "first"}]*/

var foo = { bar: 1,
  baz: 2 };

Examples of correct code for this rule with the 2, { "ObjectExpression": "first" } option:

Open in Playground

/*eslint indent: ["error", 2, {"ObjectExpression": "first"}]*/

var foo = { bar: 1,
            baz: 2 };

ImportDeclaration

Examples of correct code for this rule with the 4, { "ImportDeclaration": 1 } option (the default):

Open in Playground

/*eslint indent: ["error", 4, { "ImportDeclaration": 1 }]*/

import { foo,
    bar,
    baz,
} from 'qux';

Open in Playground

/*eslint indent: ["error", 4, { "ImportDeclaration": 1 }]*/

import {
    foo,
    bar,
    baz,
} from 'qux';

Examples of incorrect code for this rule with the 4, { "ImportDeclaration": "first" } option:

Open in Playground

/*eslint indent: ["error", 4, { "ImportDeclaration": "first" }]*/

import { foo,
    bar,
    baz,
} from 'qux';

Examples of correct code for this rule with the 4, { "ImportDeclaration": "first" } option:

Open in Playground

/*eslint indent: ["error", 4, { "ImportDeclaration": "first" }]*/

import { foo,
         bar,
         baz,
} from 'qux';

flatTernaryExpressions

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

Open in Playground

/*eslint indent: ["error", 4, { "flatTernaryExpressions": false }]*/

var a =
    foo ? bar :
    baz ? qux :
    boop;

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

Open in Playground

/*eslint indent: ["error", 4, { "flatTernaryExpressions": false }]*/

var a =
    foo ? bar :
        baz ? qux :
            boop;

Examples of incorrect code for this rule with the 4, { "flatTernaryExpressions": true } option:

Open in Playground

/*eslint indent: ["error", 4, { "flatTernaryExpressions": true }]*/

var a =
    foo ? bar :
        baz ? qux :
            boop;

Examples of correct code for this rule with the 4, { "flatTernaryExpressions": true } option:

Open in Playground

/*eslint indent: ["error", 4, { "flatTernaryExpressions": true }]*/

var a =
    foo ? bar :
    baz ? qux :
    boop;

offsetTernaryExpressions

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

Open in Playground

/*eslint indent: ["error", 2, { "offsetTernaryExpressions": false }]*/

condition
  ? () => {
      return true
    }
  : () => {
      false
    }

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

Open in Playground

/*eslint indent: ["error", 2, { "offsetTernaryExpressions": false }]*/

condition
  ? () => {
    return true
  }
  : condition2
    ? () => {
      return true
    }
    : () => {
      return false
    }

Examples of incorrect code for this rule with the 2, { "offsetTernaryExpressions": true } option:

Open in Playground

/*eslint indent: ["error", 2, { "offsetTernaryExpressions": true }]*/

condition
  ? () => {
    return true
  }
  : condition2
    ? () => {
      return true
    }
    : () => {
      return false
    }

Examples of correct code for this rule with the 2, { "offsetTernaryExpressions": true } option:

Open in Playground

/*eslint indent: ["error", 2, { "offsetTernaryExpressions": true }]*/

condition
  ? () => {
      return true
    }
  : condition2
    ? () => {
        return true
      }
    : () => {
        return false
      }

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

Open in Playground

/*eslint indent: ["error", 4, { "ignoreComments": true }] */

if (foo) {
    doSomething();

// comment intentionally de-indented
    doSomethingElse();
}

Compatibility

Version

This rule was introduced in ESLint v0.14.0.

Resources