【问题标题】：ESLint and Prettier indent conflictESLint 和 Prettier 缩进冲突
【发布时间】：2022-08-09 18:55:18
【问题描述】：

我正在使用 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 个额外的空间来缩进对象声明（和 ]），所以 eslint 会抛出一些像 Expected indentation of x spaces but found x+2 这样的错误。

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

我阅读了 eslint 和更漂亮的文档，但似乎对此没有解决方案。

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

标签： javascript visual-studio-code eslint prettier

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

解决冲突

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

为 prettier 安装 eslint 配置

npm install eslint-config-prettier

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

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

【讨论】：