ESLint 和 Prettier 缩进冲突

Question

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

\n

// .eslintrc\n{\n    // other settings...\n\n    rules: {\n        "indent": ["error", 4] // 4 whitespace indent\n    }\n}\n

\n

// .prettierrc\n{\n    // other settings...\n\n    "useTabs": false,\n    "tabWidth": 4 // 4 whitespace indent\n}\n

\n

它在其他地方也运作良好。但在这种情况下，两个插件存在一些冲突：

\n

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

\n

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

\n

Prettier 需要 2 个额外的空间来缩进对象声明（和]），因此 eslint 会抛出一些错误，例如Expected indentation of x spaces but found x+2.

\n

当我尝试删除多余的空格时，Prettier 会提示我Insert \'\xc2\xb7\xc2\xb7\'（两个空格）。

\n

我阅读了 eslint 和 prettier 文档，但似乎没有解决方案。

\n

我可以关闭 eslint 中的规则来忽略此错误，但是有更好的配置来修复它吗？

\n

Answer 1

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

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

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