ESLint 中文文档

# indent

强制一致的缩进

一些该规则报告的问题可以通过 --fix 命令行选项 自动修复

有几个通用准则需要嵌套块和语句的特定缩进，例如：

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

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

  • 两个空格，不是更长也没有制表符：谷歌、npm、Node.js、惯用语、Felix
  • Tabs: jQuery
  • 四个空格：Crockford

# 规则详情

此规则强制执行一致的缩进样式。默认样式为 4 spaces。

# 选项

此规则有一个混合选项：

例如，对于 2 个空格缩进：

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

或者对于标签缩进：

{
    "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 节点与任何选择器匹配，则作为该节点直接子节点的标记的缩进将被忽略。如果您不同意它为特定句法模式强制执行的缩进，这可以用作放宽规则的逃生舱口。

  • "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）。

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

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

# tab

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

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

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

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

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

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

# ignoredNodes

以下配置忽略了 ConditionalExpression（"ternary expression"）节点的缩进：

此规则使用 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 }]*/
/*eslint-env es6*/

var a,
    b,
    c;
let a,
    b,
    c;
const a = 1,
    b = 2,
    c = 3;

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

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

var a,
  b,
  c;
let a,
  b,
  c;
const a = 1,
  b = 2,
  c = 3;

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

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

var a,
    b,
    c;
let a,
    b,
    c;
const a = 1,
    b = 2,
    c = 3;

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

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

var a,
  b,
  c;
let a,
  b,
  c;
const a = 1,
  b = 2,
  c = 3;

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

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

var a,
    b,
    c;
let a,
    b,
    c;
const a = 1,
      b = 2,
      c = 3;

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

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

var a,
    b,
    c;
let a,
    b,
    c;
const a = 1,
      b = 2,
      c = 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';

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
Last Updated: 5/13/2023, 8:55:38 PM

← jsx-quotes →