Keine HTML / JSX-Einrückung im JSX-Modus

8

Aus irgendeinem Grund möchte das HTML / JSX in meinen Reaktionsquelldateien immer wie folgt einrücken, dh es gibt fast keine Einrückung:

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

Was ich wirklich gerne hätte, ist so etwas wie das Folgende:

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

Dies ist der Einzug, den ich erhalte, wenn ich HTML / JSX mit aktiviertem HTML-Modus oder Web-Modus in den Arbeitspuffer kopiere. Wie Sie sehen können, ist der Einzug viel besser lesbar und es funktioniert so, ob ich den HTML-Modus oder den Web-Modus verwende.

Wie kann ich dafür sorgen, dass meine Reaktionsquelldateien das HTML / JSX wie folgt einrücken?

indentation web-mode html

— flooose
quelle

Was ist die Dateierweiterung Ihrer Datei?

— fxbois

Ich habe es mit den Erweiterungen .js und .jsx getestet

— flooose

mit .jsx sollte es ok sein. Sind Sie sicher, dass Sie .jsx-Dateien mit dem Web-Modus verknüpft haben (wie auf web-mode.org gezeigt )?

— fxbois

Die Frage bezieht sich auf den JSX-Modus und nicht auf den Web-Modus.

— Flooose

10

Dies ist ein bekanntes Problem , das bisher noch nicht behoben wurde. Ich habe beschlossen, jsx-modeaus diesem Grund darauf zu verzichten und nur zu verwenden web-mode. Es unterstützt JSX und eignet sich besser für Dateien mit gemischten Inhalten.

Da ich in mehreren Projekten arbeite, die nicht alle die gleiche Konvention haben, die .jsxEndung für JSX-Dateien zu verwenden (einige verwenden einfach .jsEndungen), habe ich auch den folgenden Hack implementiert, um die Einstellung web-mode-content-typeauf jsx"Javascript" zu setzen. Dies hat zur Folge, dass alle Javascript-Dateien als JSX betrachtet werden, aber dies hat hoffentlich keine negativen Konsequenzen.

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

— flooose
quelle

1

Vielen Dank, dies war ein großer Schmerzpunkt bei Emacs, bei dem Sie mir geholfen haben.

— Drew

8

Zu Ihrer Information, für alle anderen, die auf dieses Problem stoßen, liegt dies daran, dass dieses Projekt im jsx-Modus nicht zum Bearbeiten der React JSX-Vorlagen von Facebook erstellt wurde, sondern vielmehr für diese andere kompilierte Javascript-Sprache, die auch als JSX bezeichnet wird .

Dass der gleiche Name wie die React-Vorlagen verwendet wird, ist völlig zufällig.

Aus diesem Grund waren die ersten Commits für dieses Repo 4 Jahre (vor der Datierung von Facebooks JSX und React nach Jahren) und das letzte Commit in diesem Repo war 2013 (auch vor der Datierung von React).

— Victor Quinn
quelle