Wie bearbeite ich jsx (reagieren) Dateien in Emacs?

19

Ich verwende den js2-Modus, der HTML-Code in Javascript wird jedoch nicht richtig eingerückt. Ich habe dieses Repo https://github.com/jsx/jsx-mode.el gefunden, aber es ist nicht zum Reagieren gedacht, es ist für ein anderes Jsx.

Was verwenden Sie für die Bearbeitung von Reaktionsanwendungen mit JSX-Dateien?

jcubic
quelle

Antworten:

17

Lösung 1:

Schritt 1: Verwenden Sie https://github.com/felipeochoa/rjsx-mode

Schritt 2, Emacs 25+ installieren, siehe https://github.com/mooz/js2-mode/issues/291

Schritt 3, Patch rjsx-mode mit dem folgenden Code

(defadvice js-jsx-indent-line (after js-jsx-indent-line-after-hack activate)
  "Workaround sgml-mode and follow airbnb component style."
  (save-excursion
    (beginning-of-line)
    (if (looking-at-p "^ +\/?> *$")
        (delete-char sgml-basic-offset))))

Beachten Sie, dass bei Verwendung der Pfeilfunktion im Komponentenattribut immer noch Einrückungsprobleme auftreten. In den meisten Fällen funktioniert diese Lösung jedoch einwandfrei.

Der Patch ist für die aktuelle stabile Version weiterhin nützlich rjsx-mode v0.4.0.

Der Fehler wurde am 2018-8-19 in einer instabilen Version behoben. Weitere Informationen finden Sie unter https://github.com/felipeochoa/rjsx-mode/pull/75 .

Der Grund, an dem ich rjsx-modefesthalte , ist, dass es vom js2-Modus erbt, sodass ich imenu-Funktionen vom js2-Modus verwenden kann. Es ist sehr nützlich, wenn Sie es6 Javascript schreiben.

Bitte beachten Sie, wenn Sie js2-jsx-modeanstelle von verwenden rjsx-mode, benötigen Sie immer noch meinen Patch.

Lösung 2:

Verwenden Sie den Web-Modus. Ich verwende den Web-Modus nicht, aber die jüngsten Versionshinweise von jsx indentation können ordnungsgemäß verarbeitet werden. Wenn Sie den Web-Modus verwenden, ist das imenu aus dem js2-Modus nicht mehr verfügbar.

chen bin
quelle
2
Wusste nicht, dass der Web-Modus jsx unterstützt, ich werde es dann nutzen, der Autor reagiert wirklich auf Github, wenn Sie Fehler in Einrückungen finden.
JCUBIC
1
Das Einrückungsproblem im rjsx-Modus scheint behoben zu sein!
cgl
Es ist behoben, nachdem mein Update angewendet wurde. Ich benutze den rjsx-Modus in beiden Emacs 25.2 und 25.3
chen bin
Der Patch ist eine gute Idee, ich wünschte, er wurde bereits in den rjsx-Modus eingebunden!
Rudolf Olah
Können Sie Informationen hinzufügen, die besagen, dass der Patch in neuen Versionen nicht mehr benötigt wird, rjsx-modeoder ihn vollständig entfernen?
DoMiNeLa10
5

In der Emacs- masterVerzweigung (eventuell Emacs 27) ist die JSX-Unterstützung jetzt in den Standard-JavaScript-Modus für Emacs integriert js-mode. (Probieren Sie es aus! Sie können aus dem Quellcode erstellen oder z. B. einen Snapshot von einem PPA installieren .)

Screenshot von JSX in Emacs hervorgehoben

Wenn die Verwendung von JSX erwartet wird, wird die JSX-Unterstützung in JavaScript-Puffern automatisch aktiviert. Die Standardkriterien sind:

  • Dateiname endet mit „.jsx“ oder
  • import React from 'react'oder wird var React = require('react')am oberen Rand der Datei angezeigt

Sie können die Erkennungsstrategie anpassen, indem Sie der Variablen reguläre Ausdrücke hinzufügen js-jsx-regexps. So aktivieren Sie bedingungslos JSX, können Sie auch festlegen , js-jsx-syntaxum t in einer Init - Datei / .dir-locals.el / Dateivariable, oder rufen Sie js-jsx-enablein js-mode-hook.

Nach der Aktivierung wird JSX richtig hervorgehoben und eingerückt.

Benutzer, die von der seit Version 25 verfügbaren JSX-Einrückungsunterstützung enttäuscht waren, sind möglicherweise angenehm überrascht, wenn sie feststellen, dass die Einrückung weitaus genauer ist als zuvor. Zum Beispiel muss JSX nicht mehr in Klammern gesetzt werden, um richtig eingerückt zu werden. Das Einrücken von Code mit Pfeilfunktionen funktioniert jetzt auch viel besser.

Jackson
quelle
3

Ich benutze den Web-Modus mit folgender Konfiguration:

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html\\'" . web-mode))

;; (setq web-mode-enable-auto-pairing t)
(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))))
amirouche
quelle
Nicht Ihre gesamte Konfiguration ist für JSX relevant.
DoMiNeLa10
In der Tat hatte ich den Eindruck, dass es sowieso nützlich sein würde. Die Antwort wurde bearbeitet, um Dinge zu entfernen, die nicht mit JSX zusammenhängen.
Amirouche
0

Ich benutze auch den Web-Modus und wenn Sie verwenden use-package, können Sie diesen Code-Schnipsel verwenden.

(use-package web-mode
  :defer 2
  :after (add-node-modules-path)
  :ensure t
  :mode ("\\.html?\\'"
         "/themes/.*\\.php?\\'"
         "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'"
         "\\.\\(handlebars\\|hbs\\)\\'")
  :config (progn
            (setq
             web-mode-markup-indent-offset 2
             web-mode-css-indent-offset 2
             web-mode-code-indent-offset 2
             web-mode-enable-auto-closing t
             web-mode-enable-auto-opening t
             web-mode-enable-auto-pairing t
             web-mode-enable-auto-indentation t
             web-mode-enable-auto-quoting t
             web-mode-enable-current-column-highlight t
             web-mode-enable-current-element-highlight t
             web-mode-content-types-alist
             '(("jsx" . "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'")))))

Dies fügt auch lokale Knotenmodule auf Ihren Weg , so dass Sie verwenden können , eslintmit flycheck. Beachten Sie, dass Sie unter macOS arbeiten und add-node-modules-pathdasselbe Problem beheben müssen. Sie müssen Flycheck auch separat konfigurieren, damit das Flusen funktioniert.

Wenn Sie nur jsx-bezogene Inhalte benötigen, können Sie dies tun:

(use-package web-mode
  :ensure t
  :mode ("/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'")
  :config (progn
            (setq
             web-mode-content-types-alist
             '(("jsx" . "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'")))))

Dies wird Web - Modus aktivieren nur Ordner mit Namen components, containersoder src. Wenn Sie den Web-Modus für eine JS-Datei aktivieren möchten, entfernen Sie diese Zeilen. Wenn der Web-Modus in srcOrdnern nicht aktiviert werden soll, entfernen Sie diese Zeile in der Zeichenfolge sowohl auf :modeals auch :config.


quelle