newline-per-chained-call

Require a newline after each call in a method chain

This rule was deprecated in ESLint v8.53.0. Please use the corresponding rule in @stylistic/eslint-plugin-js.

Chained method calls on a single line without line breaks are harder to read, so some developers place a newline character after each method call in the chain to make it more readable and easy to maintain.

Let’s look at the following perfectly valid (but single line) code.

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

However, with appropriate new lines, it becomes easy to read and understand. Look at the same code written below with line breaks after each call.

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

Another argument in favor of this style is that it improves the clarity of diffs when something in the method chain is changed:

Less clear:

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

More clear:

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

Rule Details

This rule requires a newline after each call in a method chain or deep member access. Computed property accesses such as instance[something] are excluded.

Options

This rule has an object option:

• "ignoreChainWithDepth" (default: 2) allows chains up to a specified depth.

ignoreChainWithDepth

Examples of incorrect code for this rule with the default { "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.method().method2().method3();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Examples of correct code for this rule with the default { "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;
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

When Not To Use It

If you have conflicting rules or when you are fine with chained calls on one line, you can safely turn this rule off.

Version

This rule was introduced in ESLint v2.0.0-rc.0.

Resources

• Rule source
• Tests source