保存混乱的 .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 更漂亮的 react/jsx-max-props-per-line 格式