Por alguna razón, el html / jsx en mis archivos fuente de reacción siempre quiere sangrar de la siguiente manera, es decir, casi no hay sangría:
return (
<DateRangePicker ranges={this.state.ranges} startDate={this.state.startDate} endDate={this.state.endDate}
onApply={this.applyEvent}>
<Button className="selected-date-range-btn" style={{width : '250px'}}>
<div className="pull-left">
<Glyphicon glyph="calendar"/>
</div>
<div className="pull-right"><span>{label}</span></div>
</Button>
</DateRangePicker>
)
Lo que realmente me gustaría es algo como lo siguiente:
<DateRangePicker ranges={this.state.ranges} startDate={this.state.startDate} endDate={this.state.endDate}
onApply={this.applyEvent}>
<Button className="selected-date-range-btn" style={{width : '250px'}}>
<div className="pull-left">
<Glyphicon glyph="calendar"/>
</div>
<div className="pull-right"><span>{label}</span></div>
</Button>
</DateRangePicker>
Esta es la sangría que obtengo cuando copio el html / jsx en el búfer de memoria virtual con el modo html o el modo web habilitado. Como puede ver, la sangría es mucho más legible y funciona así si uso el modo html o el modo web.
¿Cómo puedo hacer que mis archivos fuente de reacción sangren el html / jsx de esta manera?
indentation
web-mode
html
flotar
fuente
fuente
Respuestas:
Este es un problema conocido y, por ahora, no se ha solucionado. He decidido renunciar
jsx-mode
por este motivo y simplemente usarloweb-mode
. Tiene soporte para JSX y es más adecuado para archivos de contenido mixto.Ya que el trabajo en varios proyectos que no todos tienen la misma convención de usar el
.jsx
final para archivos JSX (algunos simplemente usan.js
terminaciones), también me he implementado este truco para establecer elweb-mode-content-type
quejsx
, cuando es "javascript". Esto tiene la consecuencia de que todos los archivos javascript se consideran JSX, pero es de esperar que esto no tenga consecuencias negativas.fuente
Para su información para cualquier persona que se encuentre con este problema, esto se debe a que este proyecto en modo jsx no está hecho para editar las plantillas React JSX de Facebook, sino más bien este otro lenguaje javascript compilado también llamado JSX .
Que tener el mismo nombre que las plantillas React es una coincidencia.
Esta es la razón por la cual los primeros compromisos para este repositorio fueron 4 años (antes de datar JSX y React de Facebook por años) y el último compromiso en este repositorio fue en 2013 (también antes de React).
fuente