版本

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 + "!"; });

但是,使用适当的换行符,它变得易于阅读和理解。请查看下面使用换行符在每次调用后编写的相同代码。

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").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 } 选项的错误代码示例

在 Playground 中打开
/*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();

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

在 Playground 中打开
/*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;

何时不使用它

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

版本

此规则是在 ESLint v2.0.0-rc.0 中引入的。

资源

更改语言