ESLint 和 Prettier 缩进冲突。

Question

我正在使用 eslint 和 prettier（在 vscode 中），并且配置了缩进规则：

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

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

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

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

它在其他地方表现良好。但在这种情况下，两个插件存在冲突：

// 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在声明对象（包括]）时会多缩进两个空格，导致eslint出现错误，例如：Expected indentation of x spaces but found x+2。
当我试图删除这些空格时，prettier会提示我插入两个空格··。
我阅读了eslint和prettier的文档，但似乎没有解决此问题的方法。
我可以关闭eslint规则以忽略此错误，但是否有更好的配置来修复它呢？

- koishi

Answer 1

解决冲突

您可以通过以下步骤使eslint接受所有prettier格式：

安装prettier的eslint配置。

npm install eslint-config-prettier

将其包含在文件.eslintrc.js的extends选项中。

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

- Abraham

Answer 2

这个问题也在GitHub的一个问题中提到了。
ESLint和Prettier有不同的缩进实现，它们会相互冲突。
当使用prettier时，您应该关闭ESLint的缩进检查。

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

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

- Reza Mohammadi