保存混乱的 .jsx 文件时更漂亮的格式答案

【问题标题】：Prettier's format on save messes up .jsx files保存混乱的 .jsx 文件时更漂亮的格式
【发布时间】：2018-10-21 02:07:50
【问题描述】：

我启用了format on save，它在 .js 文件中运行良好，但是当我尝试将代码保存在我的 .jsx 文件中时，一切都搞砸了。如何在不禁用 format on save 的情况下配置我的 prettier 以避免此问题？

【问题讨论】：

标签： reactjs visual-studio-code prettier

【解决方案1】：

TL;DR：如果您已经拥有由 ESLint 管理的 Prettier，请禁用 Prettier VSCode 扩展。

我对 .mdx 文件（我用于 Storybook）也有类似的问题。我启用了 formatOnSave 并通过 ESLint 将 Prettier 用于 Vue 项目。 Prettier 会通过删除有意义的空行来破坏 .mdx 文件，从而导致一个很好的错误：“相邻的 JSX 元素必须包含在封闭标记中。”

我的解决方案是在 VSCode 中禁用 Prettier 扩展。无论如何你都不需要它，因为你已经有一个由 ESLint 管理的 Prettier，而且那个不会破坏 .mdx 文件。

【讨论】：

【解决方案2】：

我遇到了同样的情况。我卸载了 prettier 等扩展程序，它工作正常。

【讨论】：

我喜欢这个选项，但如果能更漂亮地正确自动格式化代码不是很酷..

【解决方案3】：

对于遇到这种情况的任何人，您可能已经安装了其他一些 VS Code 插件，例如 vscode 推荐的Beautify。卸载它，prettier 现在应该可以工作了。

【讨论】：

谢谢。这有帮助。拥有多个代码格式化程序确实会弄乱代码。

【解决方案4】：

如果您使用的是 VS Code，请尝试将其添加到您的 settings.json 文件中：

{
  "editor.formatOnSave": false,
  "[javascriptreact]": {
      "editor.formatOnSave": true
  }
}

【讨论】：