emacsでjsx（react）ファイルを編集するには？

js2-modeを使用しましたが、javascriptでhtmlを適切にインデントしません。このレポジトリhttps://github.com/jsx/jsx-mode.elを見つけましたが、反応するためではなく、他のjsxのためです。

jsxファイルを使用してReactアプリケーションを編集するには何を使用しますか？

解決策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から継承されるため、js2-modeからimenu関数を使用できるからです。es6 javascriptを記述するときに非常に便利です。

のjs2-jsx-mode代わりに使用する場合はrjsx-mode、まだ私のパッチが必要です。

解決策2：

Webモードを使用します。Webモードは使用しませんが、最近のリリースノートではjsxインデントを適切に処理できると主張しています。Webモードを使用する場合、js2モードのimenuは使用できなくなります。

Emacs masterブランチ（最終的にはEmacs 27）では、JSXサポートがEmacsのデフォルトのJavaScriptモードに組み込まれました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は強調表示され、適切にインデントされます。

バージョン25以降のJSXインデントサポートに失望したユーザーは、インデントが以前よりもはるかに正確であることに気付くと驚くかもしれません。たとえば、JSXを適切にインデントするために括弧で囲む必要はなくなりました。矢印関数を使用したコードのインデントも、今では非常にうまく機能しています。

次の構成でWebモードを使用します。

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

また、Webモードも使用します。使用する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]?\\'")))))

これは名前のフォルダのみにWebモードを有効にしますcomponents、containersかsrc。.jsファイルでWebモードを有効にする場合は、それらの行を削除します。srcフォルダでWebモードを有効にしたくない場合は、文字列内のon :modeとの両方の行を削除します:config。