¿Cómo editar archivos jsx (react) en emacs?

Respuestas:

17

Solución 1:

Paso 1, usa https://github.com/felipeochoa/rjsx-mode

Paso 2, instale Emacs 25+, consulte https://github.com/mooz/js2-mode/issues/291

Paso 3, Patch modo rjsx con el código a continuación

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

Tenga en cuenta que todavía hay algún problema de sangría si utiliza la función de flecha en el atributo del componente. Pero esta solución funciona bien en la mayoría de los casos.

El parche sigue siendo útil para la versión estable actual rjsx-mode v0.4.0.

El error se corrigió el 2018-8-19 en una versión inestable , consulte https://github.com/felipeochoa/rjsx-mode/pull/75 para más detalles.

La razón por la que me rjsx-modequedo es que hereda del modo js2, por lo que puedo usar las funciones imenu del modo js2. Es muy útil al escribir es6 javascript.

Tenga en cuenta que si usa en js2-jsx-modelugar de rjsx-mode, todavía necesita mi parche.

Solución 2:

Utiliza el modo web. No uso el modo web, pero su reciente nota de lanzamiento afirma que la sangría jsx se puede manejar correctamente. Si usa el modo web, imenu del modo js2 ya no está disponible.

Chen Bin
fuente
2
No sabía que el modo web admite jsx, lo usaré en ese momento, el autor realmente responde en github, si encuentra errores en la sangría.
jcubic
1
¡El problema de sangría en el modo rjsx parece estar solucionado!
cgl
Se soluciona después de aplicar mi corrección. Uso el modo rjsx en Emacs 25.2 y 25.3
chen bin
El parche es una buena idea, ¡ojalá ya se haya fusionado en modo rjsx!
Rudolf Olah
¿Puede agregar información sobre el parche innecesario con nuevas versiones rjsx-modeo eliminarlo por completo?
DoMiNeLa10
5

Por Emacs masterrama (con el tiempo Emacs 27), el apoyo JSX está ahora integrado en el modo por defecto JavaScript para Emacs, js-mode. (¡Pruébelo! Puede construir desde la fuente o, por ejemplo, instalar una instantánea desde un PPA ).

captura de pantalla de JSX resaltada en Emacs

Si se anticipa el uso de JSX, la compatibilidad con JSX se habilitará automáticamente en los buffers de JavaScript. Los criterios predeterminados son:

  • el nombre del archivo termina en ".jsx" o
  • import React from 'react'o var React = require('react')aparece cerca de la parte superior del archivo

Puede personalizar la estrategia de detección agregando expresiones regulares a la variable js-jsx-regexps. Para habilitar JSX incondicionalmente, también se puede configurar js-jsx-syntaxpara t en una variable de archivo / locals.el-.dir / archivo de inicio, o una llamada js-jsx-enableen js-mode-hook.

Una vez habilitado, JSX se resaltará y sangrará correctamente.

Los usuarios que se sintieron decepcionados con el soporte de sangría JSX disponible desde la versión 25 pueden sorprenderse gratamente al descubrir que la sangría es mucho más precisa que antes. Por ejemplo, JSX ya no necesita estar entre paréntesis para sangrarse correctamente. La sangría de código con funciones de flecha también funciona mucho mejor ahora.

Jackson
fuente
3

Yo uso el modo web con la siguiente configuración:

(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
fuente
No toda su configuración es relevante para JSX.
DoMiNeLa10
De hecho, tenía la impresión de que sería útil de todos modos. Editó la respuesta para eliminar cosas no relacionadas con JSX.
amirouche
0

También uso el modo web y si lo use-packageusas puedes usar este fragmento de código.

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

Esto también agrega módulos de nodo local a su ruta para que pueda usar eslintcon flycheck. Tenga en cuenta que esto supone que está en macOS, que debe add-node-modules-pathsolucionar el mismo problema. También necesitará configurar Flycheck por separado para que linting funcione.

Si solo quieres cosas relacionadas con jsx, puedes usar esto: 

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

Esto habilitará el modo web solo en carpetas con nombres components, containerso src. Si desea habilitar el modo web en cualquier archivo .js, elimine esas líneas. Si no desea que Web en modo activado en srccarpetas a continuación, quitar esa línea en la cadena tanto en :modey :config.


fuente