@stylistic/

newline-per-chained-call

改行なしで一行に繋げたメソッド呼び出しは読みにづらいため、一部の開発者はチェーン内の各メソッド呼び出しの後に改行文字を配置して、読みやすく保守しやすくしています。

完全に有効な（ただし1行の）次のコードを見てみましょう。

d3.select("body").selectAll("p").data([4, 8, 15, 16, 23, 42 ]).enter().append("p").text(function(d) { return "I'm number " + d + "!"; });

ただし、適切な改行を入れることで、読みやすく理解しやすくなります。 各呼び出しの後で改行を入れた、以下に示す同じコードを見てください。

d3
    .select("body")
    .selectAll("p")
    .data([
        4,
        8,
        15,
        16,
        23,
        42
    ])
    .enter()
    .append("p")
    .text(function (d) {
        return "I'm number " + d + "!";
    });

このスタイルを支持するもう1つの議論は、メソッドチェーン内の何かが変更された場合に、差分の明確さが向上するという点です。

明確さが低い

-d3.select("body").selectAll("p").style("color", "white");
+d3.select("body").selectAll("p").style("color", "blue");

明確さが高い

d3
    .select("body")
    .selectAll("p")
-    .style("color", "white");
+    .style("color", "blue");

ルールの詳細

このルールでは、メソッドチェーンまたは深いメンバーアクセスにおける各呼び出しの後に改行が必要です。 instance[something] などの計算されたプロパティアクセスは除外されます。

オプション

このルールにはオブジェクトオプションがあります。

• "ignoreChainWithDepth" (デフォルト: 2) は、指定された深度までのチェーンを許可します。

ignoreChainWithDepth

デフォルトの { "ignoreChainWithDepth": 2 } オプションを使用した、このルールの**誤った**コードの例

/*eslint @stylistic/newline-per-chained-call: ["error", { "ignoreChainWithDepth": 2 }]*/

_.chain({}).map(foo)
.filter
(bar)
.value
();

// Or
_.chain({}).map(foo)
.filter
(bar);

// Or
_
  .chain({}).map(foo)
  .filter(bar);

// Or
obj.method().method2()
.method3
();

誤り

デフォルトの { "ignoreChainWithDepth": 2 } オプションを使用した、このルールの**正しい**コードの例

/*eslint @stylistic/newline-per-chained-call: ["error", { "ignoreChainWithDepth": 2 }]*/

_
  .chain({})
  .map(foo)
  .filter(bar)
  .value();

// Or
_
  .chain({})
  .map(foo)
  .filter(bar);

// Or
_.chain({})
  .map(foo)
  .filter(bar);

// Or
obj
  .prop
  .method().prop;

// Or
obj
  .prop.method()
  .method2()
  .method3().prop;

正しい

使用しない場合

競合するルールがある場合、または1行のチェーン呼び出しで問題ない場合は、このルールを安全に無効にすることができます。