For a while, JSX and new es6 syntax had flaky support in emacs, but there's been huge work on a lot of packages. Using emacs for JavaScript with React, ES6, and Flow (or Typescript, etc) is really easy and powerful in Emacs these days.

web-mode provides most of the underlying functionality, so a huge shout-out to the maintainer(s) there.

Install web-mode:

M-x package-install RET web-mode RET

Enable web-mode in your emacs configuration:

(add-to-list 'auto-mode-alist '("\\.jsx?$" . web-mode)) ;; auto-enable for .js/.jsx files

web-mode support Flow types out-of-the-box, so no additional configuration is required.

To enable JSX syntax highlighting in .js/.jsx files, add this to your emacs configuration:

(setq web-mode-content-types-alist '(("jsx" . "\\.js[x]?\\'")))

Configure indentation and any other preferences in the web-mode-init-hook:

(defun web-mode-init-hook ()
  "Hooks for Web mode.  Adjust indent."
  (setq web-mode-markup-indent-offset 4))
  
(add-hook 'web-mode-hook  'web-mode-init-hook)

flycheck can be used to show eslint errors in the current buffer.

Install flycheck-mode:

M-x package-install RET flycheck-mode RET`

Disable the default jslint:

(setq-default flycheck-disabled-checkers
              (append flycheck-disabled-checkers
                      '(javascript-jshint json-jsonlist)))

Using a global eslint

Enable eslint checker when web-mode is activated:

;; Enable eslint checker for web-mode
(flycheck-add-mode 'javascript-eslint 'web-mode)
;; Enable flycheck globally
(add-hook 'after-init-hook #'global-flycheck-mode)

To use a eslint and configuration from the project's local node_modules, use the following:

Install add-node-modules-path:

M-x package-install RET add-node-modules-path RET

(add-hook 'flycheck-mode-hook 'add-node-modules-path)

You can enable prettier.js to automatically format your files every time you save:

Install pretter-js-mode:

M-x package-install RET prettier-js-mode RET

Install the add-node-modules-path so you don't need a global prettier:

M-x package-install RET add-node-modules-path RET

Enable prettier-js-mode for files in a project with prettier (this will use the projects .prettierrc):

(defun web-mode-init-prettier-hook ()
  (add-node-modules-path)
  (prettier-js-mode))

(add-hook 'web-mode-hook  'web-mode-init-hook)

If you like emmett mode from other editors, you can use it in emacs too:

Install emmit-mode:

M-x package-install RET emmet-mode RET

Enable emmet-mode with web-mode:

(add-hook 'web-mode-hook  'emmet-mode)

And that's it, now Emacs is set up to edit all your JS/ES6/React/Flow or whatever files!

:: Cody Reichert