ESLint indent rule misconfiguration with chain Call Expressions

Question

In our JS files, we have below structure:

import { html } from 'lit-html';

function when(expression, trueValue, falseValue) {
  if (expression) {
    return trueValue();
  }

  if (falseValue) {
    return falseValue();
  }
  return undefined;
}

export class SomeClass extends LitElement {
  render = () => html`
    <someHtml>
      <p>Some text</p>
      ${when(
        someCondition,
        () => html`<div>on condition true</div>`
        () => html`<div>on condition false</div>`
      )}
    </someHtml>
  `;
}

The when function creates a conflict between our Prettier and ESLint configuration.

Here is our prettier configuration:

{
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
}

and our eslint/indent rule:

 "indent": [
  "error",
  2,
  {
    "SwitchCase": 1,
    "CallExpression": { "arguments": 1 }
  }
]

Can you tell me why I am getting below errors with the above setup?

ESLint: Expected indentation of 4 spaces but found 8.(indent)
ESLint: Expected indentation of 6 spaces but found 10.(indent)

Answer 1

Don't use eslint for indentation. From the Prettier vs. Linters documentation:

How does it compare to ESLint/TSLint/stylelint, etc.?

Linters have two categories of rules:

Formatting rules: eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…

Prettier alleviates the need for this whole category of rules! Prettier is going to reprint the entire program from scratch in a consistent way, so it’s not possible for the programmer to make a mistake there anymore :)

Code-quality rules: eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…

Prettier does nothing to help with those kind of rules. They are also the most important ones provided by linters as they are likely to catch real bugs with your code!

In other words, use Prettier for formatting and linters for catching bugs!

This guidance applies to the eslint/indent rule as well. This conflict (and resolution) is fairly well documented elsewhere:

• Indentation rule conflict with prettier #372
• Prettier and eslint indents not working together
• Airbnb, ESLint, Prettier conflict over Switch and Case indentation
• eslint indent and @typescript-eslint/indent conflict
• Set up ESlint, Prettier & EditorConfig without conflicts

You most likely would benefit from doing a more pure integration between eslint and prettier as described in Integrating with Linters if you haven't already, and then ensuring that you don't override prettier/recommended afterwards.