Come modificare i file jsx (reagire) in emacs?

19

Ho usato la modalità js2 ma non rientra correttamente in HTML in JavaScript. Ho trovato questo repository https://github.com/jsx/jsx-mode.el ma non è per reagire, è per qualche altro jsx.

Cosa usi per modificare l'applicazione di reazione con i file jsx?

major-mode javascript

— jcubic
fonte

17

Soluzione 1:

Passaggio 1, utilizzare https://github.com/felipeochoa/rjsx-mode

Passaggio 2, installa Emacs 25+, vedi https://github.com/mooz/js2-mode/issues/291

Step 3, Patch rjsx-mode con il codice sottostante

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

Si noti che esiste ancora qualche problema di rientro se si utilizza la funzione freccia nell'attributo componente. Ma questa soluzione funziona bene nella maggior parte dei casi.

La patch è ancora utile per l'attuale versione stabile rjsx-mode v0.4.0.

Il bug è stato risolto il 2018-8-19 in versione instabile , vedere https://github.com/felipeochoa/rjsx-mode/pull/75 per i dettagli.

Il motivo per cui mi attengo rjsx-modeè che eredita dalla modalità js2 in modo da poter usare le funzioni imenu dalla modalità js2. È molto utile quando si scrive javascript es6.

Nota che se usi js2-jsx-modeinvece di rjsx-mode, hai ancora bisogno della mia patch.

Soluzione 2:

Usa la modalità web. Non utilizzo la modalità Web, ma la sua nota di rilascio recente afferma che il rientro jsx può essere gestito correttamente. Se si utilizza la modalità Web, imenu dalla modalità js2 non è più disponibile.

— bin bin
fonte

2

Non sapevo che il supporto in modalità web jsx, lo userò allora, l'autore è davvero reattivo su github, se trovi bug nel rientro.

— jcubic,

1

Il problema di rientro in rjsx-mode sembra essere risolto!

— cgl

È stato risolto dopo aver applicato la mia correzione. Uso la modalità rjsx in entrambi gli Emacs 25.2 e 25.3

— chen bin

La patch è una buona idea, vorrei che fosse già stata unita alla modalità rjsx!

— Rudolf Olah,

È possibile aggiungere informazioni sulla patch non necessarie con le nuove versioni rjsx-modeo rimuoverla del tutto?

— DoMiNeLa10,

5

Sul Emacs masterramo (eventualmente Emacs 27), il supporto JSX è ora integrato nella modalità di default JavaScript per Emacs, js-mode. (Provalo! Puoi compilare dal sorgente o ad esempio installare uno snapshot da un PPA .)

Se è previsto l'uso di JSX, il supporto JSX verrà automaticamente abilitato nei buffer JavaScript. I criteri predefiniti sono:

il nome del file termina in ".jsx" o
import React from 'react'o var React = require('react')appare nella parte superiore del file

È possibile personalizzare la strategia di rilevamento aggiungendo regexps alla variabile js-jsx-regexps. Per abilitare incondizionatamente JSX, si potrebbe anche impostare js-jsx-syntaxper t in una variabile / .dir-locals.el / file init, o chiamare js-jsx-enablein js-mode-hook.

Una volta abilitato, JSX verrà evidenziato e rientrato correttamente.

Gli utenti che sono rimasti delusi dal supporto per il rientro JSX disponibile dalla versione 25 potrebbero essere piacevolmente sorpresi di scoprire che il rientro è molto più accurato di prima. Ad esempio, JSX non deve più essere racchiuso tra parentesi per essere indentato correttamente. Anche il rientro del codice con le funzioni freccia funziona molto meglio ora.

— Jackson
fonte

3

Uso la modalità Web con la seguente configurazione:

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

Non tutta la configurazione è rilevante per JSX.

— DoMiNeLa10,

In effetti, avevo l'impressione che sarebbe stato utile comunque. Modificata la risposta per rimuovere elementi non correlati a JSX.

— amirouche,

0

Uso anche la modalità web e se usi use-packagepuoi usare questo frammento di codice.

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

Questo aggiunge anche moduli di nodi locali al tuo percorso in modo che tu possa usarli eslintcon flycheck. Nota che questo presuppone che tu sia su macOS, che deve add-node-modules-pathrisolvere lo stesso problema. Dovrai anche configurare Flycheck separatamente per far funzionare la lanugine.

Se vuoi solo cose relative a jsx puoi usare questo:

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

Ciò consentirà modalità web solo sulle cartelle con i nomi components, containerso src. Se si desidera abilitare la modalità Web su qualsiasi file .js, rimuovere tali righe. Se non si desidera web-mode abilitato srccartelle quindi rimuovere quella linea nella stringa sia su :modee :config.