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

正如你所看到並不是每一個「託」是一個新的生產線，可以通過一個調整/設置可以實現嗎？

編輯 - 我也試過崇高，它的工作一半時間（產生隨機的誤差）

Answer 1

JSX格式使用HTML代碼風格偏好。請嘗試設置Wrap attributes:至Wrap always的設置|編輯|代碼樣式| HTML - 它有幫助嗎？