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 需要 2 個額外的空間來縮進 object 聲明（和] ），所以 eslint 會拋出一些錯誤，例如Expected indentation of x spaces but found x+2 。

當我嘗試刪除多余的空間時，prettier 會提示我Insert '··' （兩個空格）。

我閱讀了 eslint 和更漂亮的文檔，但似乎對此沒有解決方案。

我可以關閉 eslint 中的規則以忽略此錯誤，但有更好的配置來修復它嗎？

Answer 1

GitHub issue 也提到了這個問題。
ESLint 和 Prettier 有不同的縮進實現，它們會相互沖突。
使用 prettier 時應關閉 ESLint 縮進檢查。

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

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

Answer 2

解決沖突

您可以通過執行以下操作使 eslint 接受所有更漂亮的格式

為 prettier 安裝 eslint 配置

npm install eslint-config-prettier

並將其包含在文件.eslintrc.js的extends選項中

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