React jsx Atom编辑器JSX格式看起来很糟糕，如何修复？

我有一个简单的.js，其中包含一些嵌入的jsx，在保存时格式如下：

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

类布局扩展了React.Component{
render（）{
返回（
有效！
）；
}
}

很明显，这不好，我希望它看起来像这样：

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

类布局扩展了React.Component{
render（）{
报税表（
它起作用了！
);
}
}

问题：那么我如何将其格式化成这样呢

---

您可以通过安装一个扩展来归档它

转到文件->设置->安装 并搜索jsx。找到你最喜欢的并安装它。

---

我正在使用下面的一个：

我刚刚遇到了同样的问题，但不知何故，语言javascript jsx包似乎也没有格式化我的jsx（所有标记在第一个缩进点变平）。我发现下面的包在上运行得非常好，突出显示了匹配的结束标记等，它甚至格式化了graphql语句（除了许多其他语言），因此绝对值得一试。在按住Ctrl键的同时上下移动jsx是我的头号功能，它可以正常工作

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

---

让我的编码更快乐：-）

lol-有人很快就记下来了！两秒钟！！