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}

正如您所看到的那样，并非每个“道具”都在新线上，是否可以通过调整/设置来实现？

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

Answer 1

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

在WebStorm中为JSX / React调整格式

1 个答案: