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 }
选项时,此规则的错误代码示例
在代码游乐场中打开
/*eslint newline-per-chained-call: ["error", { "ignoreChainWithDepth": 2 }]*/
_.chain({}).map(foo)(bar)();
// Or
_.chain({}).map(foo)(bar);
// Or
_
.chain({}).map(foo)
.filter(bar);
// Or
obj.method().method2()();
使用默认 { "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;
何时不使用它
如果您有冲突的规则,或者您对单行链式调用感到满意,您可以安全地关闭此规则。
版本
此规则是在 ESLint v2.0.0-rc.0 中引入的。