ESLint and Prettier indent conflict

Question

I am using eslint and prettier (in vscode), and I configured the indent rule:

// .eslintrc
{
    // other settings...

    rules: {
        "indent": ["error", 4] // 4 whitespace indent
    }
}

// .prettierrc
{
    // other settings...

    "useTabs": false,
    "tabWidth": 4 // 4 whitespace indent
}

It works well in other places. But in this case, two plugins have some conflict:

// format by prettier
const rules = func(() => {
    const rule = {...};
    return condition
        ? [
              {
                  foo: rule.a,
                  bar: rule.b,
                  baz: rule.c
              }
          ]
        : [];
});

// correct code of eslint
const rules = func(() => {
    const rule = {...};
    return condition
        ? [
            {
                foo: rule.a,
                bar: rule.b,
                baz: rule.c
            }
        ]
        : [];
});

Prettier take 2 extra space to indent the object declare(and ] ), so eslint throw some error like Expected indentation of x spaces but found x+2 .

And when I try to remove the extra space, prettier will tip me Insert '··' (two whitespace).

I read eslint and prettier documents, but it seems have no solution about this.

I can turn off the rule in eslint to ignore this error, but have any better config to fix it?

Answer 1

The problem also is mentioned on a GitHub issue .
ESLint and Prettier have different indentation implementations and they will conflict with each other.
You should turn off ESLint indentation check when using prettier.

// .eslintrc
{
    // other settings...

    rules: {
        "indent": "off"
    }
}

Answer 2

To solve conflict

You can make eslint accept all the prettier formatings by doing the following

install eslint configuration for prettier

npm install eslint-config-prettier

And include it in the extends option in the file .eslintrc.js

extends: [
  ...,
  "prettier",
],