Como editar arquivos jsx (react) no emacs?

Eu uso o modo js2, mas ele não recua html em javascript corretamente. Encontrei este repositório https://github.com/jsx/jsx-mode.el, mas não é para reagir, é para outro jsx.

O que você usa para editar o aplicativo react com arquivos jsx?

Solução 1:

Etapa 1, use https://github.com/felipeochoa/rjsx-mode

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

Etapa 3, corrija o modo rjsx com o código abaixo

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

Observe que ainda há algum problema de recuo se você usar a função de seta no atributo component. Mas essa solução funciona bem na maioria dos casos.

O patch ainda é útil para a versão estável atual rjsx-mode v0.4.0.

O bug foi corrigido em 2018-8-19 na versão instável , consulte https://github.com/felipeochoa/rjsx-mode/pull/75 para obter detalhes.

A razão pela qual me rjsx-modeatendo é que ele herda do modo js2, para que eu possa usar funções imenu do modo js2. É muito útil ao escrever javascript es6.

Observe que se você usar em js2-jsx-modevez de rjsx-mode, ainda precisará do meu patch.

Solução 2:

Use o modo web. Eu não uso o modo web, mas sua nota de versão recente afirma que o recuo do jsx pode ser tratado adequadamente. Se você usar o modo da Web, o imenu do modo js2 não estará mais disponível.

No masterramo Emacs (eventualmente Emacs 27), o suporte a JSX agora está incorporado no modo JavaScript padrão do Emacs js-mode,. (Experimente! Você pode criar a partir da fonte ou, por exemplo, instalar um instantâneo a partir de um PPA .)

Se o uso de JSX for antecipado, o suporte a JSX será ativado automaticamente nos buffers JavaScript. Os critérios padrão são:

• o nome do arquivo termina em ".jsx" ou
• import React from 'react'ou var React = require('react')aparece próximo à parte superior do arquivo

Você pode personalizar a estratégia de detecção adicionando regexps à variável js-jsx-regexps. Para habilitar JSX incondicionalmente, você também pode definir js-jsx-syntaxa t em uma variável / .dir-locals.el / arquivo arquivo de inicialização, ou ligue js-jsx-enableno js-mode-hook.

Uma vez ativado, o JSX será destacado e recuado corretamente.

Os usuários que ficaram desapontados com o suporte à indentação JSX disponível desde a versão 25 podem ficar agradavelmente surpreendidos ao descobrir que a indentação é muito mais precisa do que antes. Por exemplo, o JSX não precisa mais ser colocado entre parênteses para ser recuado corretamente. Recuar o código com funções de seta também funciona muito melhor agora.

Eu uso o modo web com a seguinte configuração:

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

Eu também uso o modo web e, se você usar, use-packagepoderá usar esse trecho 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]?\\'")))))

Isso também adiciona módulos de nó local ao seu caminho, para que você possa usá eslint-lo flycheck. Observe que isso pressupõe que você esteja no macOS, que precisa add-node-modules-pathcorrigir o mesmo problema. Você também precisará configurar o Flycheck separadamente para que o linting funcione.

Se você quiser apenas coisas relacionadas ao jsx, use:

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

Isso irá ativar o modo web apenas em pastas com nomes components, containersou src. Se você deseja ativar o modo Web em qualquer arquivo .js, remova essas linhas. Se você não deseja que o modo da Web seja ativado nas srcpastas, remova essa linha da string em :modee :config.