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

问题描述

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

相关代码

格式化之前的代码

return (

< header >

< Row >

< /Col>

ReactNews

{userShow}

this.setModalVisible(false)} onOk ={() => this.setModalVisible(false)} onText = "关闭">

登录

{getFieldDecorator('userName', {

rules: [{ required: true, message: 'Please input your username!' }],

})(

} placeholder="Username" />

)}

{

getFieldDecorator('r_userName',{

rules:[{required:true, message:"用户名不能为空!"}]

})(

} placeholder = "请输入你的用户名" />

)

}

注册

< /Col >

Row >

)

格式化之后

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 >

)

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