WebStormでJSX/Reactの書式を調整する

Question

Reach/JSXコードの書式設定に頭痛のないエディタを探しています。私はWebStormにかなり感銘を受けましたが、react/jsx、少ししかない設定で作業していました。フォーマッタはで、ほぼになります。どういうわけかフォーマッタを微調整できますか？

現在のコード：

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

あなたがいないすべての「小道具」は新しい行にある見ることができるように、それは微調整/設定によって達成することができますか？

編集 - 私はまた、

Answer 1

JSXフォーマッタは、HTMLコードのスタイルの好みを使用しています（ランダム誤差が生じる）の半分の時間を働いていた、サブライムを試してみました。 [設定|設定]でWrap attributes:〜Wrap alwaysを設定してみてください。エディタ|コードスタイル| HTML - それは役に立ちますか？