18

I've use js2-mode but it don't indent html in javascript properly. I've found this repo https://github.com/jsx/jsx-mode.el but it's not for react, it's for some other jsx.

What do you use for editing react application with jsx files?

16

Solution 1:

Step 1, Use https://github.com/felipeochoa/rjsx-mode

Step 2, Install Emacs 25+, see https://github.com/mooz/js2-mode/issues/291

Step 3, Patch rjsx-mode with below code

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

Please note there is still some indent issue if you use arrow function in component attribute. But this solution works fine in most cases.

The patch is still useful for current stable version rjsx-mode v0.4.0.

The bug was fixed on 2018-8-19 in unstable version, see https://github.com/felipeochoa/rjsx-mode/pull/75 for details.

The reason I stick to rjsx-mode is that it inherits from js2-mode so I can use imenu functions from js2-mode. It's very useful when writing es6 javascript.

Solution 2:

Use web-mode. I don't use web-mode but its recent release note claims jsx indentation can be handled properly. If you use web-mode, imenu from js2-mode is not available any more.

  • 2
    Didn't know that web-mode support jsx, I will use it then, the author is really responsive on github, if you find bugs in indentation. – jcubic Jun 15 '17 at 8:06
  • 1
    The indentation problem in rjsx-mode seems to be fixed! – cgl Mar 16 '18 at 12:25
  • It's fixed after applying my fix. I use rjsx-mode in both Emacs 25.2 and 25.3 – chen bin Mar 18 '18 at 5:03
  • The patch is a good idea, wish it was already merged into rjsx mode though! – Rudolf Olah Nov 30 '18 at 23:38
  • Can you add information about the patch being unnecessary with new versions of rjsx-mode or remove it entirely? – DoMiNeLa10 Jan 26 at 11:23
4

On the Emacs master branch (eventually Emacs 27), JSX support is now built into the default JavaScript mode for Emacs, js-mode. (Try it out! You can build from source or e.g. install a snapshot from a PPA.)

screenshot of JSX highlighted in Emacs

If the use of JSX is anticipated, then JSX support will be automatically enabled in JavaScript buffers. The default criteria are:

  • file name ends in “.jsx”, or
  • import React from 'react' or var React = require('react') appears near the top of the file

You can customize the detection strategy by adding regexps to the variable js-jsx-regexps. To enable JSX unconditionally, you could also set js-jsx-syntax to t in an init file / .dir-locals.el / file variable, or call js-jsx-enable in js-mode-hook.

Once enabled, JSX will be highlighted and indented properly.

Users who were disappointed with the JSX indentation support available since version 25 may be pleasantly surprised to find that the indentation is far more accurate than before. For instance, JSX no longer needs to be wrapped in parenthesis in order to be indented properly. Indenting code with arrow functions also works much better now.

3

I use web-mode with the following configuration:

(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))))
  • Not all of your configuration is relevant to JSX. – DoMiNeLa10 Jan 26 at 11:24
  • Indeed, I was under the impression that it would be useful anyway. Edited the answer to remove things not related to JSX. – amirouche Jan 26 at 13:46
0

I also use web mode and if you use use-package you can use this code snippet.

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

This also adds local node modules to your path so that you can use eslint with flycheck. Note this assumes you're on macOS, which needs add-node-modules-path to fix that same issue. You will also need to configure Flycheck seperately for linting to work.

If you only want jsx related stuff you can do use this:

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

This will enable web mode only on folders with names components, containers or src. If you want to enable web mode on any .js file then remove those lines. If you don't want web-mode enabled in src folders then remove that line in the string both on :mode and :config.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.