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

【问题标题】：VSCode formatting ternary incorrectly within React's JSXVSCode 在 React 的 JSX 中错误地格式化三元
【发布时间】：2021-03-09 20:17:04
【问题描述】：

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

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

...但是，当我保存它时，它会被格式化为：

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

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

预期缩进 5 个制表符，但发现 6 个 eslint/indent

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

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

"editor.formatOnSave": true

...我也有这个：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：