Как редактировать jsx (реагировать) файлы в emacs?

19

Я использую js2-режим, но он не делает отступ в HTML в JavaScript должным образом. Я нашел этот репозиторий https://github.com/jsx/jsx-mode.el, но он не для реакции, а для какого-то другого jsx.

Что вы используете для редактирования приложения реагировать с файлами JSX?

major-mode javascript

— jcubic
источник

17

Решение 1:

Шаг 1, используйте https://github.com/felipeochoa/rjsx-mode

Шаг 2. Установите Emacs 25+, см. Https://github.com/mooz/js2-mode/issues/291.

Шаг 3, Патч rjsx-режима с кодом ниже

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

Обратите внимание, что по-прежнему существует проблема с отступом, если вы используете функцию стрелки в атрибуте компонента. Но это решение прекрасно работает в большинстве случаев.

Патч все еще полезен для текущей стабильной версии rjsx-mode v0.4.0.

Ошибка была исправлена в 2018-8-19 годах в нестабильной версии , подробности см. Https://github.com/felipeochoa/rjsx-mode/pull/75 .

Причина, по которой я придерживаюсь, rjsx-modeзаключается в том, что он наследуется от js2-mode, поэтому я могу использовать функции imenu из js2-mode. Это очень полезно при написании es6 javascript.

Обратите внимание, если вы используете js2-jsx-modeвместо rjsx-mode, вам все еще нужен мой патч.

Решение 2:

Используйте веб-режим. Я не использую web-режим, но в его недавнем выпуске говорится, что отступ jsx может быть обработан правильно. Если вы используете веб-режим, imenu из js2-mode больше не доступен.

— чен бен
источник

2

Не знал, что веб-режим поддерживает jsx, тогда я буду его использовать, автор действительно отзывчив на github, если вы обнаружите ошибки в отступах.

— jcubic

1

Проблема с отступами в режиме rjsx, похоже, решена!

— cgl

Это исправлено после применения моего исправления. Я использую режим rjsx в Emacs 25.2 и 25.3

— chen bin

Патч - хорошая идея, если бы он был уже включен в режим rjsx!

— Рудольф Олах

Можете ли вы добавить информацию о ненужности патча в новых версиях rjsx-modeили удалить его полностью?

— DoMiNeLa10

5

На Emacs masterветви ( в конце концов , Emacs 27), поддержка JSX теперь встроена в режим JavaScript по умолчанию для Emacs, js-mode. (Попробуйте! Вы можете создать из исходного кода или, например, установить снимок из PPA .)

Если ожидается использование JSX, то поддержка JSX будет автоматически включена в буферах JavaScript. Критерии по умолчанию:

имя файла заканчивается на «.jsx», или
import React from 'react'или var React = require('react')появляется в верхней части файла

Вы можете настроить стратегию обнаружения, добавив регулярные выражения в переменную js-jsx-regexps. Чтобы включить JSX безусловно, можно также установить js-jsx-syntaxв т в переменном файл / .dir-locals.el / файл инициализации или вызов js-jsx-enableв js-mode-hook.

После включения JSX будет выделен и с соответствующим отступом.

Пользователи, которые были разочарованы доступной поддержкой отступов JSX начиная с версии 25, могут быть приятно удивлены, обнаружив, что отступ гораздо точнее, чем раньше. Например, JSX больше не нужно заключать в круглые скобки для правильного отступа. Отступ кода с функциями стрелок теперь работает намного лучше.

— Джексон
источник

3

Я использую веб-режим со следующей конфигурацией:

(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
источник

Не вся ваша конфигурация относится к JSX.

— DoMiNeLa10

Действительно, у меня сложилось впечатление, что это было бы полезно в любом случае. Отредактировал ответ, чтобы удалить вещи, не связанные с JSX.

— amirouche

0

Я также использую веб-режим, и если вы используете, use-packageвы можете использовать этот фрагмент кода.

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

Это также добавляет локальные модули узла в пути , так что вы можете использовать eslintс flycheck. Обратите внимание, что предполагается, что вы находитесь в macOS, которая должна add-node-modules-pathрешить эту проблему. Вам также нужно будет отдельно настроить Flycheck для работы.

Если вы хотите использовать только jsx, вы можете использовать это:

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

Это позволит веб - режим только по папкам с именами components, containersили src. Если вы хотите включить веб-режим для любого файла .js, удалите эти строки. Если вы не хотите, чтобы в srcпапках был включен веб-режим, удалите эту строку в строке как на, так :modeи на :config.