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

Antworten:

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