Comment éditer des fichiers jsx (react) dans emacs?

J'ai utilisé le mode js2 mais il ne met pas correctement le HTML en javascript. J'ai trouvé ce dépôt https://github.com/jsx/jsx-mode.el mais ce n'est pas pour réagir, c'est pour un autre jsx.

Qu'utilisez-vous pour éditer l'application React avec des fichiers jsx?

Solution 1:

Étape 1, utilisez https://github.com/felipeochoa/rjsx-mode

Étape 2, installez Emacs 25+, voir https://github.com/mooz/js2-mode/issues/291

Étape 3, Patch rjsx-mode avec le code ci-dessous

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

Veuillez noter qu'il existe toujours un problème de retrait si vous utilisez la fonction flèche dans l'attribut du composant. Mais cette solution fonctionne très bien dans la plupart des cas.

Le patch est toujours utile pour la version stable actuelle rjsx-mode v0.4.0.

Le bug a été corrigé le 2018-8-19 dans une version instable , voir https://github.com/felipeochoa/rjsx-mode/pull/75 pour plus de détails.

La raison pour laquelle je m'en tiens rjsx-modeest qu'il hérite du mode js2 afin que je puisse utiliser les fonctions imenu du mode js2. Il est très utile lors de l'écriture de javascript es6.

Veuillez noter que si vous utilisez js2-jsx-modeau lieu de rjsx-mode, vous avez toujours besoin de mon patch.

Solution 2:

Utilisez le mode Web. Je n'utilise pas le mode Web, mais sa récente note de version affirme que l'indentation jsx peut être gérée correctement. Si vous utilisez le mode Web, l'imenu du mode js2 n'est plus disponible.

Sur Emacs masterbranche (éventuellement Emacs 27), le soutien JSX est maintenant intégré dans le mode par défaut JavaScript pour Emacs, js-mode. (Essayez-le! Vous pouvez créer à partir des sources ou par exemple installer un instantané à partir d'un PPA .)

Si l'utilisation de JSX est prévue, la prise en charge de JSX sera automatiquement activée dans les tampons JavaScript. Les critères par défaut sont:

• le nom du fichier se termine par «.jsx», ou
• import React from 'react'ou var React = require('react')apparaît en haut du fichier

Vous pouvez personnaliser la stratégie de détection en ajoutant des expressions rationnelles à la variable js-jsx-regexps. Pour activer JSX sans conditions, vous pouvez également mettre js-jsx-syntaxà t dans un fichier init / .dir-locals.el / variable fichier, ou un appel js-jsx-enableen js-mode-hook.

Une fois activé, JSX sera mis en surbrillance et mis en retrait correctement.

Les utilisateurs déçus du support d'indentation JSX disponible depuis la version 25 peuvent être agréablement surpris de constater que l'indentation est bien plus précise qu'auparavant. Par exemple, JSX n'a ​​plus besoin d'être mis entre parenthèses pour être mis en retrait correctement. Le retrait du code avec les fonctions fléchées fonctionne également beaucoup mieux maintenant.

J'utilise le mode Web avec la configuration suivante:

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

J'utilise également le mode Web et si vous utilisez, use-packagevous pouvez utiliser cet extrait de code.

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

Cela ajoute également des modules de nœuds locaux à votre chemin afin que vous puissiez les utiliser eslintavec flycheck. Notez que cela suppose que vous êtes sur macOS, qui doit add-node-modules-pathrésoudre ce même problème. Vous devrez également configurer Flycheck séparément pour que les peluches fonctionnent.

Si vous ne voulez que des choses liées à jsx, vous pouvez utiliser ceci:

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

Cela activera le mode Web uniquement sur les dossiers avec des noms components, containersou src. Si vous souhaitez activer le mode Web sur n'importe quel fichier .js, supprimez ces lignes. Si vous ne souhaitez pas que le mode Web soit activé dans les srcdossiers, supprimez cette ligne dans la chaîne à la fois sur :modeet :config.