problem description

when I first started to learn the atom-beautify plug-in for atom used by react.js, to format js code, instead of aligning the code, it became even weirder.

related codes

Code before formatting

return (
        < header >
        < Row >
        <Col span = {2} > < /Col>
        <Col span = {4} >
        <a href = "/" className = "logo" >
        <img src = "./src/images/logo.png" alt = "logo" />
        <span>ReactNews </span>
        </a>
        </Col>
        <Col span = {16} >
        <Menu mode="horizontal" onClick = {this.handleClick.bind(this)} selectedKeys = {[this.state.current]} >
        <Menu.Item key = "top" ><Icon type = "appstore" /></Menu.Item>
        <Menu.Item key = "social" > <Icon type = "appstore" /></Menu.Item>
        <Menu.Item key = "inside" ><Icon type = "appstore" /></Menu.Item>
        <Menu.Item key = "outside" ><Icon type = "appstore" /></Menu.Item>
        {userShow}
        </Menu>

        <Modal title="" wrapClassName = "vertical-center-modal" visible={this.state.modalVisible} onCancel = {() => this.setModalVisible(false)} onOk ={() => this.setModalVisible(false)} onText = "">
        <Tabs type = "card">
          <TabPane tab="" key="1">
                <Form mode = "horizontal" onSubmit={this.handleSubmit.bind(this)}>
                  <FormItem label="">
                    <Input placeholder="" {...getFieldDecorator("userName")}/>
                  </FormItem>
                  <FormItem label="">
                    <Input type="password" placeholder="" {...getFieldDecorator("password")}/>
                  </FormItem>
                  <Button type="primary" htmlType="submit"></Button>
                </Form>
          </TabPane>
          <TabPane tab = "" key = "2">
            <Form mode = "horizontal" onSubmit = {this.handleSubmit.bind(this)}>

              <FormItem>
              {getFieldDecorator("userName", {
                rules: [{ required: true, message: "Please input your username!" }],
              })(
                <Input prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />} placeholder="Username" />
              )}
              </FormItem>

              <FormItem>
              {
                getFieldDecorator("r_userName",{
                  rules:[{required:true, message:"!"}]
                })(
                  <Input prefix={<Icon type = "user" style={{ color:"rgba(0,0,0,.25)"}} />} placeholder = "" />
                )
              }
              </FormItem>
              <FormItem label="">
                <Input placeholder = "" {...getFieldDecorator("r_password")} />
              </FormItem>
              <FormItem label="">
                <Input placeholder = "" {...getFieldDecorator("r_confirmPassword")} />
              </FormItem>
              <Button type = "primary" htmlType = "submit"></Button>
            </Form>
          </TabPane>
        </Tabs>

        </Modal>


        </Col>
        <Col sapn = {2} > < /Col >
        </ Row >
        </header >
        )

after formatting

        return ( <
          header >
          <
          Row >
          <
          Col span = {
            2
          } > < /Col> <
          Col span = {
            4
          } >
          <
          a href = "/"
          className = "logo" >
          <
          img src = "./src/images/logo.png"
          alt = "logo" / >
          <
          span > ReactNews < /span> <
          /a> <
          /Col> <
          Col span = {
            16
          } >
          <
          Menu mode = "horizontal"
          onClick = {
            this.handleClick.bind(this)
          }
          selectedKeys = {
            [this.state.current]
          } >
          <
          Menu.Item key = "top" > < Icon type = "appstore" / >  < /Menu.Item> <
          Menu.Item key = "social" > < Icon type = "appstore" / >  < /Menu.Item> <
          Menu.Item key = "inside" > < Icon type = "appstore" / >  < /Menu.Item> <
          Menu.Item key = "outside" > < Icon type = "appstore" / >  < /Menu.Item> {
            userShow
          } <
          /Menu>

          <
          Modal title = ""
          wrapClassName = "vertical-center-modal"
          visible = {
            this.state.modalVisible
          }
          onCancel = {
            () => this.setModalVisible(false)
          }
          onOk = {
            () => this.setModalVisible(false)
          }
          onText = "" >
          <
          Tabs type = "card" >
          <
          TabPane tab = ""
          key = "1" >
          <
          Form mode = "horizontal"
          onSubmit = {
            this.handleSubmit.bind(this)
          } >
          <
          FormItem label = "" >
          <
          Input placeholder = "" { ...getFieldDecorator("userName")
          }
          /> <
          /FormItem> <
          FormItem label = "" >
          <
          Input type = "password"
          placeholder = "" { ...getFieldDecorator("password")
          }
          /> <
          /FormItem> <
          Button type = "primary"
          htmlType = "submit" >  < /Button> <
          /Form> <
          /TabPane> <
          TabPane tab = ""
          key = "2" >
          <
          Form mode = "horizontal"
          onSubmit = {
            this.handleSubmit.bind(this)
          } >

          <
          FormItem > {
            getFieldDecorator("userName", {
              rules: [{
                required: true,
                message: "Please input your username!"
              }],
            })( <
              Input prefix = { < Icon type = "user"
                style = {
                  {
                    color: "rgba(0,0,0,.25)"
                  }
                }
                />} placeholder="Username" / >
              )
            } <
            /FormItem>

            <
            FormItem > {
              getFieldDecorator("r_userName", {
                rules: [{
                  required: true,
                  message: "!"
                }]
              })( <
                Input prefix = { < Icon type = "user"
                  style = {
                    {
                      color: "rgba(0,0,0,.25)"
                    }
                  }
                  />} placeholder = "" / >
                )
              } <
              /FormItem> <
              FormItem label = "" >
              <
              Input placeholder = "" { ...getFieldDecorator("r_password")
              }
              /> <
              /FormItem> <
              FormItem label = "" >
              <
              Input placeholder = "" { ...getFieldDecorator("r_confirmPassword")
              }
              /> <
              /FormItem> <
              Button type = "primary"
              htmlType = "submit" >  < /Button> <
              /Form> <
              /TabPane> <
              /Tabs>

              <
              /Modal>


              <
              /Col> <
              Col sapn = {
                2
              } > < /Col > <
              / Row > <
              /header >
            )

what is the cause?