使用的atom的atom-beautify插件格式化js代码出错

Question

问题描述

刚开始学react.js，在使用的atom的atom-beautify插件格式化js代码时，非但没有把代码对齐，反而变得更奇怪了。

相关代码

格式化之前的代码

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 >
        )

格式化之后

        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 >
            )

求问到底什么原因造成的？