Як редагувати jsx (реагувати) файли в emacs?

Я використовую режим js2, але він не відступає html у JavaScript. Я знайшов це репо https://github.com/jsx/jsx-mode.el, але це не для реакції, це для деяких інших jsx.

Що ви використовуєте для редагування реагуючої програми з файлами jsx?

Рішення 1:

Крок 1, використовуйте https://github.com/felipeochoa/rjsx-mode

Крок 2, Встановіть Emacs 25+, див. Https://github.com/mooz/js2-mode/isissue/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, тому я можу використовувати імена функції з режиму js2. Це дуже корисно при написанні JavaScript на es6.

Зверніть увагу, якщо ви використовуєте js2-jsx-modeзамість цього rjsx-mode, ви все одно потребуєте мого виправлення

Рішення 2:

Використовуйте веб-режим. Я не використовую веб-режим, але його нотатка про випуск стверджує, що відступ jsx можна обробляти належним чином. Якщо ви використовуєте веб-режим, ім'я з режиму js2 вже не доступне.

На 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 більше не потрібно загортати в дужки, щоб правильно відступити. Код відступу з функціями стрілки також працює набагато краще.

Я використовую веб-режим із такою конфігурацією:

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

Я також використовую веб-режим, і якщо ви використовуєте, 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.