ESLint 样式

外观

@stylistic/

每行一个链式调用 ​

单行链式方法调用难以阅读，因此一些开发者在链式调用中每个方法调用后添加一个换行符，以提高可读性和可维护性。

让我们看一下以下完全有效的（但单行）代码。

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

但是，通过适当的换行符，它变得易于阅读和理解。请看下面用换行符编写的相同代码。

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

支持这种风格的另一个论据是，它提高了在方法链中更改内容时差异的清晰度

不太清晰

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

更清晰

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

规则详情 ​

此规则要求在方法链或深度成员访问中的每个调用后添加一个换行符。计算属性访问（如 instance[something]）除外。

选项 ​

此规则有一个对象选项

  • "ignoreChainWithDepth"（默认值：2）允许链的深度不超过指定值。

ignoreChainWithDepth ​

使用默认 { "ignoreChainWithDepth": 2 } 选项时，此规则的不正确代码示例

js
/*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
();
incorrect

使用默认 { "ignoreChainWithDepth": 2 } 选项时，此规则的正确代码示例

js
/*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;
correct

何时不使用它 ​

如果您有冲突的规则，或者您对单行上的链式调用感到满意，您可以安全地关闭此规则。