ESLint スタイル

外観

@stylistic/

indent ​

ネストされたブロックとステートメントの特定のインデントを要求するいくつかの一般的なガイドラインがあります。

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

これらは、さまざまなスタイルガイドで推奨される最も一般的なシナリオです。

  • 2スペース、それ以上ではなく、タブなし：Google、npm、Node.js、慣習的、Felix
  • タブ：jQuery
  • 4スペース：Crockford

ルール詳細 ​

このルールは、一貫したインデントスタイルを強制します。デフォルトのスタイルは4スペースです。

オプション ​

このルールには、混合オプションがあります。

たとえば、2スペースインデントの場合

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

またはタブインデントの場合

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

デフォルトのオプションを使用したこのルールの不正なコードの例

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

if (a) {

  
b=c;

  
function foo(d) {

    
e=f;

  
}
}
incorrect

デフォルトのオプションを使用したこのルールの正しいコードの例

js
/*eslint @stylistic/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のインデントレベルを強制します。これは、ファイルレベルのIIFEのチェックを無効にするために"off"に設定することもできます。
  • "MemberExpression"（デフォルト：1）は、複数行のプロパティチェーンのインデントレベルを強制します。これは、MemberExpressionのインデントのチェックを無効にするために"off"に設定することもできます。
  • "FunctionDeclaration"は、関数宣言のルールを定義するオブジェクトを受け入れます。
    • parameters（デフォルト：1）は、関数宣言のパラメーターのインデントレベルを強制します。これは、インデントレベルを示す数値、または宣言のすべてのパラメーターが最初のパラメーターに揃えられなければならないことを示す文字列"first"のいずれかです。これは、FunctionDeclarationパラメーターのチェックを無効にするために"off"に設定することもできます。
    • body（デフォルト：1）は、関数宣言の本文のインデントレベルを強制します。
  • "FunctionExpression"は、関数式のルールを定義するオブジェクトを受け入れます。
    • parameters（デフォルト：1）は、関数式のパラメーターのインデントレベルを強制します。これは、インデントレベルを示す数値、または式のすべてのパラメーターが最初のパラメーターに揃えられなければならないことを示す文字列"first"のいずれかです。これは、FunctionExpressionパラメーターのチェックを無効にするために"off"に設定することもできます。
    • body（デフォルト：1）は、関数式の本文のインデントレベルを強制します。
  • "StaticBlock"は、クラスの静的ブロックのルールを定義するオブジェクトを受け入れます。
    • body（デフォルト：1）は、クラスの静的ブロックの本文のインデントレベルを強制します。
  • "CallExpression"は、関数呼び出し式のルールを定義するオブジェクトを受け入れます。
    • arguments（デフォルト：1）は、呼び出し式内の引数のインデントレベルを強制します。これは、インデントレベルを示す数値、または式のすべての引数が最初の引数に揃えられなければならないことを示す文字列"first"のいずれかです。これは、CallExpression引数のチェックを無効にするために"off"に設定することもできます。
  • "ArrayExpression"（デフォルト：1）は、配列内の要素のインデントレベルを強制します。配列内のすべての要素を最初の要素に揃える必要があることを示す文字列"first"に設定することもできます。これは、配列要素のチェックを無効にするために"off"に設定することもできます。
  • "ObjectExpression"（デフォルト：1）は、オブジェクト内のプロパティのインデントレベルを強制します。オブジェクト内のすべてプロパティを最初プロパティに揃える必要があることを示す文字列"first"に設定できます。これは、オブジェクトプロパティのチェックを無効にするために"off"に設定することもできます。
  • "ImportDeclaration"（デフォルト：1）は、インポートステートメントのインデントレベルを強制します。これは、モジュールからインポートされたすべてのメンバーをリストの最初のメンバーに揃える必要があることを示す文字列"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に設定されている場合、タブのインデントは、複数行の変数宣言を2タブでインデントします。
  • SwitchCaseが0に設定されている場合、2スペースのインデントは、switchステートメントに対してcase句をインデントしません。
  • SwitchCaseが1に設定されている場合、2スペースのインデントは、switchステートメントに対してcase句を2スペースでインデントします。
  • SwitchCaseが2に設定されている場合、2スペースのインデントは、switchステートメントに対してcase句を4スペースでインデントします。
  • SwitchCaseが2に設定されている場合、タブのインデントは、switchステートメントに対してcase句を2タブでインデントします。
  • 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"オプションを使用したこのルールの不正なコードの例

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

if (a) {

     
b=c;

function foo(d) {

           
e=f;

 
}
}
incorrect

"tab"オプションを使用したこのルールに関する正しいコードの例

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

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

無視されるノード ​

以下の設定では、ConditionalExpression（「三項演算子式」）ノードのインデントが無視されます。

4, { "ignoredNodes": ["ConditionalExpression"] }オプションを使用したこのルールに関する正しいコードの例

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

var a = foo
      ? bar
      : baz;

var a = foo
                ? bar
: baz;
correct

以下の設定では、IIFEの本体内のインデントが無視されます。

4, { "ignoredNodes": ["CallExpression > FunctionExpression.callee > BlockStatement.body"] }オプションを使用したこのルールに関する正しいコードの例

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

(function() {

foo();
bar();

})();
correct

すべてのASTノードタイプはESTree仕様で確認できます。AST Explorerをespreeパーサーと共に使用して、コードスニペットのASTツリーを調べることができます。

SwitchCase ​

2, { "SwitchCase": 1 }オプションを使用したこのルールに関する正しくないコードの例

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

switch(a){

case "a":
    break;

case "b":
    break;
}
incorrect

2, { "SwitchCase": 1 }オプションを使用したこのルールに関する正しいコードの例

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

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

VariableDeclarator ​

2, { "VariableDeclarator": 1 }オプションを使用したこのルールに関する正しくないコードの例

js
/*eslint @stylistic/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 }オプションを使用したこのルールに関する正しいコードの例

js
/*eslint @stylistic/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 }オプションを使用したこのルールに関する正しいコードの例

js
/*eslint @stylistic/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" }オプションを使用したこのルールに関する正しくないコードの例

js
/*eslint @stylistic/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" }オプションを使用したこのルールに関する正しいコードの例

js
/*eslint @stylistic/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 } }オプションを使用したこのルールに関する正しいコードの例

js
/*eslint @stylistic/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 }オプションを使用したこのルールに関する正しくないコードの例

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

(function() {


  
function foo(x) {

    
return x + 1;

  
}

})();

if (y) {

console.log('foo');
}
incorrect

2, { "outerIIFEBody": 0 }オプションを使用したこのルールに関する正しいコードの例

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

(function() {

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

})();

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

2, { "outerIIFEBody": "off" }オプションを使用したこのルールに関する正しいコードの例

js
/*eslint @stylistic/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

MemberExpression ​

2, { "MemberExpression": 1 }オプションを使用したこのルールに関する正しくないコードの例

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

foo

.bar

.baz()
incorrect

2, { "MemberExpression": 1 }オプションを使用したこのルールに関する正しいコードの例

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

foo
  .bar
  .baz();
correct

FunctionDeclaration ​

2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }オプションを使用したこのルールに関する正しくないコードの例

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

function foo(bar,

  
baz,

  
qux) {

    
qux();
}
incorrect

2, { "FunctionDeclaration": {"body": 1, "parameters": 2} }オプションを使用したこのルールに関する正しいコードの例

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

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

2, { "FunctionDeclaration": {"parameters": "first"} }オプションを使用したこのルールに関する正しくないコードの例

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

function foo(bar, baz,

  
qux, boop) {
  qux();
}
incorrect

2, { "FunctionDeclaration": {"parameters": "first"} }オプションを使用したこのルールに関する正しいコードの例

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

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

FunctionExpression ​

2, { "FunctionExpression": {"body": 1, "parameters": 2} }オプションを使用したこのルールに関する正しくないコードの例

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

var foo = function(bar,

  
baz,

  
qux) {

    
qux();
}
incorrect

2, { "FunctionExpression": {"body": 1, "parameters": 2} }オプションを使用したこのルールに関する正しいコードの例

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

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

2, { "FunctionExpression": {"parameters": "first"} }オプションを使用したこのルールに関する正しくないコードの例

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

var foo = function(bar, baz,

  
qux, boop) {
  qux();
}
incorrect

2, { "FunctionExpression": {"parameters": "first"} }オプションを使用したこのルールに関する正しいコードの例

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

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

StaticBlock ​

2, { "StaticBlock": {"body": 1} }オプションを使用したこのルールに関する正しくないコードの例

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

class C {
  static {

      
foo();
  }
}
incorrect

2, { "StaticBlock": {"body": 1} }オプションを使用したこのルールに関する正しいコードの例

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

class C {
  static {
    foo();
  }
}
correct

2, { "StaticBlock": {"body": 2} }オプションを使用したこのルールに関する正しくないコードの例

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

class C {
  static {

    
foo();
  }
}
incorrect

2, { "StaticBlock": {"body": 2} }オプションを使用したこのルールに関する正しいコードの例

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

class C {
  static {
      foo();
  }
}
correct

CallExpression ​

2, { "CallExpression": {"arguments": 1} }オプションを使用したこのルールに関する正しくないコードの例

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

foo(bar,

    
baz,

      
qux
);
incorrect

2, { "CallExpression": {"arguments": 1} }オプションを使用したこのルールに関する正しいコードの例

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

foo(bar,
  baz,
  qux
);
correct

2, { "CallExpression": {"arguments": "first"} }オプションを使用したこのルールに関する正しくないコードの例

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

foo(bar, baz,

  
baz, boop, beep);
incorrect

2, { "CallExpression": {"arguments": "first"} }オプションを使用したこのルールに関する正しいコードの例

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

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

ArrayExpression ​

2, { "ArrayExpression": 1 }オプションを使用したこのルールに関する正しくないコードの例

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

var foo = [

    
bar,

baz,

      
qux
];
incorrect

2, { "ArrayExpression": 1 }オプションを使用したこのルールに関する正しいコードの例

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

var foo = [
  bar,
  baz,
  qux
];
correct

2, { "ArrayExpression": "first" }オプションを使用したこのルールに関する正しくないコードの例

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

var foo = [bar,

  
baz,

  
qux
];
incorrect

2, { "ArrayExpression": "first" }オプションを使用したこのルールに関する正しいコードの例

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

var foo = [bar,
           baz,
           qux
];
correct

ObjectExpression ​

2, { "ObjectExpression": 1 }オプションを使用したこのルールに関する正しくないコードの例

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

var foo = {

    
bar: 1,

baz: 2,

      
qux: 3
};
incorrect

2, { "ObjectExpression": 1 }オプションを使用したこのルールに関する正しいコードの例

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

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

2, { "ObjectExpression": "first" }オプションを使用したこのルールに関する正しくないコードの例

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

var foo = { bar: 1,

  
baz: 2 };
incorrect

2, { "ObjectExpression": "first" }オプションを使用したこのルールに関する正しいコードの例

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

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

ImportDeclaration ​

4, { "ImportDeclaration": 1 }オプション（デフォルト）を使用したこのルールに関する正しいコードの例

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

import { foo,
    bar,
    baz,
} from 'qux';
correct
js
/*eslint @stylistic/indent: ["error", 4, { "ImportDeclaration": 1 }]*/

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

4, { "ImportDeclaration": "first" }オプションを使用したこのルールに関する正しくないコードの例

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

import { foo,

    
bar,

    
baz,
} from 'qux';
incorrect

4, { "ImportDeclaration": "first" }オプションを使用したこのルールに関する正しいコードの例

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

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

flatTernaryExpressions ​

デフォルトの4, { "flatTernaryExpressions": false }オプションを使用したこのルールに関する正しくないコードの例

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

var a =
    foo ? bar :

    
baz ? qux :

    
boop;
incorrect

デフォルトの4, { "flatTernaryExpressions": false }オプションを使用したこのルールに関する正しいコードの例

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

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

4, { "flatTernaryExpressions": true }オプションを使用したこのルールに関する正しくないコードの例

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

var a =
    foo ? bar :

        
baz ? qux :

            
boop;
incorrect

4, { "flatTernaryExpressions": true }オプションを使用したこのルールに関する正しいコードの例

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

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

offsetTernaryExpressions ​

デフォルトの2, { "offsetTernaryExpressions": false }オプションを使用したこのルールに関する正しくないコードの例

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

condition
  ? () => {

      
return true

    
}
  : () => {

      
false

    
}
incorrect

デフォルトの2, { "offsetTernaryExpressions": false }オプションを使用したこのルールに関する正しいコードの例

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

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

2, { "offsetTernaryExpressions": true }オプションを使用したこのルールに関する正しくないコードの例

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

condition
  ? () => {

    
return true

  
}
  : condition2
    ? () => {

      
return true

    
}
    : () => {

      
return false

    
}
incorrect

2, { "offsetTernaryExpressions": true }オプションを使用したこのルールに関する正しいコードの例

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

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

ignoreComments ​

4, { "ignoreComments": true }オプションを使用したこのルールに関する追加の正しいコードの例

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

if (foo) {
    doSomething();

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

互換性 ​

TypeScript固有 ​

ts/indent ​

警告 ​

警告

このルールを使用する前にIssue #1824: indentルールの問題点をお読みください！

MITライセンスの下でリリースされています。

Copyright OpenJS Foundationおよびその他の貢献者、www.openjsf.org。
Copyright © 2023-PRESENT ESLint Stylistic 貢献者。