在 WebStorm 中为 JSX/React 调整格式

Question

我正在寻找一个可以帮助格式化 React/JSX 代码的编辑器，而且不会让人头疼。在使用 react / jsx 时，WebStorm 给我留下了深刻的印象，几乎没有设置。格式化程序几乎完美。我能以某种方式调整格式化程序吗？

当前代码：

<button onClick={this.props.showHistoryButton} style={{textTransform:'capitalize',borderRadius:0,boxShadow:'none',border:'1px solid transparent',width:100,zIndex:9}} className="btn btn-default">
       History
      </button>
<UserRow loadRecord={this.props.loadRecord} showHistory={this.props.showHistory} checkedIds={this.props.checkedIds} expanded={user.expanded}
                expandRow={expandRow}
                compressRow={compressRow}
                resetExpanded={resetExpanded}
                allExpanded={allExpanded} checked={user.checked}
                unCheckRow={unCheckRow}
                checkRow={checkRow}
                resetParentHeight={this.resetParentHeight.bind(this)} tableContainerHeight={this.state.tableContainerHeight}
                key={index}
                user={user}/>

格式化/缩进后的代码

<button onClick={this.props.showHistoryButton} style={{
                    textTransform: 'capitalize',
                    borderRadius: 0,
                    boxShadow: 'none',
                    border: '1px solid transparent',
                    width: 100,
                    zIndex: 9
                }} className="btn btn-default">
                    History
                </button>
                  <UserRow loadRecord={this.props.loadRecord} showHistory={this.props.showHistory}
                         checkedIds={this.props.checkedIds} expanded={user.expanded}
                         expandRow={expandRow}
                         compressRow={compressRow}
                         resetExpanded={resetExpanded}
                         allExpanded={allExpanded} checked={user.checked}
                         unCheckRow={unCheckRow}
                         checkRow={checkRow}
                         resetParentHeight={this.resetParentHeight.bind(this)}
                         tableContainerHeight={this.state.tableContainerHeight}
                         key={index}
                         user={user}/>

预期结果

<UserRow 
loadRecord={this.props.loadRecord} 
showHistory={this.props.showHistory}

正如您所看到的，并非每个 'prop' 都在一个新行上，是否可以通过调整/设置来实现？

编辑 - 我也试过 Sublime，它工作了一半时间（随机产生错误）

Answer 1

JSX 格式化程序使用 HTML 代码风格首选项。请尝试在设置 | 中将 Wrap attributes: 设置为 Wrap always编辑|代码风格 | HTML - 有帮助吗？

在 WebStorm 中为 JSX/React 调整格式

Tweaking Formatting in WebStorm for JSX / React

sublimetext2

sublimetext3

webstorm

atom-editor

jsx