`indent`

有一些常见的指南要求对嵌套的块和语句进行特定的缩进，例如

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

这些是不同风格指南中推荐的最常见场景

两个空格，不超过两个空格，不使用制表符：Google、npm、Node.js、Idiomatic、Felix
制表符：jQuery
四个空格：Crockford

规则详情

此规则强制执行一致的缩进风格。默认风格为4 个空格。

选项

此规则有一个混合选项

例如，对于 2 个空格缩进

json

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

或者对于制表符缩进

json

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

使用默认选项时，此规则的错误代码示例

/*eslint @stylistic/js/indent: "error"*/

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

incorrect

使用默认选项时，此规则的正确代码示例

/*eslint @stylistic/js/indent: "error"*/

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

correct

此规则有一个对象选项

"ignoredNodes" 可用于禁用对任何 AST 节点的缩进检查。它接受一个选择器数组。如果任何选择器匹配 AST 节点，则该节点的直接子节点的缩进将被忽略。这可以用作一个逃生舱口，如果你不同意它对特定语法模式强制执行的缩进，则可以放松规则。
"SwitchCase"（默认值：0）强制执行switch语句中case子句的缩进级别。
"VariableDeclarator"（默认值：1）强制执行var声明器的缩进级别；也可以接受一个对象来定义var、let和const声明的单独规则。它也可以是"first"，表示所有声明器应与第一个声明器对齐。
"outerIIFEBody"（默认值：1）强制执行文件级IIFE的缩进级别。这也可以设置为"off"以禁用对文件级IIFE的检查。
"MemberExpression"（默认值：1）强制执行多行属性链的缩进级别。这也可以设置为"off"以禁用对MemberExpression缩进的检查。
"FunctionDeclaration"接受一个对象来定义函数声明的规则。
- parameters（默认值：1）强制执行函数声明中参数的缩进级别。这可以是一个表示缩进级别的数字，也可以是字符串"first"，表示声明的所有参数必须与第一个参数对齐。这也可以设置为"off"以禁用对FunctionDeclaration参数的检查。
- body（默认值：1）强制执行函数声明主体部分的缩进级别。
"FunctionExpression"接受一个对象来定义函数表达式的规则。
- parameters（默认值：1）强制执行函数表达式中参数的缩进级别。这可以是一个表示缩进级别的数字，也可以是字符串"first"，表示表达式的所有参数必须与第一个参数对齐。这也可以设置为"off"以禁用对FunctionExpression参数的检查。
- body（默认值：1）强制执行函数表达式主体部分的缩进级别。
"StaticBlock"接受一个对象来定义类静态块的规则。
- body（默认值：1）强制执行类静态块主体部分的缩进级别。
"CallExpression"接受一个对象来定义函数调用表达式的规则。
- arguments（默认值：1）强制执行调用表达式中参数的缩进级别。这可以是一个表示缩进级别的数字，也可以是字符串"first"，表示表达式的所有参数必须与第一个参数对齐。这也可以设置为"off"以禁用对CallExpression参数的检查。
"ArrayExpression"（默认值：1）强制执行数组中元素的缩进级别。它也可以设置为字符串"first"，表示数组中的所有元素应与第一个元素对齐。这也可以设置为"off"以禁用对数组元素的检查。
"ObjectExpression"（默认值：1）强制对象中属性的缩进级别。它可以设置为字符串"first"，表示对象中的所有属性应与第一个属性对齐。它也可以设置为"off"以禁用对对象属性的检查。
"ImportDeclaration"（默认值：1）强制导入语句的缩进级别。它可以设置为字符串"first"，表示从模块导入的所有成员应与列表中的第一个成员对齐。它也可以设置为"off"以禁用对导入的模块成员的检查。
"flatTernaryExpressions": true（默认情况下为false）要求嵌套在其他三元表达式中的三元表达式不缩进。
"offsetTernaryExpressions": true（默认情况下为false）要求缩进三元表达式的值。
"ignoreComments"（默认值：false）可以在不需要将注释与前一行或下一行的节点对齐时使用。

缩进级别表示指定缩进的倍数。示例

缩进 4 个空格，VariableDeclarator 设置为 2 将使用 8 个空格缩进多行变量声明。
缩进 2 个空格，VariableDeclarator 设置为 2 将使用 4 个空格缩进多行变量声明。
缩进 2 个空格，VariableDeclarator 设置为 {"var": 2, "let": 2, "const": 3} 将使用 4 个空格缩进 var 和 let 的多行变量声明，使用 6 个空格缩进 const 语句。
缩进制表符，VariableDeclarator 设置为 2 将使用 2 个制表符缩进多行变量声明。
缩进 2 个空格，SwitchCase 设置为 0 将不会相对于 switch 语句缩进 case 子句。
缩进 2 个空格，SwitchCase 设置为 1 将相对于 switch 语句使用 2 个空格缩进 case 子句。
缩进 2 个空格，SwitchCase 设置为 2 将相对于 switch 语句使用 4 个空格缩进 case 子句。
缩进制表符，SwitchCase 设置为 2 将相对于 switch 语句使用 2 个制表符缩进 case 子句。
缩进 2 个空格，MemberExpression 设置为 0 将使用 0 个空格缩进多行属性链。
缩进 2 个空格，MemberExpression 设置为 1 将使用 2 个空格缩进多行属性链。
缩进 2 个空格，MemberExpression 设置为 2 将使用 4 个空格缩进多行属性链。
使用 MemberExpression 设置为 0 的 4 个空格缩进将使多行属性链缩进 0 个空格。
使用 MemberExpression 设置为 1 的 4 个空格缩进将使多行属性链缩进 4 个空格。
使用 MemberExpression 设置为 2 的 4 个空格缩进将使多行属性链缩进 8 个空格。

tab

使用 "tab" 选项时，此规则的错误代码示例

/*eslint @stylistic/js/indent: ["error", "tab"]*/

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

incorrect

使用 "tab" 选项时，此规则的正确代码示例

/*eslint @stylistic/js/indent: ["error", "tab"]*/

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

correct

ignoredNodes

以下配置忽略 ConditionalExpression（“三元表达式”）节点的缩进

使用 4, { "ignoredNodes": ["ConditionalExpression"] } 选项时，此规则的正确代码示例

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

var a = foo
      ? bar
      : baz;

var a = foo
                ? bar
: baz;

correct

以下配置忽略 IIFE 主体中的缩进。

使用 4, { "ignoredNodes": ["CallExpression > FunctionExpression.callee > BlockStatement.body"] } 选项时，此规则的正确代码示例

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

(function() {

foo();
bar();

})();

correct

所有 AST 节点类型可以在 ESTree 规范中找到。您可以使用 AST Explorer 和 espree 解析器来检查代码片段的 AST 树。

SwitchCase

使用 2, { "SwitchCase": 1 } 选项时，此规则的错误代码示例

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

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

incorrect

使用 2, { "SwitchCase": 1 } 选项时，此规则的正确代码示例

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

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

correct

VariableDeclarator

使用 2, { "VariableDeclarator": 1 } 选项时，此规则的错误代码示例

/*eslint @stylistic/js/indent: ["error", 2, { "VariableDeclarator": 1 }]*/
/*eslint-env es6*/

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

incorrect

使用 2, { "VariableDeclarator": 1 } 选项时，此规则的正确代码示例

/*eslint @stylistic/js/indent: ["error", 2, { "VariableDeclarator": 1 }]*/
/*eslint-env es6*/

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

correct

使用 2, { "VariableDeclarator": 2 } 选项时，此规则的正确代码示例

/*eslint @stylistic/js/indent: ["error", 2, { "VariableDeclarator": 2 }]*/
/*eslint-env es6*/

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

correct

使用 2, { "VariableDeclarator": "first" } 选项时，此规则的错误代码示例

/*eslint @stylistic/js/indent: ["error", 2, { "VariableDeclarator": "first" }]*/
/*eslint-env es6*/

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

incorrect

使用 2, { "VariableDeclarator": "first" } 选项时，此规则的正确代码示例

/*eslint @stylistic/js/indent: ["error", 2, { "VariableDeclarator": "first" }]*/
/*eslint-env es6*/

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

correct

使用 2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } } 选项时，此规则的正确代码示例

/*eslint @stylistic/js/indent: ["error", 2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }]*/
/*eslint-env es6*/

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

correct

outerIIFEBody

此规则使用选项 2, { "outerIIFEBody": 0 } 的错误代码示例

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

(function() {

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

})();

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

incorrect

此规则使用选项 2, { "outerIIFEBody": 0 } 的正确代码示例

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

(function() {

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

})();

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

correct

此规则使用选项 2, { "outerIIFEBody": "off" } 的正确代码示例

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

(function() {

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

})();

(function() {

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

})();

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

correct

成员表达式

此规则使用选项 2, { "MemberExpression": 1 } 的错误代码示例

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

foo
.bar
.baz()

incorrect

此规则使用选项 2, { "MemberExpression": 1 } 的正确代码示例

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

foo
  .bar
  .baz();

correct

函数声明

此规则使用选项 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} } 的错误代码示例

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

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

incorrect

此规则使用选项 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} } 的正确代码示例

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

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

correct

此规则使用选项 2, { "FunctionDeclaration": {"parameters": "first"} } 的错误代码示例

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

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

incorrect

此规则使用选项 2, { "FunctionDeclaration": {"parameters": "first"} } 的正确代码示例

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

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

correct

函数表达式

此规则使用选项 2, { "FunctionExpression": {"body": 1, "parameters": 2} } 的错误代码示例

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

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

incorrect

此规则使用选项 2, { "FunctionExpression": {"body": 1, "parameters": 2} } 的正确代码示例

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

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

correct

此规则使用选项 2, { "FunctionExpression": {"parameters": "first"} } 的错误代码示例

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

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

incorrect

此规则使用选项 2, { "FunctionExpression": {"parameters": "first"} } 的正确代码示例

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

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

correct

静态块

此规则使用选项 2, { "StaticBlock": {"body": 1} } 的错误代码示例

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

class C {
  static {
      
foo();
  }
}

incorrect

此规则使用选项 2, { "StaticBlock": {"body": 1} } 的正确代码示例

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

class C {
  static {
    foo();
  }
}

correct

此规则使用选项 2, { "StaticBlock": {"body": 2} } 的错误代码示例

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

class C {
  static {
    
foo();
  }
}

incorrect

此规则使用选项 2, { "StaticBlock": {"body": 2} } 的正确代码示例

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

class C {
  static {
      foo();
  }
}

correct

调用表达式

此规则使用选项 2, { "CallExpression": {"arguments": 1} } 的错误代码示例

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

foo(bar,
    
baz,
      
qux
);

incorrect

此规则使用 2, { "CallExpression": {"arguments": 1} } 选项的正确代码示例

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

foo(bar,
  baz,
  qux
);

correct

此规则使用 2, { "CallExpression": {"arguments": "first"} } 选项的错误代码示例

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

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

incorrect

此规则使用 2, { "CallExpression": {"arguments": "first"} } 选项的正确代码示例

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

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

correct

ArrayExpression

此规则使用 2, { "ArrayExpression": 1 } 选项的错误代码示例

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

var foo = [
    
bar,
baz,
      
qux
];

incorrect

此规则使用 2, { "ArrayExpression": 1 } 选项的正确代码示例

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

var foo = [
  bar,
  baz,
  qux
];

correct

此规则使用 2, { "ArrayExpression": "first" } 选项的错误代码示例

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

var foo = [bar,
  
baz,
  
qux
];

incorrect

此规则使用 2, { "ArrayExpression": "first" } 选项的正确代码示例

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

var foo = [bar,
           baz,
           qux
];

correct

ObjectExpression

此规则使用 2, { "ObjectExpression": 1 } 选项的错误代码示例

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

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

incorrect

此规则使用 2, { "ObjectExpression": 1 } 选项的正确代码示例

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

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

correct

此规则使用 2, { "ObjectExpression": "first" } 选项的错误代码示例

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

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

incorrect

此规则使用 2, { "ObjectExpression": "first" } 选项的正确代码示例

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

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

correct

ImportDeclaration

此规则使用 4, { "ImportDeclaration": 1 } 选项（默认）的正确代码示例

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

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

correct

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

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

correct

此规则使用 4, { "ImportDeclaration": "first" } 选项的错误代码示例

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

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

incorrect

此规则使用 4, { "ImportDeclaration": "first" } 选项的正确代码示例

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

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

correct

flatTernaryExpressions

此规则使用默认 4, { "flatTernaryExpressions": false } 选项的错误代码示例

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

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

incorrect

此规则使用默认 4, { "flatTernaryExpressions": false } 选项的正确代码示例

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

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

correct

此规则使用 4, { "flatTernaryExpressions": true } 选项的错误代码示例

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

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

incorrect

此规则使用 4, { "flatTernaryExpressions": true } 选项的正确代码示例

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

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

correct

offsetTernaryExpressions

此规则使用默认 2, { "offsetTernaryExpressions": false } 选项的错误代码示例

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

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

incorrect

此规则使用默认 2, { "offsetTernaryExpressions": false } 选项的正确代码示例

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

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

correct

此规则使用 2, { "offsetTernaryExpressions": true } 选项的错误代码示例

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

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

incorrect

使用 2, { "offsetTernaryExpressions": true } 选项时，此规则的正确代码示例

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

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

correct

ignoreComments

使用 4, { "ignoreComments": true } 选项时，此规则的更多正确代码示例

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

if (foo) {
    doSomething();

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

correct

兼容性

JSHint: indent
JSCS: validateIndentation

indent ​

规则详情 ​

选项 ​

tab ​

ignoredNodes ​

SwitchCase ​

VariableDeclarator ​

outerIIFEBody ​

成员表达式 ​

函数声明 ​

函数表达式 ​

静态块 ​

调用表达式 ​

ArrayExpression ​

ObjectExpression ​

ImportDeclaration ​

flatTernaryExpressions ​

offsetTernaryExpressions ​

ignoreComments ​

兼容性 ​

`indent`

规则详情

选项

tab

ignoredNodes

SwitchCase

VariableDeclarator

outerIIFEBody

成员表达式

函数声明

函数表达式

静态块

调用表达式

ArrayExpression

ObjectExpression

ImportDeclaration

flatTernaryExpressions

offsetTernaryExpressions

ignoreComments

兼容性