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

Posted

技术标签:

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

我启用了format on save,它在 .js 文件中运行良好,但是当我尝试将代码保存在我的 .jsx 文件中时,一切都搞砸了。如何在不禁用 format on save 的情况下配置我的 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
  

【讨论】:

以上是关于保存混乱的 .jsx 文件时更漂亮的格式的主要内容,如果未能解决你的问题,请参考以下文章

保存时更漂亮的 VSCODE 重新格式化已停止工作

JSX 元素“h1”没有相应的结束标记。ts(17008)

使用 VSCode 更漂亮的 react/jsx-max-props-per-line 格式

插入`··`更漂亮/更漂亮

如何在VS Code中启用自动格式化.jsx文件的Prettier?

更漂亮的东西弄乱了 jsx 片段