Configuring Emacs for react, es6, and flow

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.

This is how you can work on modern web development projects with full support for tooling like JSX, Flow types, live eslint errors, automatic prettier.js formatting, and more.

Set up `web-mode`

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

Activate web-mode when editing .js and .js files:

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

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

JSX syntax highlighting

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

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

Indentation and other settings

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)

Live `eslint` errors

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

Install flycheck-mode:

M-x package-install RET flycheck RET`

Require flycheck before the next block:

(require 'flycheck)

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)

Using a local `eslint` from node_modules

To use eslint and a config file from a 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)

Prettier.js automatic formatting

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-prettier-hook)

Emmet HTML tag expansion

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

thefonso/react-es6-flow-emacs-configuration.md