Jak edytować pliki JSX (reagować) w emacsie?

Korzystam z trybu js2, ale nie wcina on poprawnie html w javascript. Znalazłem to repozytorium https://github.com/jsx/jsx-mode.el, ale to nie jest reakcja, to dla innych jsx.

Czego używasz do edycji aplikacji reagujących na pliki jsx?

Rozwiązanie 1:

Krok 1, użyj https://github.com/felipeochoa/rjsx-mode

Krok 2, zainstaluj Emacsa 25+, patrz https://github.com/mooz/js2-mode/issues/291

Krok 3, Popraw tryb rjsx z poniższym kodem

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

Uwaga: jeśli użyjesz funkcji strzałki w atrybucie komponentu, nadal występuje pewien wcięcie. Ale to rozwiązanie działa dobrze w większości przypadków.

Łatka jest nadal przydatna w bieżącej stabilnej wersji rjsx-mode v0.4.0.

Błąd został naprawiony w wersji 2018-8-19 w wersji niestabilnej , zobacz https://github.com/felipeochoa/rjsx-mode/pull/75, aby uzyskać szczegółowe informacje.

Powodem, dla którego się trzymam rjsx-modejest to, że dziedziczy po trybie js2, więc mogę używać funkcji imenu z trybu js2. Jest to bardzo przydatne podczas pisania javascript es6.

Uwaga: jeśli używasz js2-jsx-modezamiast rjsx-mode, nadal potrzebujesz mojej łatki.

Rozwiązanie 2:

Użyj trybu internetowego. Nie używam trybu internetowego, ale w najnowszej informacji o wersji twierdzi, że wcięcie jsx może być obsługiwane poprawnie. Jeśli używasz trybu internetowego, imenu z trybu js2 nie jest już dostępne.

Na Emacs masteroddziału (ostatecznie Emacs 27), wsparcie JSX jest teraz wbudowany w domyślnym trybie JavaScript dla Emacs js-mode. (Wypróbuj! Możesz zbudować ze źródła lub np. Zainstalować migawkę z PPA .)

Jeśli przewidywane jest użycie JSX, obsługa JSX zostanie automatycznie włączona w buforach JavaScript. Domyślne kryteria to:

• nazwa pliku kończy się na „.jsx” lub
• import React from 'react'lub var React = require('react')pojawia się u góry pliku

Możesz dostosować strategię wykrywania, dodając wyrażenia regularne do zmiennej js-jsx-regexps. Aby włączyć JSX bezwarunkowo, można również ustawić js-jsx-syntaxna T w pliku / .dir-locals.el / plików zmiennej init, czy wezwanie js-jsx-enablew js-mode-hook.

Po włączeniu JSX zostanie odpowiednio podświetlony i wcięty.

Użytkownicy, którzy byli rozczarowani dostępną obsługą wcięć JSX od wersji 25, mogą być mile zaskoczeni, gdy stwierdzą, że wcięcia są znacznie dokładniejsze niż wcześniej. Na przykład JSX nie musi już być zawijany w nawiasy, aby był odpowiednio wcięty. Wcięcie kodu z funkcjami strzałek również działa teraz znacznie lepiej.

Używam trybu internetowego z następującą konfiguracją:

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

Używam również trybu internetowego, a jeśli używasz use-package, możesz użyć tego fragmentu kodu.

(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]?\\'")))))

To dodaje również lokalne moduły węzłów do twojej ścieżki, dzięki czemu możesz używać eslintz flycheck. Zauważ, że zakładasz, że korzystasz z systemu macOS, który musi add-node-modules-pathrozwiązać ten sam problem. Konieczne będzie także osobne skonfigurowanie Flycheck, aby działały włókna.

Jeśli chcesz tylko rzeczy związane z jsx, możesz użyć tego:

(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]?\\'")))))

Umożliwi to tryb internetową tylko na foldery z nazwami components, containerslub src. Jeśli chcesz włączyć tryb sieciowy dla dowolnego pliku .js, usuń te linie. Jeśli nie chcesz, aby tryb sieciowy był włączony w srcfolderach, usuń ten wiersz w ciągu zarówno na, jak :modei na :config.