如何配置 atom-beautify 包以使用 babel/jsx javascript 文件进行格式化？答案

【问题标题】：How to configure atom-beautify package to format with babel/jsx javascript files?如何配置 atom-beautify 包以使用 babel/jsx javascript 文件进行格式化？
【发布时间】：2016-09-10 23:13:09
【问题描述】：

我搜索了一个包来自动缩进和美化我的 React/babel 代码。我刚刚尝试了atom-beautify，这似乎对 Atom 有很好的反馈。

但是在普通 babel 文件上的结果还不够好：“HTML 标签”没有按需要缩进。有没有人尝试将 atom-beautify 与 babel 一起使用？

【问题讨论】：

请随时在 Atom-Beautify 存储库上创建问题：github.com/Glavin001/atom-beautify/issues 通过提供debug.md Gist 我自己和其他人可能能够帮助您使其正常工作。
您找到可行的解决方案了吗？
不。我使用 VSCode 代替，它在格式化 jsx 方面最强大 :)

标签： reactjs atom-editor babeljs prettify

【解决方案1】：

我目前使用插件 language-babel、react 和 autoclose-html 来为我处理这个问题。

https://atom.io/packages/autoclose-html

https://atom.io/packages/language-babel

https://atom.io/packages/react

希望这会有所帮助！

【讨论】：

我尝试了 language-babel 但是，如果我错了，请纠正我，它只会自动缩进 jsx 而不是函数 & co 中的本地 javascript。
恐怕我不能确定。我刚进去玩了一下设置，它似乎有你正在寻找的选项，我没有任何问题，我所有的 javascript 和反应代码都自动正确缩进。很抱歉，如果这没有更多帮助。
react 和 language-babel 似乎相互冲突 - 我收到了一条警告消息。
我也遇到过这个碰撞问题。我现在只使用react，它似乎有很大帮助
同样的问题，react 和 language-babel 不能一起工作。到目前为止，我使用的是 language-babel。

【解决方案2】：

Atom 美化当时还不支持 jsx。 it does now :)

【讨论】：

【解决方案3】：

我已经遇到了同样的问题，最后使用了prettier-atom 。它与 HTML 标记配合得非常好。

【讨论】：

【解决方案4】：

我使用 Prettier (https://prettier.io/) 将我的代码重写为最佳实践，因此所有团队都可以编写代码，就好像只有一个人编写了所有代码一样。支持 JSX，最近甚至支持 TypeScript、CSS、SCSS、..

【讨论】：

我刚开始使用 Atom 和 JSX 的 Nuclide 包。更漂亮的作品就好了！

【解决方案5】：

我使用miniprettier，它在Prettier official site 上列为推荐包。

它就像更漂亮的原子，但没有所有依赖项。我喜欢它！它在 JSX 上运行良好。我将 atom-beautify 用于其他文件类型（例如 JSON、纯 HTML、JS）。

【讨论】：

我喜欢 miniprettier，但无法在保存时应用它?。