What do you use for editing react application with jsx files?
Emacs Stack Exchange is a question and answer site for those using, extending or developing Emacs. It only takes a minute to sign up.Sign up to join this community
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
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
Please note if you use
js2-jsx-mode instead of
rjsx-mode, you still need my patch.
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.
js-mode. (Try it out! You can build from
source using the Emacs 27 release candidate, or e.g. install a snapshot from a PPA, or install a DMG for macOS.)
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
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.
I use web-mode with the following configuration:
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
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
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