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

Posted 2023-02-21

【中文标题】VSCode 在 React 的 JSX 中错误地格式化三元

【英文标题】：VSCode formatting ternary incorrectly within React's 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）。

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