How to correctly use Eslint rule newline-per-chained-call with Prettier in Angular

Question

I added the rule:

"newline-per-chained-call": [
    "error",
    {
        "ignoreChainWithDepth": 2
    }
]

to my .eslintrc.json file.
I Also extended "plugin:prettier/recommended".
Now when I write code like this:

test.random2().random2()
    .random3();

I get error Delete ⏎↹↹↹ eslint (prettier/prettier). in VSCode which I don't want to have. How can I fix the configuration to allow this code structure?

My .prettierrc.json looks like this:

{
    "singleQuote": true,
    "useTabs": true,
    "semi": true,
    "bracketSameLine": true,
    "endOfLine": "lf"
}

Answer 1

can't use newline-per-chained-call with prettier because prettier not allow that behavior... the only can do is remove newline-per-chained-call or remove prettier or add the comment "// prettier-ignore" before chained line