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

Question

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

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

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

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

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

Expected indentation of 5 tabs but found 6 eslint/indent

每当我按 CTRL+S 键时，缩进会在一瞬间自行纠正，然后返回到不正确的状态，红线表示有问题。

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

"editor.formatOnSave": true

...我也有这个：

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

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

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

Answer 1

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

这并不理想，但似乎没有替代方案。很高兴被纠正。

VSCode formatting ternary incorrectly within React's JSX