如何避免 VsCode Prettier 用箭头函数破坏链函数？

Question

I'm working with VSCode and Prettier and when we have chained functions call with arrow functions inside like a lodash chain:

let total = _(credits).filter(c => c.active).sumBy(c => c.fee);

Prettier breaks into:

discount = _(credits)
    .filter(c => c.active)
    .sumBy(c => c.fee);

When the we use strings insteads arrow functions, it does not breaks into several lines, for instance:

let total = _(credits).filter('c => c.active').sumBy('c => c.fee');

I'm working with following .prettierrc and "prettier": "^2.0.5" :

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 280,
  "tabWidth": 4,
  "arrowParens": "avoid",
}

How can I avoid the line breaking with prettier when there is a arrow function inside the functions?

Answer 1

There is no option to override method chain breaking behaviour. With version 2.0, Prettier uses a new heuristic to determine when to break method chains. You can see the heuristic in https://github.com/prettier/prettier/pull/6685/files#diff-207f1974ddc06ae7b574152f9afc878dR893 .

Prettier breaks method chains if the arguments are non-trivial. A string literal is considered as "trivial", but an arrow function expression is considered as "non-trivial". That's the reason you're seeing different behaviour when you pass strings vs arrow functions as parameters.