VSCode 在 React 的 JSX 中错误地格式化三进制

我正在运行 VSCode 来开发我的 React 应用程序。我有一个简单的三元：

{isLoading ? (
    <Spinner />
) : (
    <Content />
)}

...但是，当我保存时，它的格式如下：

{isLoading ? (
    <Spinner />
) : (
        <Content />
)}

...我的 linter（正确）给出了以下错误：

预期缩进 5 个选项卡，但发现 6 个 eslint/缩进

每当我按 CTRL+S 时，缩进都会瞬间纠正，然后返回到错误状态，并用红线指示问题。

问题是我的 VSCode 设置有这样的：

"editor.formatOnSave": true

...我也有这个：

"editor.codeActionsOnSave": {
  "source.fixAll": true
},

我的 linter 和 VSCode 格式有冲突。但是，即使我禁用了 settings.json 文件中的所有默认格式选项，此问题仍然存在。如果我关掉formatOnSave，当我手动格式化代码时，问题再次出现。

我不明白为什么他们不能共存。为什么即使我没有在 settings.json 中指定任何内容，我的 VSCode 格式化程序也会弄乱我的 JSX？

我能找到的唯一解决方案是关闭自动格式化并完全依赖 ESLint 来格式化我的代码，然后手动格式化（使用ALT+SHIFT+F）当我想要的时候。

这并不理想，但似乎没有其他选择。我很高兴得到纠正。