title: How to correctly use Eslint rule newline-per-chained-call with Prettier in Angular
body: <p>I added the rule:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;newline-per-chained-call&quot;: [
      &quot;error&quot;,
      {
          &quot;ignoreChainWithDepth&quot;: 2
      }
  ]
  </code></pre>
  <p>to my <code>.eslintrc.json</code> file.<br />
  I Also extended <code>&quot;plugin:prettier/recommended&quot;</code>.<br />
  Now when I write code like this:</p>
  <pre class="lang-js prettyprint-override"><code>test.random2().random2()
      .random3();
  </code></pre>
  <p>I get error <code>Delete ⏎↹↹↹ eslint (prettier/prettier).</code> in VSCode which I don't want to have. How can I fix the configuration to allow this code structure?</p>
  <p>My <code>.prettierrc.json</code> looks like this:</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;singleQuote&quot;: true,
      &quot;useTabs&quot;: true,
      &quot;semi&quot;: true,
      &quot;bracketSameLine&quot;: true,
      &quot;endOfLine&quot;: &quot;lf&quot;
  }
  </code></pre>