ESLint スタイリッシュ

外観

@stylistic/js/

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、Idiomatic、Felix
  • タブ：jQuery
  • 4つのスペース：Crockford

ルールの詳細 ​

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

オプション ​

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

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

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

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

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

デフォルトオプションを使用した場合の、このルールに対する不正なコードの例

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

if (a) {

  
b=c;

  
function foo(d) {

    
e=f;

  
}
}
不正

デフォルトオプションを使用した場合の、このルールに対する正しいコードの例

js
/*eslint @stylistic/js/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のインデントレベルを強制します。ファイルレベルの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）は、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に設定されたタブのインデントは、複数行の変数宣言を2つのタブでインデントします。
  • SwitchCaseが0に設定された2つのスペースのインデントは、case句をswitchステートメントに関してインデントしません。
  • SwitchCaseが1に設定された2つのスペースのインデントは、case句をswitchステートメントに関して2つのスペースでインデントします。
  • SwitchCaseが2に設定された2つのスペースのインデントは、case句をswitchステートメントに関して4つのスペースでインデントします。
  • SwitchCaseが2に設定されたタブのインデントは、case句をswitchステートメントに関して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/js/indent: ["error", "tab"]*/

if (a) {

     
b=c;

function foo(d) {

           
e=f;

 
}
}
不正

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

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

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

ignoredNodes ​

次の構成は、ConditionalExpression（「三項式」）ノードのインデントを無視します。

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

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

var a = foo
      ? bar
      : baz;

var a = foo
                ? bar
: baz;
正しい

次の構成は、IIFEの本体のインデントを無視します。

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

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

(function() {

foo();
bar();

})();
正しい

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

SwitchCase ​

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

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

switch(a){

case "a":
    break;

case "b":
    break;
}
不正

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

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

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

VariableDeclarator ​

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

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

var a,

    
b,

    
c;
let d,

    
e,

    
f;
const g = 1,

    
h = 2,

    
i = 3;
不正

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

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

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

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

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

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

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

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

var a,

  
b,

  
c;
let d,

  
e,

  
f;
const g = 1,

  
h = 2,

  
i = 3;
不正

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

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

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

2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }オプションを使用したこのルールに対する正しいコードの例

js
/*eslint @stylistic/js/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;
正しい

outerIIFEBody ​

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

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

(function() {


  
function foo(x) {

    
return x + 1;

  
}

})();

if (y) {

console.log('foo');
}
不正

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

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

(function() {

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

})();

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

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

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

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

foo

.bar

.baz()
不正

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

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

foo
  .bar
  .baz();
正しい

FunctionDeclaration ​

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

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

function foo(bar,

  
baz,

  
qux) {

    
qux();
}
不正

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

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

function foo(bar,
    baz,
    qux) {
  qux();
}
正しい

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

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

function foo(bar, baz,

  
qux, boop) {
  qux();
}
不正

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

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

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

FunctionExpression ​

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

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

var foo = function(bar,

  
baz,

  
qux) {

    
qux();
}
不正

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

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

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

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

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

var foo = function(bar, baz,

  
qux, boop) {
  qux();
}
不正

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

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

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

StaticBlock ​

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

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

class C {
  static {

      
foo();
  }
}
不正

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

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

class C {
  static {
    foo();
  }
}
正しい

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

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

class C {
  static {

    
foo();
  }
}
不正

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

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

class C {
  static {
      foo();
  }
}
正しい

CallExpression ​

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

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

foo(bar,

    
baz,

      
qux
);
不正

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

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

foo(bar,
  baz,
  qux
);
正しい

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

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

foo(bar, baz,

  
baz, boop, beep);
不正

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

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

foo(bar, baz,
    baz, boop, beep);
正しい

ArrayExpression ​

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

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

var foo = [

    
bar,

baz,

      
qux
];
不正

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

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

var foo = [
  bar,
  baz,
  qux
];
正しい

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

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

var foo = [bar,

  
baz,

  
qux
];
不正

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

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

var foo = [bar,
           baz,
           qux
];
正しい

ObjectExpression ​

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

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

var foo = {

    
bar: 1,

baz: 2,

      
qux: 3
};
不正

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

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

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

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

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

var foo = { bar: 1,

  
baz: 2 };
不正

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

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

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

ImportDeclaration ​

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

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

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

import {
    foo,
    bar,
    baz,
} from 'qux';
正しい

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

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

import { foo,

    
bar,

    
baz,
} from 'qux';
不正

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

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

import { foo,
         bar,
         baz,
} from 'qux';
正しい

flatTernaryExpressions ​

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

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

var a =
    foo ? bar :

    
baz ? qux :

    
boop;
不正

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

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

var a =
    foo ? bar :
        baz ? qux :
            boop;
正しい

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

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

var a =
    foo ? bar :

        
baz ? qux :

            
boop;
不正

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

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

var a =
    foo ? bar :
    baz ? qux :
    boop;
正しい

offsetTernaryExpressions ​

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

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

condition
  ? () => {

      
return true

    
}
  : () => {

      
false

    
}
不正

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

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

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

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

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

condition
  ? () => {

    
return true

  
}
  : condition2
    ? () => {

      
return true

    
}
    : () => {

      
return false

    
}
不正

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

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

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

ignoreComments ​

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

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

if (foo) {
    doSomething();

// comment intentionally de-indented
    doSomethingElse();
}
正しい

互換性 ​

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

Copyright OpenJS Foundation and other contributors, www.openjsf.org.
Copyright © 2023-PRESENT ESLint Stylistic contributors.