只有超过两个时，是否有办法为所有链接方法换行？

Question

I have some methods like:

// 1. two methods chained
first.method().anotherMethod();

// 2. three or more
second.method().anotherMethod().yetAnotherOne();
third.method().anotherMethod().yetAnotherOne().stillGoing();

First type is ok, may stay that way. But I want to know if is possible for the second type to break a line for all methods, like:

// 1. two methods chained
first.method().anotherMethod();

// 2. three or more
second.method()
  .anotherMethod()
  .yetAnotherOne();

third.method()
  .anotherMethod()
  .yetAnotherOne()
  .stillGoing();

Eslint have the rule newline-per-chained-call but it won't force the behavior I want.

{ "ignoreChainWithDepth": 2 } will let me do this:

second.method().anotherMethod()
  .yetAnotherOne();

third.method().anotherMethod()
  .yetAnotherOne()
  .stillGoing();

And well, it's not ideal.

Is there a way to manage it?

I've tried newline-per-chained-call with the { "ignoreChainWithDepth": 2 } option, and looking for plugins. Did not find any plugin for it.

Answer 1

You can use the array-element-newline rule in ESLint to enforce line breaks for long chains of methods. In.eslintrc

{
  "rules": {
    "array-element-newline": ["error", { "multiline": true, "minItems": 3 }]
  }
}

This rule is typically used to enforce line breaks in arrays, but it can also be used to enforce line breaks in chains of method calls.