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
宣告器的縮排層級;也可以接受一個物件來定義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)。
縮排層級表示指定縮排的倍數。範例
- 將
VariableDeclarator
設定為2
時,縮排為 4 個空格,將會使用 8 個空格縮排多行變數宣告。 - 將
VariableDeclarator
設定為2
時,縮排為 2 個空格,將會使用 4 個空格縮排多行變數宣告。 - 將
VariableDeclarator
設定為{"var": 2, "let": 2, "const": 3}
時,縮排為 2 個空格,將會對var
和let
使用 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();
}
相容性
- JSHint:
indent
- JSCS: validateIndentation
版本
此規則在 ESLint v0.14.0 版本中引入。