版本

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');
    }
}

這些是不同樣式指南中推薦的最常見情境

  • 兩個空格,不要更長也不要 Tab 鍵:Google、npm、Node.js、Idiomatic、Felix
  • Tab 鍵:jQuery
  • 四個空格:Crockford

規則詳情

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

選項

此規則有一個混合選項

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

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

或者對於 Tab 鍵縮排

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

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

在遊樂場中開啟
/*eslint indent: "error"*/

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

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

在遊樂場中開啟
/*eslint indent: "error"*/

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

此規則有一個物件選項

  • "ignoredNodes" 可以用來停用任何 AST 節點的縮排檢查。這接受一個 選擇器 陣列。如果一個 AST 節點與任何選擇器匹配,則會忽略該節點直接子節點的 token 縮排。如果不同意該規則針對特定語法模式強制執行的縮排,這可以用作放寬規則的逃生艙口。
  • "SwitchCase"(預設值:0)強制 switch 陳述式中 case 子句的縮排層級
  • "VariableDeclarator"(預設值:1)強制 var 宣告器的縮排層級;也可以接受一個物件來定義 varletconst 宣告的個別規則。它也可以是 "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)。

縮排層級表示指定縮排的倍數。範例

  • VariableDeclarator 設定為 2 時,縮排為 4 個空格,將會使用 8 個空格縮排多行變數宣告。
  • VariableDeclarator 設定為 2 時,縮排為 2 個空格,將會使用 4 個空格縮排多行變數宣告。
  • VariableDeclarator 設定為 {"var": 2, "let": 2, "const": 3} 時,縮排為 2 個空格,將會對 varlet 使用 4 個空格,對 const 陳述式使用 6 個空格縮排多行變數宣告。
  • VariableDeclarator 設定為 2 時,使用 Tab 鍵縮排,將會使用 2 個 Tab 鍵縮排多行變數宣告。
  • SwitchCase 設定為 0 時,縮排為 2 個空格,將不會相對於 switch 陳述式縮排 case 子句。
  • SwitchCase 設定為 1 時,縮排為 2 個空格,將會相對於 switch 陳述式使用 2 個空格縮排 case 子句。
  • SwitchCase 設定為 2 時,縮排為 2 個空格,將會相對於 switch 陳述式使用 4 個空格縮排 case 子句。
  • SwitchCase 設定為 2 時,使用 Tab 鍵縮排,將會相對於 switch 陳述式使用 2 個 Tab 鍵縮排 case 子句。
  • MemberExpression 設定為 0 時,縮排為 2 個空格,將會使用 0 個空格縮排多行屬性鏈。
  • MemberExpression 設定為 1 時,縮排為 2 個空格,將會使用 2 個空格縮排多行屬性鏈。
  • MemberExpression 設定為 2 時,縮排為 2 個空格,將會使用 4 個空格縮排多行屬性鏈。
  • MemberExpression 設定為 0 時,縮排為 4 個空格,將會使用 0 個空格縮排多行屬性鏈。
  • MemberExpression 設定為 1 時,縮排為 4 個空格,將會使用 4 個空格縮排多行屬性鏈。
  • MemberExpression 設定為 2 時,縮排為 4 個空格,將會使用 8 個空格縮排多行屬性鏈。

tab

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

在遊樂場中開啟
/*eslint indent: ["error", "tab"]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", "tab"]*/

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

ignoredNodes

以下設定會忽略 ConditionalExpression(「三元表達式」)節點的縮排

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "ignoredNodes": ["ConditionalExpression"] }]*/

var a = foo
      ? bar
      : baz;

var a = foo
                ? bar
: baz;

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

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "ignoredNodes": ["CallExpression > FunctionExpression.callee > BlockStatement.body"] }]*/

(function() {

foo();
bar();

})();

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

SwitchCase

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "SwitchCase": 1 }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "SwitchCase": 1 }]*/

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

VariableDeclarator

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "VariableDeclarator": 1 }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "VariableDeclarator": 1 }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "VariableDeclarator": 2 }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "VariableDeclarator": "first" }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "VariableDeclarator": "first" }]*/

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

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

在遊樂場中開啟
/*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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "outerIIFEBody": 0 }]*/

(function() {

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

})();

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "outerIIFEBody": 0 }]*/

(function() {

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

})();

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

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

在遊樂場中開啟
/*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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "MemberExpression": 1 }]*/

foo
.bar
.baz()

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "MemberExpression": 1 }]*/

foo
  .bar
  .baz();

FunctionDeclaration

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"FunctionDeclaration": {"parameters": "first"}}]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"FunctionDeclaration": {"parameters": "first"}}]*/

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

FunctionExpression

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "FunctionExpression": {"body": 1, "parameters": 2} }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "FunctionExpression": {"body": 1, "parameters": 2} }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"FunctionExpression": {"parameters": "first"}}]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"FunctionExpression": {"parameters": "first"}}]*/

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

StaticBlock

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "StaticBlock": {"body": 1} }]*/

class C {
  static {
      foo();
  }
}

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "StaticBlock": {"body": 1} }]*/

class C {
  static {
    foo();
  }
}

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "StaticBlock": {"body": 2} }]*/

class C {
  static {
    foo();
  }
}

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "StaticBlock": {"body": 2} }]*/

class C {
  static {
      foo();
  }
}

CallExpression

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "CallExpression": {"arguments": 1} }]*/

foo(bar,
    baz,
      qux
);

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "CallExpression": {"arguments": 1} }]*/

foo(bar,
  baz,
  qux
);

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"CallExpression": {"arguments": "first"}}]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"CallExpression": {"arguments": "first"}}]*/

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

ArrayExpression

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "ArrayExpression": 1 }]*/

var foo = [
    bar,
baz,
      qux
];

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "ArrayExpression": 1 }]*/

var foo = [
  bar,
  baz,
  qux
];

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"ArrayExpression": "first"}]*/

var foo = [bar,
  baz,
  qux
];

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"ArrayExpression": "first"}]*/

var foo = [bar,
           baz,
           qux
];

ObjectExpression

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "ObjectExpression": 1 }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "ObjectExpression": 1 }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"ObjectExpression": "first"}]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, {"ObjectExpression": "first"}]*/

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

ImportDeclaration

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "ImportDeclaration": 1 }]*/

import { foo,
    bar,
    baz,
} from 'qux';
在遊樂場中開啟
/*eslint indent: ["error", 4, { "ImportDeclaration": 1 }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "ImportDeclaration": "first" }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "ImportDeclaration": "first" }]*/

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

flatTernaryExpressions

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "flatTernaryExpressions": false }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "flatTernaryExpressions": false }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "flatTernaryExpressions": true }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "flatTernaryExpressions": true }]*/

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

offsetTernaryExpressions

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "offsetTernaryExpressions": false }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "offsetTernaryExpressions": false }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "offsetTernaryExpressions": true }]*/

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

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

在遊樂場中開啟
/*eslint indent: ["error", 2, { "offsetTernaryExpressions": true }]*/

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

ignoreComments

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

在遊樂場中開啟
/*eslint indent: ["error", 4, { "ignoreComments": true }] */

if (foo) {
    doSomething();

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

相容性

版本

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

資源

變更語言