I finally started using React and this article explains my GNU Emacs setup for editing rjx files.

web-mode

web-mode is currently the best choice for editing rjx files and every new version brings better support. You can install it using Melpa and enable it in your Emacs init files:

(add-to-list 'auto-mode-alist '("\\.jsx\\'" . web-mode))

Snippets

Just install react-snippets from Melpa.

Code checking

As usual, I use ESLint. With React we'll need eslint-plugin-react plugin. Install those with NPM:

npm install --save-dev eslint eslint-plugin-react

You can install those globally, but I prefer per project installation. If you do it like me (per project), don't forget to create .dir-locals.el as I described in one of my previous posts.

Create .eslintrc file with following:

{
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Please check ESLint documentation for other configuration options.

Install flycheck from Melpa and configure it to run ESLint:

(global-flycheck-mode)
(flycheck-add-mode 'javascript-eslint 'web-mode)

You may find other articles on the Internet describing how to setup JSXHint with Emacs and flycheck. JSXHint is deprecated.

You may also like my other article about linting JavaScript with GNU Emacs.

Share on: