Wie bearbeite ich jsx (reagieren) Dateien in Emacs?

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?

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.

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

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.

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

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.