indent

強制執行一致的縮排

🔧

此規則報告的某些問題可透過 --fix 命令列選項自動修正

重要事項

此規則已在 ESLint v8.53.0 中棄用。請使用 @stylistic/eslint-plugin-js 中的對應規則。

了解更多

有幾個常見的指南要求巢狀區塊和陳述式進行特定的縮排，例如

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

以下是不同風格指南中建議的最常見情境

兩個空格，不要更長，且沒有 Tab：Google、npm、Node.js、Idiomatic、Felix
Tab：jQuery
四個空格：Crockford

規則詳細資訊

此規則強制執行一致的縮排風格。預設風格為 4 個空格。

選項

此規則具有混合選項

例如，對於 2 個空格的縮排

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

或對於 Tab 縮排

{
    "indent": ["error", "tab"]
}
1
2
3

此規則使用預設選項的錯誤程式碼範例

在 Playground 中開啟

/*eslint indent: "error"*/

if (a) {
  b=c;
  function foo(d) {
    e=f;
  }
}
1
2
3
4
5
6
7
8

此規則使用預設選項的正確程式碼範例

在 Playground 中開啟

/*eslint indent: "error"*/

if (a) {
    b=c;
    function foo(d) {
        e=f;
    }
}
1
2
3
4
5
6
7
8

此規則具有物件選項

"ignoredNodes" 可用於停用任何 AST 節點的縮排檢查。這接受選擇器陣列。如果 AST 節點與任何選擇器匹配，則將忽略該節點的直接子代的 Token 縮排。如果不同意規則對於特定語法模式強制執行的縮排，則可以使用此選項作為應急措施來放寬規則。
"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）強制執行 import 陳述式的縮排層級。可以將其設定為字串 "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 陳述式。
縮排為 Tab，VariableDeclarator 設定為 2 將以 2 個 Tab 縮排多行變數宣告。
縮排為 2 個空格，SwitchCase 設定為 0 將不會相對於 switch 陳述式縮排 case 子句。
縮排為 2 個空格，SwitchCase 設定為 1 將相對於 switch 陳述式以 2 個空格縮排 case 子句。
縮排為 2 個空格，SwitchCase 設定為 2 將相對於 switch 陳述式以 4 個空格縮排 case 子句。
縮排為 Tab，SwitchCase 設定為 2 將相對於 switch 陳述式以 2 個 Tab 縮排 case 子句。
縮排為 2 個空格，MemberExpression 設定為 0 將以 0 個空格縮排多行屬性鏈。
縮排為 2 個空格，MemberExpression 設定為 1 將以 2 個空格縮排多行屬性鏈。
縮排為 2 個空格，MemberExpression 設定為 2 將以 4 個空格縮排多行屬性鏈。
縮排為 4 個空格，MemberExpression 設定為 0 將以 0 個空格縮排多行屬性鏈。
縮排為 4 個空格，MemberExpression 設定為 1 將以 4 個空格縮排多行屬性鏈。
縮排為 4 個空格，MemberExpression 設定為 2 將以 8 個空格縮排多行屬性鏈。

tab

此規則使用 "tab" 選項的錯誤程式碼範例

在 Playground 中開啟

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

if (a) {
     b=c;
function foo(d) {
           e=f;
 }
}
1
2
3
4
5
6
7
8

此規則使用 "tab" 選項的正確程式碼範例

在 Playground 中開啟

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

if (a) {
	b=c;
	function foo(d) {
		e=f;
	}
}
1
2
3
4
5
6
7
8

ignoredNodes

以下設定會忽略 ConditionalExpression（「三元運算式」）節點的縮排

此規則使用 4, { "ignoredNodes": ["ConditionalExpression"] } 選項的正確程式碼範例

在 Playground 中開啟

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

var a = foo
      ? bar
      : baz;

var a = foo
                ? bar
: baz;
1
2
3
4
5
6
7
8
9

以下設定會忽略 IIFE 主體中的縮排。

此規則使用 4, { "ignoredNodes": ["CallExpression > FunctionExpression.callee > BlockStatement.body"] } 選項的正確程式碼範例

在 Playground 中開啟

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

(function() {

foo();
bar();

})();
1
2
3
4
5
6
7
8

所有 AST 節點類型都可以在 ESTree 規格中找到。您可以使用 AST Explorer 和 espree 解析器來檢查程式碼片段的 AST 樹狀結構。

SwitchCase

此規則使用 2, { "SwitchCase": 1 } 選項的錯誤程式碼範例

在 Playground 中開啟

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

switch(a){
case "a":
    break;
case "b":
    break;
}
1
2
3
4
5
6
7
8

此規則使用 2, { "SwitchCase": 1 } 選項的正確程式碼範例

在 Playground 中開啟

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

switch(a){
  case "a":
    break;
  case "b":
    break;
}
1
2
3
4
5
6
7
8

VariableDeclarator

此規則使用 2, { "VariableDeclarator": 1 } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var a,
    b,
    c;
let d,
    e,
    f;
const g = 1,
    h = 2,
    i = 3;
1
2
3
4
5
6
7
8
9
10
11

此規則使用 2, { "VariableDeclarator": 1 } 選項的正確程式碼範例

在 Playground 中開啟

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

var a,
  b,
  c;
let d,
  e,
  f;
const g = 1,
  h = 2,
  i = 3;
1
2
3
4
5
6
7
8
9
10
11

此規則使用 2, { "VariableDeclarator": 2 } 選項的正確程式碼範例

在 Playground 中開啟

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

var a,
    b,
    c;
let d,
    e,
    f;
const g = 1,
    h = 2,
    i = 3;
1
2
3
4
5
6
7
8
9
10
11

此規則使用 2, { "VariableDeclarator": "first" } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var a,
  b,
  c;
let d,
  e,
  f;
const g = 1,
  h = 2,
  i = 3;
1
2
3
4
5
6
7
8
9
10
11

此規則使用 2, { "VariableDeclarator": "first" } 選項的正確程式碼範例

在 Playground 中開啟

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

var a,
    b,
    c;
let d,
    e,
    f;
const g = 1,
      h = 2,
      i = 3;
1
2
3
4
5
6
7
8
9
10
11

此規則使用 2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } } 選項的正確程式碼範例

在 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;
1
2
3
4
5
6
7
8
9
10
11

outerIIFEBody

此規則使用選項 2, { "outerIIFEBody": 0 } 的錯誤程式碼範例

在 Playground 中開啟

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

(function() {

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

})();

if (y) {
console.log('foo');
}
1
2
3
4
5
6
7
8
9
10
11
12
13

此規則使用選項 2, { "outerIIFEBody": 0 } 的正確程式碼範例

在 Playground 中開啟

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

(function() {

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

})();

if (y) {
  console.log('foo');
}
1
2
3
4
5
6
7
8
9
10
11
12
13

此規則使用選項 2, { "outerIIFEBody": "off" } 的正確程式碼範例

在 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');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

MemberExpression

此規則使用 2, { "MemberExpression": 1 } 選項的錯誤程式碼範例

在 Playground 中開啟

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

foo
.bar
.baz()
1
2
3
4
5

此規則使用 2, { "MemberExpression": 1 } 選項的正確程式碼範例

在 Playground 中開啟

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

foo
  .bar
  .baz();
1
2
3
4
5

FunctionDeclaration

此規則使用 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} } 選項的錯誤程式碼範例

在 Playground 中開啟

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

function foo(bar,
  baz,
  qux) {
    qux();
}
1
2
3
4
5
6
7

此規則使用 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} } 選項的正確程式碼範例

在 Playground 中開啟

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

function foo(bar,
    baz,
    qux) {
  qux();
}
1
2
3
4
5
6
7

此規則使用 2, { "FunctionDeclaration": {"parameters": "first"} } 選項的錯誤程式碼範例

在 Playground 中開啟

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

function foo(bar, baz,
  qux, boop) {
  qux();
}
1
2
3
4
5
6

此規則使用 2, { "FunctionDeclaration": {"parameters": "first"} } 選項的正確程式碼範例

在 Playground 中開啟

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

function foo(bar, baz,
             qux, boop) {
  qux();
}
1
2
3
4
5
6

FunctionExpression

此規則使用 2, { "FunctionExpression": {"body": 1, "parameters": 2} } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var foo = function(bar,
  baz,
  qux) {
    qux();
}
1
2
3
4
5
6
7

此規則使用 2, { "FunctionExpression": {"body": 1, "parameters": 2} } 選項的正確程式碼範例

在 Playground 中開啟

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

var foo = function(bar,
    baz,
    qux) {
  qux();
}
1
2
3
4
5
6
7

此規則使用 2, { "FunctionExpression": {"parameters": "first"} } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var foo = function(bar, baz,
  qux, boop) {
  qux();
}
1
2
3
4
5
6

此規則使用 2, { "FunctionExpression": {"parameters": "first"} } 選項的正確程式碼範例

在 Playground 中開啟

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

var foo = function(bar, baz,
                   qux, boop) {
  qux();
}
1
2
3
4
5
6

StaticBlock

此規則使用 2, { "StaticBlock": {"body": 1} } 選項的錯誤程式碼範例

在 Playground 中開啟

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

class C {
  static {
      foo();
  }
}
1
2
3
4
5
6
7

此規則使用 2, { "StaticBlock": {"body": 1} } 選項的正確程式碼範例

在 Playground 中開啟

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

class C {
  static {
    foo();
  }
}
1
2
3
4
5
6
7

此規則使用 2, { "StaticBlock": {"body": 2} } 選項的錯誤程式碼範例

在 Playground 中開啟

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

class C {
  static {
    foo();
  }
}
1
2
3
4
5
6
7

此規則使用 2, { "StaticBlock": {"body": 2} } 選項的正確程式碼範例

在 Playground 中開啟

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

class C {
  static {
      foo();
  }
}
1
2
3
4
5
6
7

CallExpression

此規則使用 2, { "CallExpression": {"arguments": 1} } 選項的錯誤程式碼範例

在 Playground 中開啟

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

foo(bar,
    baz,
      qux
);
1
2
3
4
5
6

此規則使用 2, { "CallExpression": {"arguments": 1} } 選項的正確程式碼範例

在 Playground 中開啟

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

foo(bar,
  baz,
  qux
);
1
2
3
4
5
6

此規則使用 2, { "CallExpression": {"arguments": "first"} } 選項的錯誤程式碼範例

在 Playground 中開啟

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

foo(bar, baz,
  baz, boop, beep);
1
2
3
4

此規則使用 2, { "CallExpression": {"arguments": "first"} } 選項的正確程式碼範例

在 Playground 中開啟

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

foo(bar, baz,
    baz, boop, beep);
1
2
3
4

ArrayExpression

此規則使用 2, { "ArrayExpression": 1 } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var foo = [
    bar,
baz,
      qux
];
1
2
3
4
5
6
7

此規則使用 2, { "ArrayExpression": 1 } 選項的正確程式碼範例

在 Playground 中開啟

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

var foo = [
  bar,
  baz,
  qux
];
1
2
3
4
5
6
7

此規則使用 2, { "ArrayExpression": "first" } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var foo = [bar,
  baz,
  qux
];
1
2
3
4
5
6

此規則使用 2, { "ArrayExpression": "first" } 選項的正確程式碼範例

在 Playground 中開啟

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

var foo = [bar,
           baz,
           qux
];
1
2
3
4
5
6

ObjectExpression

此規則使用 2, { "ObjectExpression": 1 } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var foo = {
    bar: 1,
baz: 2,
      qux: 3
};
1
2
3
4
5
6
7

此規則使用 2, { "ObjectExpression": 1 } 選項的正確程式碼範例

在 Playground 中開啟

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

var foo = {
  bar: 1,
  baz: 2,
  qux: 3
};
1
2
3
4
5
6
7

此規則使用 2, { "ObjectExpression": "first" } 選項的錯誤程式碼範例

在 Playground 中開啟

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

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

此規則使用 2, { "ObjectExpression": "first" } 選項的正確程式碼範例

在 Playground 中開啟

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

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

ImportDeclaration

此規則使用 4, { "ImportDeclaration": 1 } 選項（預設值）的正確程式碼範例

在 Playground 中開啟

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

import { foo,
    bar,
    baz,
} from 'qux';
1
2
3
4
5
6

在 Playground 中開啟

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

import {
    foo,
    bar,
    baz,
} from 'qux';
1
2
3
4
5
6
7

此規則使用 4, { "ImportDeclaration": "first" } 選項的錯誤程式碼範例

在 Playground 中開啟

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

import { foo,
    bar,
    baz,
} from 'qux';
1
2
3
4
5
6

此規則使用 4, { "ImportDeclaration": "first" } 選項的正確程式碼範例

在 Playground 中開啟

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

import { foo,
         bar,
         baz,
} from 'qux';
1
2
3
4
5
6

flatTernaryExpressions

此規則使用預設值 4, { "flatTernaryExpressions": false } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var a =
    foo ? bar :
    baz ? qux :
    boop;
1
2
3
4
5
6

此規則使用預設值 4, { "flatTernaryExpressions": false } 選項的正確程式碼範例

在 Playground 中開啟

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

var a =
    foo ? bar :
        baz ? qux :
            boop;
1
2
3
4
5
6

此規則使用 4, { "flatTernaryExpressions": true } 選項的錯誤程式碼範例

在 Playground 中開啟

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

var a =
    foo ? bar :
        baz ? qux :
            boop;
1
2
3
4
5
6

此規則使用 4, { "flatTernaryExpressions": true } 選項的正確程式碼範例

在 Playground 中開啟

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

var a =
    foo ? bar :
    baz ? qux :
    boop;
1
2
3
4
5
6

offsetTernaryExpressions

此規則使用預設值 2, { "offsetTernaryExpressions": false } 選項的錯誤程式碼範例

在 Playground 中開啟

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

condition
  ? () => {
      return true
    }
  : () => {
      false
    }
1
2
3
4
5
6
7
8
9

此規則使用預設值 2, { "offsetTernaryExpressions": false } 選項的正確程式碼範例

在 Playground 中開啟

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

condition
  ? () => {
    return true
  }
  : condition2
    ? () => {
      return true
    }
    : () => {
      return false
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

此規則使用 2, { "offsetTernaryExpressions": true } 選項的錯誤程式碼範例

在 Playground 中開啟

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

condition
  ? () => {
    return true
  }
  : condition2
    ? () => {
      return true
    }
    : () => {
      return false
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

此規則使用 2, { "offsetTernaryExpressions": true } 選項的正確程式碼範例

在 Playground 中開啟

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

condition
  ? () => {
      return true
    }
  : condition2
    ? () => {
        return true
      }
    : () => {
        return false
      }
1
2
3
4
5
6
7
8
9
10
11
12
13

ignoreComments

此規則使用 4, { "ignoreComments": true } 選項的其他正確程式碼範例

在 Playground 中開啟

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

if (foo) {
    doSomething();

// comment intentionally de-indented
    doSomethingElse();
}
1
2
3
4
5
6
7
8

相容性

JSHint：indent
JSCS：validateIndentation

版本

此規則在 ESLint v0.14.0 中引入。

資源

編輯此頁面