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"
    }
}