Atom Editor JSX 格式看起来很糟糕，如何修复？

Question

我有一个带有一些嵌入式 jsx 的简单 .js，保存时格式如下：

class Layout extends React.Component {
    render() {
      return ( < h1 > It Works! < /h1>);
      }
    }

显然这不太好，我希望它看起来像这样：

class Layout extends React.Component {
    render() {
      return ( 
              <h1>It Works!</h1>
             );
             }
}

Question: So how do I get it to format like this?

Answer 1

您可以通过安装扩展来实现。

转到文件 -> 设置 -> 安装并搜索 jsx。找到你最喜欢的并安装它。我正在使用以下一个：https://atom.io/packages/language-javascript-jsx

Answer 2

我只是运行遇到了同样的问题，但不知何故 language-javascript-jsx 包似乎也没有格式化我的 jsx（所有标签在第一个缩进点处展平）。我在 Atom forums 上找到了以下包，它完美地工作，突出显示匹配的结束标记等，它甚至格式化 graphql 语句（除了大量其他语言）所以绝对值得一试恕我直言。在按住 Ctrl 键的同时上下移动 jsx 是我的头号功能，它很管用。

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

下载量超过 100 万次，这似乎也是首选包..

让我的编码更快乐:-)

Atom Editor JSX 格式看起来很糟糕，如何修复？

Atom Editor JSX formatting looks terrible, how to fix?

react-jsx

atom-editor