How to avoid VsCode Prettier to break chain functions with arrow functions?

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?

manjunatha_d manjunatha_d · Accepted Answer · 2020-07-02T14:47:43

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.

How to avoid VsCode Prettier to break chain functions with arrow functions?

1 Answers