如何在emacs中编辑jsx（反应）文件？

我使用了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-mode

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

使用网络模式。我不使用网络模式，但它的最新发行说明声称可以正确处理jsx缩进。如果您使用网络模式，则js2-mode中的imenu将不再可用。

现在，在Emacs master分支（最终为Emacs 27）上，对Emacs的默认JavaScript模式内置了JSX支持js-mode。（尝试一下！您可以从源代码构建或例如从PPA安装快照。）

如果预期将使用JSX，则将在JavaScript缓冲区中自动启用JSX支持。默认条件是：

• 文件名以“ .jsx”结尾，或者
• import React from 'react'或var React = require('react')显示在文件顶部附近

您可以通过向变量添加正则表达式来自定义检测策略js-jsx-regexps。要无条件启用JSX，您还js-jsx-syntax可以在init文件/.dir-locals.el/file变量中将其设置为t，或js-jsx-enable在中调用js-mode-hook。

启用后，JSX将突出显示并正确缩进。

从版本25开始对JSX缩进支持感到失望的用户可能会惊讶地发现缩进比以前更加准确。例如，为了正确缩进，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]?\\'")))))

这将只对文件夹启用Web模式的名称components，containers或src。如果要在任何.js文件上启用Web模式，请删除这些行。如果您不希望在src文件夹中启用网络模式，请同时在:mode和字符串中删除该行:config。