首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

newline-per-chained-call

--fix命令行上的选项可以自动修复一些被这条规则反映的问题。

在没有换行符的情况下在单行上调用链接方法会更难以阅读,因此一些开发人员在链中的每个方法调用之后放置一个换行符,以使其更易读并易于维护。

让我们看看下面完全有效的(但单行)代码。

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

但是,通过适当的新行,它很容易阅读和理解。每次通话后,请看下面用同样的代码写下换行符。

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

支持这种风格的另一个理由是,当方法链中的某些内容发生更改时,它可以提高差异的清晰度:

不太清楚:

代码语言:javascript
复制
-d3.select("body").selectAll("p").style("color", "white");
+d3.select("body").selectAll("p").style("color", "blue");

更清晰:

代码语言:javascript
复制
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).filter(bar).value();

// Or

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

// Or

_

.chain({}).map(foo)

.filter(bar);

// Or

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

此规则的默认代码正确例子 { "ignoreChainWithDepth": 2 } option:/*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 2.0.0-rc.0.Resources中引入的

扫码关注腾讯云开发者

领取腾讯云代金券