newline-per-chained-call

要求方法鏈中的每個呼叫後都要換行

🔧

此規則回報的一些問題可以使用 --fix 命令列選項自動修正

此規則已在 ESLint v8.53.0 中棄用。請使用 @stylistic/eslint-plugin-js 中對應的規則。

在單行上沒有換行符號的鏈式方法呼叫較難閱讀，因此一些開發人員會在鏈中的每個方法呼叫後放置一個換行符號，使其更易讀且易於維護。

讓我們看看以下完全有效（但單行）的程式碼。

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")
    .data([
        4,
        8,
        15,
        16,
        23,
        42
    ])
    .enter()
    .append("p")
    .text(function (d) {
        return "I'm number " + d + "!";
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

支持此樣式的另一個論點是，當方法鏈中的某些內容發生更改時，它可以提高 diff 的清晰度

較不清楚

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

較清楚

d3
    .select("body")
    .selectAll("p")
-    .style("color", "white");
+    .style("color", "blue");
1
2
3
4
5

規則詳情

此規則要求在方法鏈或深度成員存取中的每個呼叫後都要換行。不包括計算屬性存取，例如 instance[something]。

選項

此規則具有物件選項

"ignoreChainWithDepth" (預設值: 2) 允許鏈達到指定的深度。

ignoreChainWithDepth

使用預設值 { "ignoreChainWithDepth": 2 } 選項時，此規則的不正確程式碼範例

在遊樂場中開啟

/*eslint 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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用預設值 { "ignoreChainWithDepth": 2 } 選項時，此規則的正確程式碼範例

在遊樂場中開啟

/*eslint 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

何時不使用它

如果您有衝突的規則，或者您不介意在一行上的鏈式呼叫，您可以安全地關閉此規則。

版本

此規則在 ESLint v2.0.0-rc.0 中引入。

資源

編輯此頁面