Tweaking-Formatierung in WebStorm für JSX/React

Question

Ich bin auf der Suche nach einem Editor, der bei der Formatierung von React/JSX-Code ohne Kopfschmerzen helfen wird. Ich bin ziemlich beeindruckt von WebStorm, während ich mit react/jsx, little-to-no setup arbeite. Der Formatierer ist fast perfekt. Kann ich den Formatierer irgendwie verändern?

Aktuelle Code:

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

-Code nach Format/einrücken

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

Erwartetes Ergebnis

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

Wie man sehen kann nicht jeder ‚Prop‘ ist auf einer neuen Zeile, kann diese durch eine zwicken/Einstellung erreicht werden?

Bearbeiten - ich habe auch versucht, Sublime, es funktionierte die Hälfte der Zeit (ein Fehler zufällig erzeugt)

Answer 1

JSX Formatierer verwendet HTML-Code Stil Präferenzen. Bitte versuchen Sie unter Einstellungen | Wrap attributes: auf Wrap always Editor | Codestil | HTML - hilft es?