sin sangría html / jsx en modo jsx

8

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

¿Cuál es la extensión de archivo de su archivo?

— fxbois

Lo probé con las extensiones .js y .jsx

— flooose

con .jsx, debería estar bien. ¿Está seguro de que ha asociado archivos .jsx con el modo web (como se muestra en web-mode.org )?

— fxbois

La pregunta es sobre el modo jsx, no el modo web.

— flooose

10

Este es un problema conocido y, por ahora, no se ha solucionado. He decidido renunciar jsx-modepor este motivo y simplemente usarlo web-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 .jsxfinal para archivos JSX (algunos simplemente usan .jsterminaciones), también me he implementado este truco para establecer el web-mode-content-typeque jsx, 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.

(add-hook 'web-mode-hook
      (lambda ()
        ;; short circuit js mode and just do everything in jsx-mode
        (if (equal web-mode-content-type "javascript")
            (web-mode-set-content-type "jsx")
          (message "now set to: %s" web-mode-content-type))))

— flotar
fuente

1

Muchas gracias, este fue un gran punto de dolor en emacs con el que me ayudaste.

— Dibujó el

8

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).

— Victor Quinn
fuente